Navigation (aktiver Menüpunkt)

Basics

Damit der User (Benutzer) sofort sieht, auf welcher Seite man ist, wird der aktuelle Menüpunkt anders formatiert und dadurch hervorgehoben. Mit einer einzeiligen Ergänzung in den CSS-Angaben (Zeile 25), kann dieser Effekt einfach erreicht werden.

Beispiel "Navigation mit aktiven Menüpunkt"

HTML

CSS

					
					nav {
						width: 100%;
						float: left; /* Ist notwendig, damit der Container nicht "zusammenbricht" und die Hintergrundfarbe angezeigt wird. */
						padding: 0;
						background-color: #9A0000;
					}

					ul.nav-erweitert {
						margin: 0;
						padding: 0;
						list-style: none;
					}
					
					ul.nav-erweitert li {
						padding: 0;
						float: left; /* Ist notwendig, dass die li-Elemente nebeneinander stehen. */
					}
					
					ul.nav-erweitert li a {
						color: #FFF;
						text-decoration: none;
						padding-top: 10px;
						padding-right: 20px;
						padding-bottom: 10px;
						padding-left: 20px;
						border-right: 1px solid #FFF; /* Die Rahmenlinie fungiert als Trennlinie. */
						background-color: #9A0000;
						float: left; /* Ist notwendig, damit padding auf allen vier Seiten funktioniert. */
					}
					
					ul.nav-erweitert li a:hover,
					ul.nav-erweitert li a.current { /* Mit der Klasse "current" wird im HTML-Code, der jeweils aktive Menüpunkt markiert. */
						color: #000;
						background-color: #4AA00C;
					}