Schönere Menüs in WordPress dank jQuery
Heute habe Ich mich mal dran gesetzt um wieder ein bischen das Layout von dieser Seite zu verbessern. Dabei hat mich besonders das Menü unterhalb des Headers gestört. Wie bei vielen WordPress Themes wird das Menü anhand von css Tricks gebastelt. Das erfüllt zwar seinen Zweck aber ist nicht besonders schön. Vor allem wenn man sich mal die ein oder andere Seite anschaut, die mit so schönen Menüanminationen glänzen.
Dabei ist die Lösung gar nicht mal so schwer. JQuery heißt das Zauberwort. Das schöne ist, das die jQuery Bibliotheken bereits schon in den aktuellen WordPressversionen integriert sind. Lediglich in paar Codezeilen müssen im Blog ergänzt werden.
Was muss dafür gemacht werden?
Als erstes öffnen wir die header.php. Zwischen den Codezeile <head> und </head> wird folgender Code eingefügt:
<?php wp_enqueue_script(‘jquery’); ?>
<script type=’text/javascript’>
jQuery(document).ready(function() {
jQuery(“#dropmenu ul”).css({display: “none”}); // Opera Fix
jQuery(“#dropmenu li”).hover(function(){
jQuery(this).find(‘ul:first’).css({visibility: “visible”,display: “none”}).show(268);
},function(){
jQuery(this).find(‘ul:first’).css({visibility: “hidden”});
});
});
</script>
Damit binden wir die jQuery Bibliothek in unser Theme ein. Als nächstes nächstes ersetzen wir die Zeile wp_list_pages mit dem folgenden Code in der header.php:
<ul id=”dropmenu”>
<?php wp_list_pages(‘sort_column=menu_order&title_li=’); ?>
</ul>
Damit zeigen wir dann schon das Menü in unserm Theme an. Damit das ganze auch noch hübsch aussieht brauchen wir auch noch in der style.css folgenden Code:
#dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#fff; font-weight:bold;}
#dropmenu a {display:block; padding:0.25em 1em; color:#686868; border-right:1px solid #c8c8c8; text-decoration:none; background:#fff;}
#dropmenu a:hover {background:#888; color:#fff;}
#dropmenu li {float:left; position:relative;}
#dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;}
#dropmenu ul a {border-left:1px solid #c8c8c8;}
#dropmenu li ul {border-top:1px solid #c8c8c8; width:14.1em;}
#dropmenu li ul a {width:12em; height:auto; float:left; border-bottom:1px solid #c8c8c8;}
#dropmenu ul ul {top:auto;}
#dropmenu li ul ul {left:12em; margin:0px 0 0 10px;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
Hier sind keine Grenzen in der Farbgebung und dem Aussehen gesetzt. Das ganze schaut dann bei mir in Aktion so aus:
So lässt sich mit wenig Aufwand und einfachen Mitteln eine tolles Menü auf die eigene Webseite zaubern 
