Pubblicato il 02/05/18 - aggiornato il  | 8 commenti :

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

menù-sidebar






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ù.


8 commenti :

  1. Ernesto se volessi, ad esempio, metterlo sotto l'header, ma renderlo fisso in alto scrollando l'home page come potrei fare? Grazie.

    RispondiElimina
    Risposte
    1. Scusa, avevo lasciato questo commento senza risposta.
      Si può rendere flottante qualsiasi menù. Ecco il tutorial
      https://www.ideepercomputeredinternet.com/2014/05/floating-blogger-pages-menu.html
      In questo caso l'ID è #menucss lo devi quindi sostituire nel codice all'ID del menù delle pagine statiche #PageList1. Ti può essere utile anche questo tutorial
      https://www.ideepercomputeredinternet.com/2017/01/make-blogger-floating-menu.html
      Questo per esempio
      https://www.ideepercomputeredinternet.com/2017/01/blogger-menu-responsive-floating.html
      è Responsive e fluttuante
      @#
      Ci sono però menù più efficienti già flottanti come questo

      Elimina
  2. Grazie per questo articolo. La tua spiegazione è chiarissima e molto semplice da utilizzare anche per me che di codici ne so poco e niente.

    RispondiElimina
  3. Spiegazione molto chiara che per un neofita come me è una manna dal cielo.
    Ti chiedo se questo menu può essere trsformato in responsive inserendo un qualche codice.
    Grazie

    RispondiElimina
    Risposte
    1. È già Responsive perché per il valore della larghezza c'è una percentuale
      width: 100%;
      e non un valore numerico quindi prenderà automaticamente il 100% della larghezza del layout qualunque esso sia
      @#

      Elimina
    2. Il fatto è che da pc è perfetto mentre da smartfhone le icone si sovrappongono quasi. Come potrei risolvere?
      Grazie

      Elimina
    3. Prova quest'altre opzioni
      https://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      https://www.ideepercomputeredinternet.com/2018/04/menu-responsive-blogger.html
      https://www.ideepercomputeredinternet.com/2017/03/blogger-mobile-multilevel-menu.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy