Blog - Ultime notizie
Come Creare Un Drop Down Menu Con Un Tema Wp

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

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

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.

0 commenti

Lascia un Commento

Vuoi partecipare alla discussione?
Sentitevi liberi di contribuire!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Contattami se ti servono informazioni relative a Come creare un drop down menu con un tema Wp





    Servizi correlati

    Conoscenza di CMS

    Conoscenza di CMS

    I principali CMS che conosco sono: Wordpress, Drupal, Prestashop, Magento. In questa breve lista li ho messi in ordine di esperienza acquisita.

    La mia conoscenza del CMS Wordpress

    La mia conoscenza del CMS Wordpress

    Sviluppo siti internet in Wordpress da almeno 15 anni e in questo tempo ho avuto modo di personalizzarlo in ogni modo, in ambito di vendita o di lead generation

    Altri servizi

    API

    API

    Uso e gestione delle varie librerie Api esistenti: Google Analytics, Google Maps, Fatture in cloud, Sendowl, Ebay, Amazon, ecc.. Lettura di dati tramite JSON, ecc…

    Conoscenza di CMS

    Conoscenza di CMS

    I principali CMS che conosco sono: Wordpress, Drupal, Prestashop, Magento. In questa breve lista li ho messi in ordine di esperienza acquisita.

    Creazione di Landing Page

    Creazione di Landing Page

    La landing page è una pagina specifica che viene raggiunta da un visitatore dopo aver cliccato solitamente su un link o su un annuncio pubblicitario. E’ strutturata in modo da espandere l’argomento trattato nel link o annuncio e per convertire...

    Gestire un sito web

    Gestire un sito web

    Hai commissionato un sito web, con gallerie fotografiche, slide show, animazioni JQuery e lo lasci invariato per anni? Pensi che il tuo biglietto da visita in internet debba rimanere statico come la brochure che hai fatto stampare e che viene...

    Invio email, gestione, creazione, G Suite

    Invio email, gestione, creazione, G Suite

    Gli strumenti per l’invio dei messaggi elettronici sono molti e tutti diversi. Alcuni mettono a disposizione molti strumenti, altri meno. Alcuni sono flessibili, altri meno. E comunque può succedere che l’email non arrivi al destinatario per i molteplici motivi: DKIM,...

    Matomo

    Matomo

    Se stai cercando un’alternativa libera a Google Analytics per monitorare il tuo sito web, Matomo è la scelta giusta per te. Questo software open source ti offre una vasta gamma di strumenti per analizzare i visitatori del tuo sito, come...

    Moduli e GDPR

    Moduli e GDPR

    GDPR, Privacy policy, cookie policy, moduli per la raccolta dei dati conformi allo standard della privacy policy, analisi e determinazione di quello che serve per essere in regola col regolamento GDPR.

    Servizi di Hosting

    Servizi di Hosting

    Ti trovi con un sito internet già portato a termine ma che sembra lento, poco navigabile (in termini di velocità) o a volte ti trovi schermate di errore (solitamente di memory limit) che non sai come interpretare, ma che spariscono...

    Social Network, Google Merchant

    Social Network, Google Merchant

    Come usare i social network in modo da rendere in tuo sito internet interconnesso ad essi. Invio di articoli ai Social Network, invio prodotti attraverso i feed, Google Merchant.

    Standard di sicurezza

    Standard di sicurezza

    Valutare se un sito è stato bucato o meno, quali standard di sicurezza usare per evitare che questo succeda di nuovo. Applicare il certificato HTTPS alla navigazione e fare in modo che tutte le url vengano redirette in navigazione sicura,...

    Sviluppo di siti internet

    Sviluppo di siti internet

    Nel corso degli anni ho acquisito un’ottima conoscenza dello sviluppo di siti web. Ho lavorato su un’ampia gamma di progetti che mi hanno richiesto di sviluppare diverse competenze. Ho lavorato a piccoli siti web con solo una o due pagine,...

    Tutti i prodotti Google

    Tutti i prodotti Google

    Uso quotidianamente tutti i prodotti Google e ne sperimento le loro potenzialità. Tutti i giorni ho a che fare con Gmail, Gsuite, Google Analytics, Google Tag Manager, Google Search Console, Drive, Youtube, My Business, Maps, Documenti, Fogli (Google Sheet), Presentazioni,...

    Hai un problema con il web?

    Il tuo sito internet non vuole funzionare? Vuoi rinnovarlo o sistemarlo? Hai un’idea di integrazione ma non sai se è possibile realizzarla o meno?

    Testimonianze

    Ho avuto il piacere di collaborare con Sara in diversi miei progetti. Ho sempre apprezzato la cura e l’impegno con cui prende in carico i suoi compiti. Tra le sue doti migliori spiccano la puntualità e la disponibilità nel risolvere questioni non prettamente attinenti alla sua area…

    Incredibile mente. Non conosce sosta finchè la problematica non viene risolta. Ha trasformato il mio sito vetrina costruito con un CMS desueto in un Ecommerce Drupal + Ubercart. I prodotti sono stati importati nel nuovo CMS attraverso un import e un crawler interamente scritto a mano.

    Stavo avendo problemi con la Web Agency a cui mi ero affidato. Mi avevano promesso un sistema di booking online completamente personalizzato. Ma non riuscivano a portarlo a termine. Per fortuna, ad un certo punto del progetto, è intervenuta Sara, che lo ha portato a termine.

    Skills in cui sono forte

    PHP7
    Html5
    Sviluppo web
    Google Analytics
    API di qualsiasi tipo
    Google Tag Manager
    jQuery
    Css3
    Trasferimento e acquisto domini
    Wordpress
    Drupal

    Recensioni

    Flavio Corò
    Flavio Corò
    22/09/2023
    Ho avuto il piacere di contattare la Sig.ra Sara tramite suggerimento da parte di un mio cliente per riisolvere una pratica burocratica/lavorativa e devo dire che la VELOCITÀ, PROFESSIONALITÀ, e COMPETENZA fanno parte del Suo bagaglio lavorativo,qualita al giorno d'oggi per niente scontate.Pienamente soddisfatto.
    Sonico Beauty
    Sonico Beauty
    17/01/2023
    Sara ci ha aiutato a risolvere piu' problemi in pochi minuti e con molta professionalità. Massima disponibilità e grande conoscenza nel mondo web. Assolutamente consigliata. Grazie mille
    Studio Legale Avvocato Armando Baffioni Venturi
    Studio Legale Avvocato Armando Baffioni Venturi
    07/11/2022
    Contattata tramite il suo sito web si è rivelata una persona affabile e preparata, pronta nel recepire le mie necessità e nel darmi le indicazioni corrette da seguire. Assolutamente da consigliare anche per assistenze e consulenze da remoto.
    Hermann Gils
    Hermann Gils
    28/10/2022
    Molto esperta, preparata e competente!
    Antonio Cimadomo
    Antonio Cimadomo
    07/08/2022
    Definire La Sig.a Sara Gasparini persona capace, Umile, molto intelligente e disponibile è il minimo che si possa fare. E' stata una grande emozione per me averla 'scovata'. Persone come Sara alzano, e di tanto, il livello sociale/culturale. Ringrazio ancora Sara per esserci.... Antonio p.s. Peccato ci siano solo 5 stelle :-(
    Max R_DJ
    Max R_DJ
    16/06/2021
    Molto professionale e preparata, ha risolto subito un mio problema inerente alle recensioni Google sul mio sito web. Complimenti Sara!
    Fabrizio Aureli
    Fabrizio Aureli
    18/03/2021
    Ottima collaboratrice

    Lasciami una recensione