• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigationsbar: Anzeigen auf welcher Seite ich bin

W

wizdyrdek

Neues Mitglied
Hey Leute,
ich habe mir eine Navigationsleiste mit CSS und HTML gemacht.
Hier die Codes:
HTML:
HTML: 
<html><head><link rel = "stylesheet" type = "text/css" href = "style.css"</head><body>	<ul><li><a href= "bsp.html">Beispiel</a> </li> <li><a href= "bsp1.html">Beispiel1</a> </li> </ul>		</body></html>


Und der CSS Code:
Code: 
@import url(dropdown.css);
body {margin:0; padding:0;}


ul {background-image:url(navi.jpg); height:60px; width: 100%;}


li {float:left;}




ul a {color:white; padding-left:32px; padding-right:32px; text-decoration:none; line-height:60px; font-size:20px; background-image:url(line.png); background-repeat:no-repeat; display:block;}
ul a:hover {color:white; background-color:black;}



Nun möchte ich das so machen, dass wenn ich auf der Startseite bin, der "Knopf" in der Navigationsleiste eine andere Farbe animmt, damit man sieht auf welcher Seite man ist.
Wäre nett wenn ihr mir helft. :)
Vielen Dank ;)
 
ich hatte so etwas mal mit a:active (analog zu deinem a:hover) erreicht, aber das hat irgendwie nur geklappt, wenn man über den Link auf die Seite ging. Beispielweise nach Browser vor/zurück war es dann nicht mehr active. Ansonsten könnte ich mir vorstellen, das Menü dynamisch (mit PHP) zu erstellen und je nach aktiver Seite einen der Links mit class=active_link dann andersfarbig zu machen.
 
Zuletzt bearbeitet:
Hallo,

um die jeweilige Seite in der Navigation kenntlich zu machen, vergibst du dem Li eine Klasse und referenzierst diese im CSS.

Beispiel:
HTML: 
<ul id="menu">
        <li><a href="#nogo">Help 1</a></li>
        <li class="aktiv"><a href="#nogo">Help 2</a></li>
        <li><a href="#nogo">Help 3</a></li>
        <li><a href="#nogo">Help 4</a></li>
        <li><a href="#nogo">Help 5</a></li>
    </ul>

In dein CSS schreibst du dann ul#menu .aktiv{ }
und fügst die Attribute mit den Werten ein die sich ändern sollen damit man weiss, dass man sich auf der Seite befindet.

Das musst du für jede Seite extra machen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben