Come creare un drop down menu con un tema Wp

Se il tuo tema è un po’ datato e non permette la visualizzazione del menù principale a tendina ti presento in questo articolo un piccolo tutorial con istruzioni chiare e semplici su come renderlo sia drop down che pronto per i dispositivi mobili.

Per farlo potresti installare un qualsiasi plugin messo a disposizione dal mondo WordPress, ma se sei uno sviluppatore o non vuoi aggiungere ulteriori e inutili plugin al tuo file system allora questa è la pagina giusta per te.

Cosa ti serve per creare un menù a tendina su WP

Ecco cosa ti serve per partire a creare un dropdown menù su WordPress:

• Una cosa scontata: l’installazione di WordPress
• Un tema figlio che stai sviluppando e a cui puoi avere accesso
• Un editor di codice
• Qualche conoscenza base di Javascript, Css e di Wp

Come settare un menu su Wp

WordPress usa delle funzioni native per creare il proprio menù.

Questa funzione assomiglia a:

wp_nav_menu ( array ( 'container_class' => 'main-nav' , 'theme_location' => 'primary' ) );

E solitamente la trovi in header.php del tema figlio.

Potresti trovarla leggermente diversa a seconda di cosa deve fare. In questo caso le istruzioni presenti:

• wp_nav_menu() è la funzione che recupera un menu di navigazione e lo emette.
• I parametri vengono quindi racchiusi in un array.
• container_class è la classe CSS che verrà assegnata al contenitore in cui è racchiuso il menu. In questo caso, è main-nav. Questo è ciò a cui ci rivolgeremo più avanti con il nostro CSS.
• theme_location => primary dice a WordPress che questa è la navigazione principale. Se creo un menu nelle schermate di amministrazione e seleziono la  casella Primary navigation, questo menu verrà utilizzato per questo punto nel codice.

Come Creare Un Drop Down Menu Con Un Tema Wp

Le profondità del menù a tendina su WordPress

Se vuoi costruire un menù a tendina su Wp devi dargli della profondità, cioè assegnare alle voci padri delle voci figli in questa maniera:

Come Creare Un Drop Down Menu Con Un Tema Wp

Nel codice html del tuo sito, una volta salvato questo genere di menù, apparirà l’html annidato con le voci padri e le voci figlie

<div  class= "main-nav" >
    <ul  id= "menu-navbar"  class= "menu" >
        <li  id= "menu-item-610"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu- item-610" >  <a href= "https://www.noniente.com/" > Home </a></li>
        <li  id= "menu-item-613"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-613" ><a  href= "https://www.noniente.com/about/" > Chi sono </a></li>
        <li  id= "menu-item-615"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-615" ><a href  = " https://www.noniente.com/services/" > Servizi </a>
            <ul  class= "sottomenu" >
                <li  id= "menu-item-618"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-618" ><a  href= "https://www.noniente.com/services/services-for-individuals/" > Preparazione per i colloqui / individui </a></li>
                <li  id= "menu-item-617"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-617" ><a  href= "https://www.noniente.com/services/services-for-groups/" > Preparazione per colloqui/gruppi </a></li>
                <li  id= "menu-item-619"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-619" ><a  href= "https://www.noniente.com/services/conducting-interviews/" > Conduzione di interviste </a></li>
            </ul>
        </li>
        <li  id= "menu-item-30780"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-30780" ><a  href= "https://www.noniente.com/success-at-your-next-job-interview/" > Il mio libro </a></li>
        <li  id= "menu-item-614"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-614" ><a  href= "https://www.noniente.com/clients-2/" > Clienti </a></li>
        <li  id= "menu-item-616"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-616" ><a  href= "https://www.noniente.com/interview-tips/" > Suggerimenti per interviste </a></li>
        <li  id= "menu-item-612"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-612" ><a  href= "https://www.noniente.com/where-i-work/" > Aree coperte </a></li>
        <li  id= "menu-item-611"  class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-611" ><a  href= "https://www.noniente.com/contatto/" > Contatto & Link </a></li>
    </ul>
</div> <!-- #main-nav -->

Lo stile del drop down menù su WordPress

A questo punto è necessario applicare lo stile al nostro menù che a frontend non si vedrà correttamente.

Nascondere le voci di menù figlie per impostazione predefinita

Bisogna nascondere gli elementi più profondi del primo livello perchè devono essere nascosti al caricamento della pagina e vedersi solo quando ci passa sopra il mouse.

Quindi:

main-nav ul ul {
    display: none;
}

Visualizzare gli elementi di secondo livello quando si passa sopra il primo

Devi far capire al foglio di stile del tema figlio che vuoi che il secondo elemento si veda quando si passa con il mouse sopra il primo.
Quindi:

.main-nav ul li:hover > ul {
    display: block;
}

Ti accorgerai però che ancora il secondo livello non si vede perfettamente.

Aggiunta dello stile per il menù di secondo livello

Quindi devi andare a tematizzare gli elementi figli. Questo potrebbe essere un esempio:

.main-nav ul ul {
    display: none;
    position: absolute;
    top: 3em;
    left: 0;
    z-index: 99999;
    width: 180px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
}

Ricordati però di assegnare il position relative alla voce di menù padre, in questa maniera:

.main-nav li {
    position: relative;
}

Creare un Burger menù per dispositivi mobili su WordPress

Il menù così realizzato è ottimale per navigare il tuo sito da desktop, ma è anche vero che ormai la navigazione per la maggior parte risulta essere da dispositivi mobili. Quindi ecco come trasformare il tuo drop down menù per schermi molto piccoli.

Aggiungi una icona di menù su WordPress

Prima di tutto devi aggiungere l’icona che racchiude o rappresenta il menù da mobile da cliccare per accedere alla navigazione del tuo sito.

Per farlo devi aggiungere questo codice al file header.php, nel punto in cui vuoi che si veda.

 <a class= "toggle-nav" href= “#" > ☰ </a> 

Aggiungi il CSS necessario per il tuo Burger menù

Perchè il simbolo del menù si veda bene devi ovviamente stilarlo tramite CSS. In prima istanza per gli schermi più grandi gli devi dire di nascondere questo burger menù:

.toggle-nav {
display : none! important;
}

Poi all’interno di una media query, aggiungi il CSS per il menu:

@media screen and ( max-width: 550px) {

 
	a.toggle-nav {
	    float: right;
	    margin: 0 0 0.5em 0.5em;
	    display: inline-block !important;
	    color: #fff;
	    transition: color linear 0.15s;
	}
	
	a.toggle-nav:hover, a.toggle-nav:active {
	    text-decoration: none;
	    color: #fff;
	} 
   
	.menu-header {
	    display: inline-block;
	    position: relative;
		margin: 0;
		width: 100%;
	}
	
	#access .menu-header ul {
	    display: none;
		position: absolute;
	    top: 80%;
	    right: 0px;
	    min-width: 200px;
	    background-color: #7B3D84;
	    font-size: 1.2em;
	}
	
	#access .menu-header li {
	    display: block;
	    float: none;
	    padding-right: 2%;
	    text-align: right;
	}
	#access ul li:hover > ul {
		display: none;
	}
		 
}

Devi personalizzare questo CSS in base agli ID e alle classi del tuo menù.

Aggiungi il Javascript

Il passaggio finale consiste nell’aggiungere uno script per far apparire il menù quando un utente tocca l’icona. Per tenere in ordine i tuoi script ti consiglio di creare una cartella nel tuo tema figlio chiamata “script” e al suo interno salva un file chiamato buger-menu.js con questo codice:

jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
        jQuery('.menu-header ul.menu').slideToggle(500);
 
        e.preventDefault();
    });
    
});

Poi devi fare in modo che questo script sia richiamato dal tuo tema figlio. Nel file functions.php del tema figlio aggiungi questa funzione per accodare lo script:

function tutsplus_burger_menu_scripts() {
    
	wp_enqueue_script( 'burger-menu-script', get_stylesheet_directory_uri() . '/scripts/burger-menu.js', array( 'jquery' ) );
 
}
add_action( 'wp_enqueue_scripts', 'tutsplus_burger_menu_scripts' );

Ora potrai testare il tuo Burger menù anche su schermi piccoli come quelli degli smartphone.

Quando sono utili i menù multilivello

Se non ci sono molte voci di navigazione questo genere di menù principale va benissimo e risulta molto comodo alla navigazione.

Se invece si hanno parecchie sottovoci si dovrebbe pensare di organizzare la navigazione del sito attraverso un mega menù.

Per consigli o sviluppo custom sul tuo sito sentiamoci attraverso il modulo.