Seguimi sui social
Profilo LinkedIn Profilo Facebook Profilo Twitter Profilo Google+
Home > Archivio > Menù responsivo in HTML e CSS

Menù responsivo in HTML e CSS

Leggero, con sotto voci (dropdown), creato con HTML e CSS, senza jQuery e JavaScript

Autore: Andrea Pacchiarotti
Website: www.andreapacchiarotti.it
Ultimo aggiornamento: 30 Aprile 2017
Categoria: Siti web Menù responsivo

Menù responsivo

In un sito web responsivo un ruolo fondamentale è svolto dal menù di navigazione, le cui voci possono essere posizionate nell’header con un allineamento a sinistra, al centro o a destra, secondo il proprio gusto.
Ma cosa significa responsivo? Visualizzare su uno smartphone un sito che non possiede tale caratteristica vi avrà certamente lasciato una sensazione spiacevole dato che sarete stati forzati a scrollare lateralmente per visualizzare i contenuti.
È possibile ovviare a quest’inconveniente con il responsive web design (RWD), una tecnica che permette di costruire siti web il cui layout si adatta ai devices usati per visualizzarli (personal computer, tablets, smartphones che posseggono risoluzioni diverse tra loro).
Vediamo allora i passaggi necessari allo scopo di offrire all’utenza un’ottima usabilità realizzando con le media queries un menù di navigazione che si adatta alle risoluzioni dello schermo e che, in quelle più piccole, si trasforma in un menù apribile attraverso un trigramma.
Le media query, modificando opportunamente le regole CSS impostate di default, permettono di creare stili che si adattano alle caratteristiche dei device che visitano un sito.
Anche se esistono diversi modi per creare un menù responsivo, la caratteristica principale della soluzione qui proposta è la totale mancanza di jQuery ed in generale l’assenza di qualsiasi codice J-based tipo JavaScript, ciò permette una notevole velocità di caricamento del menù (tutta la pagina, CSS compreso, pesa solo 2,25 KB e consta di 50 righe) e quindi l’adempimento di uno dei principali punti SEO.


In questo esempio partendo da un menù con voci centrate, tra cui una (Prodotti) con sotto voci (il cosiddetto dropdown menu),
Menù desktop chiuso
Menù desktop chiuso

si passa ad un layout che fa scomparire le voci quando si arriva ad una risoluzione inferiore a 768px mostrando solo un trigramma al clic del quale esse saranno mostrate con un allineamento verticale.

Menù responsivo

Con il fine di rendere ancor più veloce il caricamento ho evitato di utilizzare le icon font (che mostrano icone anziché caratteri tipografici) per la freccia necessaria al dropdown della voce Prodotti, questo allo scopo di non essere costretto ad integrare una risorsa esterna, cioè la libreria Font Awesome, un kit gratuito con centinaia di icone.
Entriamo ora nel vivo ricordando che al termine della lettura sarà possibile vedere la demo e scaricare l’esempio commentato.

Creo in HTML il pulsante che mostra e nasconde il menu

Tramite il tag label creo un’etichetta per la checkbox, cliccando la quale si attiverà il pulsante che mostra o nasconde il menu.
Nell'input il valore for deve essere uguale a quello dell’id per collegare i due elementi.
Utilizzo l’entità ☰ per ottenere il trigramma.
<label for="showMenu" class="showMenu">&#9776;</label>
<input type="checkbox" id="showMenu" role="button">


Struttura HTML del menu con le sotto voci

L’entità &#9947; mostra la freccia verso il basso della voce Prodotti

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Azienda</a></li>
  <li><a href="#">Prodotti<span style="font-size:8px">&#9947;</span></a>
    <ul class="hidden">
      <li style="border-bottom:1px solid #CCC"><a href="#">Prodotto 1</a></li>
      <li><a href="#">Prodotto 2</a></li>
    </ul>
  </li>
  <li><a href="#">Servizi</a></li>
  <li><a href="#">Password</a></li>
  <li><a href="#">Contatti</a></li>
  <li><a href="#" style="border-right:0">Mappa</a></li>
</ul>



CSS caricato alle risoluzioni superiori a 768px

/* Regole di reset */
ul{margin: 0;padding:0;list-style-type:none}

/*MENU PRINCIPALE*/
/* Lista in orizzontale. inline-block è come inline, ma può avere altezza e larghezza; relative occorre al sottomenu */
#menu li{display:inline-block;position:relative}

/* Menu. Cambiando center l'oriento a destra o sinistra */
#menu{width:100%;background-color:darkblue;border-radius:6px;
text-align:center}


/* Link menu. Cambiando 80px posso scrivere voci più lunghe */
li a{display:block;padding:12px 20px;width:80px;color:#fff; font:bold 12px Arial;
text-decoration:none;border-right:1px solid #ccc}


/* Link menu hover */
a:hover{color:#C8C8C8}

/* SOTTOMENU PRINCIPALE*/
#menu li .hidden{display:block; position:absolute;top:100px; left:0;
background-color:darkblue;visibility:hidden;margin-left:-5px;border-right:none}


/* Link sottomenu */
#menu li .hidden li a{width:80px;border-bottom:1px solid #ccc}

/* Animazione al passaggio sopra agli elementi del menu */
#menu li:hover .hidden{margin-top:-65px;visibility:visible}

/* TRIGRAMMA */
/* Stile e invisibilità */
.showMenu{ width:40px;border:1px solid black;margin:auto;
color:#000;text-align:center;font-size:30px;
margin-bottom:10px;display:none}


/* Invisibilità checkbox. Il checkbox va nascosto in ogni caso ed il menu comparirà quando esso verrà selezionato tramite click sull’etichetta */
input[type=checkbox]{display:none}

/* La tilde alt126 permette di selezionare tutti gli elementi B presenti in A;
qui sta a significare che dà visibilità al menu quando il checkbox viene selezionato. */
input[type=checkbox]:checked ~ #menu{display:block}
Il menù di navigazione per la versione desktop senza jQuery e JavaScript è ultimata.
Attraverso le media queries lo rendo responsivo in modo da adattarlo ai dispositivi più piccoli.


CSS caricato alle risoluzioni inferiori a 768px

/* MEDIA QUERIES */
/* Rendo il menù responsivo in modo adattarlo ai dispositivi più piccoli */
@media screen and (max-width: 768px) {

#menu{border-radius:0;text-align:center;display:none}


/* Rendo gli elementi dei menu elementi di blocco */
ul li{display:block}

/* Imposto la larghezza massima di menu e links */
#menu li .hidden li,#menu li .hidden li a, ul li,ul li a{padding-right:0;
padding-left:0;width:100%;border-right:none}


/* Mostro il sottomenu solo al passaggio del mouse */
#menu li .hidden li{display:none}
#menu li:hover .hidden li{display:block}


/* Resetto la posizione degli elementi del menu. static valore di default. Gli elementi sono mostrati in ordine, come appaiono nel flusso del documento */
#menu li{position:static}

/* Resetto la posizione del sottomenu e lo mostro */
#menu li .hidden{position: static;visibility:visible}

/* Nessuna animazione al passaggio del mouse */
#menu li:hover .hidden{margin:0}

/* Colore di sfondo agli elementi del menu e del sottomenu */
#menu li{background-color:#3E3E3E}
#menu li .hidden li{background-color:darkblue}


/* Mostro il pulsante del menu nella versione mobile*/
.showMenu{display:block}
}


Guarda la DEMO o SCARICA l’esempio.

Potrebbe interessarti anche l'articolo su come creare un sito web professionale

Scarica questo articolo in PDF.

Se Menù responsivo con HTML e CSS è stato utile, seguimi sui Social networks cliccando i pulsanti in alto a destra di questa pagina.

Per restare aggiornato sulla pubblicazione di nuovi articoli su Microsoft Office, Adobe e web in generale iscriviti gratuitamente alla newsletter

Se invece vuoi condividere questo articolo nella tua Rete sociale, puoi utilizzare i bottoni qui sotto:


Lascia un commento