Für größere Webseiten, die auf WordPress basieren, benötigt man meistens eine horizontale Navigation. Praktischerweise sollte die Navigation natürlich dynamisch sein, sodass man bei neuen Seiten nicht immer wieder den Code bearbeiten muss. Schöne Animationen geben der Navigation den letzten Schliff. Das bekommt man am Besten mit jQuery hin. Nachfolgend nun ein Beispiel für so eine Navigation mit Hauptmenüpunkten und 2 Unterebenen.
Um die Navigation dynamisch im Frontend anzuzeigen, muss zunächst dieser Code in die header.php kopiert werden:
<div id="mainnav">
<div>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
</div>
Nun folgen die passenden CSS-Klassen in der style.css. Diese können natürlich je nach Belieben angepasst werden.
#mainnav {
background:url(„images/trenner.png“) no-repeat left;
height:50px;
position:absolute;
top:33px;
font-size:0.75em;
margin:1px 20px;
padding:0px 0px 0px 2px;
}
#mainnav ul,
#mainnav ul li {
margin:0px;
list-style:none;
}
#mainnav ul li {
background:url(„images/trenner.png“) no-repeat right top;
float:left;
display:block;
padding:0px 2px 0px 0px;
position:relative;
}
#mainnav ul li a {
color:#fff;
text-decoration:none;
text-shadow:0px 1px 0px #2e60ac;
display:block;
padding:3px 10px 0px;
line-height:48px;
}
#mainnav ul li a:hover,
#mainnav ul li.current_page_item a {
background:url(„images/naviactive.png“) repeat-x top;
}
#mainnav ul li ul.children {
background:#1c4f91;
position:absolute;
left:0px;
top:50px;
width:250px;
padding:10px 0px 5px 0px;
}
#mainnav ul li ul.children li {
background:none;
float:none;
padding:3px 0px;
}
#mainnav ul li ul.children li a {
display:block;
padding:4px 10px 0px;
line-height:20px;
}
#mainnav ul li ul.children li ul.children {
background:#4078b7;
float:left;
position:absolute;
top:3px;
left:250px;
padding:0px;
}
Um das Ganze nun auch schön animieren zu können benötigen wir noch jQuery. Dazu wird in der header.php im head-Bereich erst einmal die jQuery-Bibliothek geladen. Am einfachsten geht das über die Google-APIs. Danach kommt das eigentlich Script, welches dafür sorgt, dass unsere Navigation beweglich wird.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" >
$(document).ready(function () {
$('.dyn_menu li ul').css('display','none');
$('.dyn_menu ul li ').hover(function() {
$(this).children('ul.children').slideDown('slow');
}, function(){
if($(this).is(':hidden'))
{ $(this).hide(); }
else { $(this).parent().find("ul.children").slideUp('slow'); }
});
});
</script>
Published by