I sottomenu di WordPress sono sempre contrassegnati dalla classe sub-menu
e di conseguenza sono facili da individuare. Del resto l'intera struttura dei menu di WordPress usa diversi
attributi che rendono più facile utilizzare jQuery per i nostri scopi. Uno di questi è nascondere un sottomenu dopo un certo periodo di tempo.
La procedura è la seguente:
$( "li", "#menu" ).each(function() {
var $li = $( this ),
$subMenu = $li.find( "ul.sub-menu" );
// find() per i diretti discendenti
$li.hover(function() {
if( $subMenu.is( ":hidden" ) ) {
$subMenu.stop( true, true ).show();
// stop() per evitare code nelle animazioni
}
}, function() {
if( $subMenu.is( ":visible" ) ) {
setTimeout( function() {
$subMenu.stop( true, true ).hide();
}, 600);
}
});
});
Come si può notare è stato creato un breve ritardo nella chiusura dei sottomenu utilizzando la funzione setTimeout()
. Questa tecnica è utile a livello di usabilità dei menu perché
consente all'utente di poter restare più a lungo sulle voci del sottomenu.