Menù responsivo in #HTML e #CSS

Menu responsive con sotto voci (dropdown), in HTML e CSS, senza jQuery e JavaScript

Autore: Andrea Pacchiarotti
Ultimo aggiornamento: Gennaio 2019
Categoria: Siti web, menù responsivo

Menù responsivo - Responsive menu
Menu responsivo in #HTML e #CSS

Sommario menu responsivo

Responsive menu in HTML e CSS

In un sito web responsivo un ruolo fondamentale è svolto dal menù di navigazione, in tal caso un responsive menu, 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, tablet, smartphone 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 responsive menu (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à &nabla; 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">&nabla;</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 un insieme A;
qui sta a significare che mostra il menu quando la checkbox viene selezionata. */
input[type=checkbox]:checked ~ #menu{display:block}

Il menù di navigazione per la versione desktop senza jQuery e JavaScript è ultimata.
Ora lo adatto ai dispositivi più piccoli attraverso le media queries

CSS caricato alle risoluzioni inferiori a 768px

@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 è il 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}
}


SCARICA l’esempio.

Responsive menu in HTML, CSS, jQuery

Se invece non si vuole investire del tempo nella creazione e personalizzazione del file CSS, si può sfruttare la libreria jQuery per costruire molto velocemente un menù responsivo. Vediamo un semplice esempio.

HTML

<div id="wrapper">
<header id="header">
<h1 id="title"><a href="#">&nbsp;Menu</a></h1>
<div class="btn">&#9776;</div>
</header>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Prodotti</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
<h2>Menu Responsivo</h2>
<p>Hamburger a 768px</p>
</div>


CSS

a{text-decoration:none}
#wrapper {width:100%;margin:auto;background:#fff}
#header {width:100%;float:left;background:darkblue}
#menu {width:100%;float:left;background:#ccc;margin-bottom:20px}
#menu ul {float:left;width:100%;list-style-type:none}
#menu ul li {float:left;padding-left:20px}
#menu a {color:#fff;display:block;font:14px}
#menu a:hover {background:#666}
#title a {font-size:30px;float:left;color:#fff}

/* Button nascosto in apertura con display:none*/
.btn{display:none;float:right;margin-right:10px;color:#fff}
.show{display:block!important}
@media (max-width:767px) {
#wrapper {width:94%;margin:auto}
#header {width:94%}
#menu {width:94%;float:left;display:none}
#menu ul li {float:none;padding-left:0}
.btn{display:block}

jQuery

<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function() {
$("#menu").toggleClass("show");
});
});
</script>

SCARICA l’esempio.

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


Se vuoi approfondire alcuni dei temi trattati, visita la pagina con le mie pubblicazioni cartacee e online.

Se vuoi contattarmi chiamami al 347.2291870, scrivimi su pacchiarotti@gmail.com o su WhatsApp oppure compila il form sottostante

Segui l'hashtag #AndreaPacchiarotti

Consento il trattamento dei dati personali. GDPR 2016/679 - Privacy policy