Hallo @ all,
Ich bin noch relativ neu im Bereich Wordpress und habe bisher nur Templates umgesetzt, bei denen die Navigation nicht aus Bildern bestand.
Nun wünscht sich ein Kunde jedoch eine grafische Navigation, samt hover- und currentzustand.
Das ganze soll einmal soll aussehen: klick
(wobei der Navigationspunkt "Start" den hover darstellt und die Seite "unsere Leistungen" gerade aktiv ist)
Nun frage ich mich, wie ich dies bei Wordpress umsetzen kann.
Bisher funktioniert alles vom HTML- und CSS-Prinzip her (ich benutze Sprites), jedoch weiß ich nun nicht wie ich die dynamischen Seiten des Templates integrieren soll, um dann noch bestimmen zu können, bei welchem navigationspunkt, welches bild wann erscheinen soll.
HTML:
Code
<div id="navi">
<div id="navi_left">
<ul>
<li><a id="start_active" href="http://www.habewind.de"><span class="hidden">Start</span></a></li>
<li><a id="leistungen" href="#"><span class="hidden">Unsere Leistungen</span></a></li>
<li><a id="kontakt" href="#"><span class="hidden">Kontakt</span></a></li>
<li><a id="impressum" href="#"><span class="hidden">Impressum</span></a></li>
</ul>
</div>
<div id="navi_right">
....suche....
</div> <br style="clear:both" />
</div>CSS:
Code
#navi {
background-image:url(images/navi.jpg);
width: 983px;
height: 55px;
}
#navi_left {
width: 711px;
float: left;
}
#navi ul {
margin: 0px;
padding: 0px;
}
#navi li {
margin: 0px;
padding: 0px;
display: inline;
}
#start {
width: 75px;
height: 45px;
text-decoration: none;
float: left;
background: url(images/start.jpg) 0 0;
}
#start_active {
width: 75px;
height: 45px;
text-decoration: none;
float: left;
background: url(images/start.jpg) 0 45px;
}
#start:hover {
background-position: 0 90px;
}
#leistungen {
width: 156px;
height: 45px;
text-decoration: none;
float: left;
background: url(images/leistungen.jpg) 0 0;
}
#leistungen:hover {
background-position: 0 90px;
}
#kontakt {
width: 87px;
height: 45px;
text-decoration: none;
float: left;
background: url(images/kontakt.jpg) 0 0;
}
#kontakt:hover {
background-position: 0 90px;
}
#impressum {
width: 107px;
height: 45px;
text-decoration: none;
float: left;
background: url(images/impressum.jpg) 0 0;
}
#impressum:hover {
background-position: 0 90px;
}