Creare un menù su 2 livelli con il CSS per la sidebar o per il sito

Come creare un menù su due livelli con il solo CSS per installarlo in una sidebar di Blogger o di Wordpress

In genere i menù vengono posizionati al top del layout del blog per permettere ai lettori di navigare tra i contenuti offerti. Gli utenti di Blogger hanno a diposizione anche il menù nativo delle Pagine Statiche che è una ottima soluzione, però su un solo livello.

Non è difficile creare un menù su più livelli con il solo CSS, senza usare il javascript per non appesantire troppo la pagina. In questo sito ho presentato diversi menù su più livelli per la versione desktop, per la versione mobile e del tipo Responsive che vanno bene per entrambe le versioni.

Ci può però essere l'esigenza di avere un secondo menù da inserire per esempio in una sidebar, quindi visibile solo nella versione desktop, per permettere ai navigatori di selezionare dei contenuti di un particolare argomento. In questo post mostrerò appunto un menù che possa essere inserito in un un widget di una sidebar, o anche del footer, nei blog di Blogger e pure di Wordpress perché non viene usato il javascript ma solo il CSS.

La struttura del menù è molto flessibile, e il codice può essere facilmente adattato per essere usato anche come menù principale del sito aggiungendo tutte le voci che riteniamo opportune. All'inizio vedremo come procedere per installare il menù in una sidebar. Avrà un aspetto come quello mostrato nella GIF qui sotto realizzata con un codice di menù con quattro voci principali, di cui in tre sono state inserite anche tre elementi secondari

In Blogger si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript e il codice si incolla su Sezioni del sito, digitando opzionalmente anche un titolo. Su Wordpress si va invece su Aspetto -> Widget -> Testo e vi si incolla lo stesso codice che utilizza i CSS3 supportati da tutti i browser. Il codice è il seguente:

<style>
#menucss {height:180px;}
#menucss a {
   text-decoration: none;
}
#mnucss nav {
     font-family: monospace;
}
#menucss ul {
   background: darkorange;
     list-style: none;
     margin: 0;
     padding-left: 0;
}
#menucss li {
     color: #fff;
   background: darkorange;
     display: block;
     float: left;
     padding: 1rem;
     position: relative;
     text-decoration: none;
   transition-duration: 0.5s;
    z-index:99999;
} 
#menucss li a {
   color: #fff;
}
#menucss li:hover {
     background: red;
     cursor: pointer;
}
#menucss ul li ul {
     background: orange;
     visibility: hidden;
   opacity: 0;
   min-width: 5rem;
     position: absolute;
   transition: all 0.5s ease;
   margin-top: 1rem;
     left: 0;
}
#menucss ul li:hover > ul, ul li:focus-within > ul,
ul li ul:hover {
    visibility: visible;
    opacity: 1;
}
#menucss ul li ul li {
     clear: both;
   width: 100%;
}
</style>
<div id="menucss">
<nav role="navigation">
   <ul>
     <li><a href="#">One</a>
<ul class="dropdown">
         <li><a href="#">Sub1-1</a></li>
         <li><a href="#">Sub1-2</a>
</li>
         <li><a href="#">Sub1-3</a></li>
       </ul>
</li>
     <li><a href="#">Two</a>
       <ul class="dropdown">
         <li><a href="#">Sub2-1</a></li>
         <li><a href="#">Sub2-2</a>
</li>
         <li><a href="#">Sub2-3</a></li>
       </ul>
     </li>
     <li><a href="#">Three</a>
<ul class="dropdown">
         <li><a href="#">Sub3-1</a></li>
         <li><a href="#">Sub3-2</a>
</li>
<li><a href="#">Sub3-3</a>
</li>
</ul>
</li>
  <li><a href="#">Four</a></li>
   </ul>
</nav>
</div>

Si salva e si posiziona l'elemento con il drag&drop del mouse. Possono essere personalizzati i codici dei colori; sono proposti i due colori orange e darkorange con il loro nome inglese. Si può personalizzare anche la famiglia di font (monospace). Il valore height:180px; è l'altezza del widget e può essere scelto in funzione del numero delle voci secondarie inserite. Il menù comunque andrà a coprire l'elemento sottostante, nel caso in cui l'altezza non fosse sufficiente. Questo perché è stata inserita una riga con riga z-index.

La particolarità di questo menù è quella che ciascun elemento avrà una larghezza in funzione del numero di caratteri della voce corrispondente. Se per esempio al posto di Two con 3 caratteri mettete una voce di 6 caratteri, l'elemento aumenterà di larghezza. La struttura del menù è definita dall'HTML alla fine del codice.

La prima operazione è quella di creare le voci principali del menù in questo modo

<div id="menucss">
<nav role="navigation">
   <ul>
     <li><a href="#">One</a></li>
     <li><a href="#">Two</a> </li>
     <li><a href="#">Three</a></li>
     <li><a href="#">Four</a></li>
   </ul>
</nav>
</div>

Successivamente, per inserire i sottomenù, per esempio nell'elemento Two si incolla questo codice

<ul class="dropdown">
         <li><a href="#">Sub2-1</a></li>
         <li><a href="#">Sub2-2</a></li>
         <li><a href="#">Sub2-3</a></li>
       </ul>

tra i tag </a> e </li> che sono alla fine di quell'elemento. Si procede in questo modo per tutte le voci del menù in cui intendiamo inserire dei sottoelementi. Ovviamente i tre sottoelementi possono diventare due, quattro o anche di più mantenendo però la stessa sintassi.

COME INSERIRE QUESTO MENÙ NEL TEMA

Per mostrare questo menù nella parte alta del layout di Blogger si salva preventivamente il Modello per un eventuale ripristino. Si va su Tema -> Modifica HTML. Si cerca la riga <header> se si vuole inserire il menù prima della Intestazione del blog. Il codice precedente deve quindi essere incollato subito sopra a tale riga.

Conviene eliminare la prima riga #menucss {height:180px;} o eventualmente personalizzare l'altezza. Per aggiungere il menù sotto l'intestazione, si cerca la riga </header> e il codice si incolla subito sotto. Questo menù è comunque più adatto ad essere un menù aggiuntivo da inserire in una sidebar. Concludo ricordando che la transizione al passaggio del cursore è stata impostata sul mezzo secondo e che si può personalizzare l'opacità degli elementi del menù.