Menu Drop-Down con jQuery e Superfish

Fatto il nostro menu personalizzato oggi gli daremo un effetto movimento creando un menu drop-down ad effetto cascata-soft (come lo definisco io) usando jQuery e Superfish.

Ingredienti per il nostro menu

Per cucinare per bene il nostro menu abbiamo bisogno di un solo ingrediente, un bel Superfish fresco fresco appena pescato 🙂  che puoi scaricare direttamente da qui: Download Superfish. In verità avrai bisogno anche di jQuery ma potrai usare la versione linkata direttamente da Googleapis o volendo anche quella che trovi di default nel core di WordPress.

Alcune precisazioni da leggere assolutamente

Come avrai oramai capito non tutti i temi di WordPress implementano le stesse funzioni e molte volte alcuni procedimenti che descrivo possono variare in base a diversi fattori. Per questo motivo ho deciso, da cui in avanti, di prendere il tema di default Twentyten come base di partenza per le nostre modifiche.

Superfish e jQuery, come e dove

Come detto in precedenza questo effetto usa le librerie jQuery e Superfish che andremo a richiamare non nell’header ma direttamente in functions.php. Se non hai scaricato Superfish fallo dal link che ti ho postato sopra e inserisci il file in una cartella /js che andrai a creare nella directory principale del tema. Nella stessa cartella /js crea un file scripts.js e inserisci questo codice:

[html]jQuery(function(){
jQuery(‘ul.menu-header’).superfish();
});[/html]

Ora apri functions.php e alla fine aggiungi questo:

[php]function wpstyle_script() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js’);
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘superfish’, get_bloginfo(‘template_url’) . ‘/js/superfish.js’);
wp_enqueue_script(‘scripts’, get_bloginfo(‘template_url’) . ‘/js/scripts.js’);
}
}
add_action(‘init’, ‘wpstyle_script’);[/php]

da notare la chiamata verso Googleapis, mentre in seguito ai files .js che ci servono per il funzionamento del menu.
Puoi salvare il file e aprire header.php dove inserirai prima di php wp_head(); questa stringa:

[php]wp_enqueue_script(‘jquery’); [/php]

La struttura del menu

Per poter funzionare dovrai modificare leggermente anche la struttura del menu personalizzato inserendo semplicemente menu_class al posto di container_class nel codice che segue:

[php] wp_nav_menu( array( ‘menu_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); [/php]

Questa modifica impone allo script di agire sul selettore <ul> del menu piuttosto che sul <div> contenitore.

Il foglio di style CSS

Così com’è il menu Superfish funziona perfettamente in quanto il tema è già abilitato nel suo CSS alla visualizzazione del menu Drop-Down. Se comunque volessi fare delle modifiche o esportare la parte di codice per applicarla ad un tuo tema personalizzato ti basterà agire su questo codice in style.css:

[css]/* =Menu
————————————————————– */

#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #333;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}
[/css]

Hola a todos!!!