jQuery submenu in WordPress

Voor sommige websites is het wel eens nodig om een simpel uitschuifbaar submenu te maken voor de actieve pagina. Hiermee bedoel ik niet een drop-down menu waar al veel informatie over te vinden is. Maar een simpele versie bij voornamelijk verticale menus. In dit verticale menu willen we alleen de hoofditems weergeven. De subitems die onder deze hoofditems zitten mogen alleen zichtbaar zijn wanneer het hoofditem waar de subitems onderdeel van uitmaken actief is.

Om dit menu te maken ga ik er vanuit dat het menu geplaatst is in een div met het id “menu”. De code in bijvoorbeeld header.php ziet er dan als volgt uit:

[php]<div id="menu">
<?php
// main menu
wp_nav_menu(array(
’theme_location’ => ‘primary’,
));
?>
</div>[/php]

WordPress maakt nu een lijst met menu- en subitems aan. In dit menu willen we alleen de hoofditems laten zien: alle subitems moeten verborgen worden. Dit doen we met de volgende CSS code. Deze kun je plaatsen in style.css.

[css]#menu ul li ul {
display: none;
}[/css]

Maar nu zijn de subitems altijd verborgen. Als je op een pagina komt met subitems, wil je natuurlijk dat deze beschikbaar zijn. Hier komt jQuery om de hoek kijken. Plaats de volgende code in je header.php:

[js]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".current_page_parent > ul").toggle();
$(".current_page_item > ul").toggle();
});
</script>[/js]

Door jQuery kunnen we snel de actieve subitems vinden en activeren. Je kunt eventueel ook animeren met de toggle() functie. Zie voor meer informatie de handleiding van jQuery.