Ich habe vor eine Drop Down Navigation mit Hilfe von jQuery zu erstellen. Die Navigation soll automatisch von Wordpress mit den Seiten gefüllt werden, also keine manuelle Anpassung in der Header-Datei soll nötig sein, damit die Seiten angezeigt werden.
Ich habe das Menü zunächst folgendermaßen umgesetzt:
<div id="headnav">
<ul>
<li><a href="<?php bloginfo('url'); ?>">Startseite</a></li>
<li>
<a href="aktuelles.html">Aktuelles</a>
<ul>
<li><a href="news.html">Neu</a></li>
<li><a href="veranstaltungen.html">Produkte</a></li>
<li><a href="archiv.html">Support</a></li> </ul> </li>
<li>
<a href="m3.html">Menüpunkt 3</a> <ul>
<li><a href="u1.html">Unterpunkt 1</a></li>
<li><a href="u2.html">Unterpunkt 2</a></li>
<li><a href="u3.html">Unterpunkt 3</a></li>
<li><a href="u4.html">Unterpunkt 4</a></li>
<li><a href="u5.html">Unterpunkt 5</a></li>
</ul>
</li>
</ul>
</div>
Ich weiß nicht welche PHP-Codes ich wo einfügen muss, damit die Hauptseiten und Unterseiten mit folgender CSS Formatierung und den darauf jQuery Code funktionieren wird.
#headnav {}
#headnav ul{ list-style-type:none; margin:0; padding:0; }
#headnav li { float:left; padding:0; margin:0;}
#headnav li a { width:150px; display:block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:80%; border:1px solid #ccc; }
#headnav li a:hover { color:#f00; }
#headnav ul ul { display:none; position:absolute; z-index:999; }
#headnav li li { float:none; margin-top:-1px; }
#headnav li li a { background: #EBE7E6!important; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border-bottom:1px solid #D0D0D0; margin-right:0; }
$(document).ready(function() {
$("#headnav li:has(ul)").hover(function(){
$(this).find("ul").slideDown();
}, function(){
$(this).find("ul").slideUp();
});
});
<?php wp_list_pages('depth=1&title_li='); ?> Dieser Code fällt mir noch ein, aber das sind ja nur die Hauptseiten.
Wäre super wenn mir da einer von Euch helfen könnte, damit diese Navigation funktionieren kann. :)