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: 07 Gennaio 2023
Categoria: Web Marketing Costruzione siti web Menù responsivo

Il responsive web design (RWD) permette di progettare siti web capaci di adeguarsi graficamente ai devices usati per visualizzarli (ad esempio PC, tablet, smartphone), facendo in modo che i contenuti si adattino alle diverse risoluzioni e offrendo una piacevole esperienza utente (UX). In questa ottica non può certamente mancare un responsive menu.
Un menu responsivo è un tipo di menu per siti web che si adatta al layout dello schermo dell'utente, indipendentemente dalla sua dimensione o dal dispositivo utilizzato per visualizzare il sito. Un menu responsivo può essere progettato in modo da essere visibile solo sui dispositivi di piccole dimensioni, ad esempio sugli smartphone, oppure può essere sempre visibile, ma modificare la sua disposizione e il suo aspetto in base alla dimensione dello schermo. I menu responsivi sono importanti perché con l'aumento dell'utilizzo di dispositivi di piccole dimensioni per navigare in internet, i siti web che non sono ottimizzati per questi dispositivi risultano difficili da usare e peggiorano l'esperienza utente. Un menu responsivo può aiutare a risolvere questi problemi, rendendo il sito più facile da navigare e più attraente per per i potenziali clienti.
Il momento è giunto: leggiamo Menu responsivo in HTML e CSS senza JavaScript e jQuery. Ovviamente i colori sono modificabili secondo le proprie esigenze.

Sommario menu responsivo

• Responsive menu in HTML e CSS
• Responsive menu in HTML, CSS e jQuery
  

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 o un tablet 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, una tecnica che, come avete letto all'inizio, permette di costruire siti web il cui layout si adatta ai devices usati per visualizzarli (personal computer, tablet, smartphone, ecc. 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 menu di navigazione che si adatta alle risoluzioni dello schermo e che, in quelle più piccole, si trasforma in un menu apribile attraverso un trigramma (leggi anche le tecniche di Usabilità e accessibilità dei siti web).
Le media query, modificando opportunamente le regole CSS impostate di default, permettono di creare stili che si adattano alle caratteristiche dei devices che visitano un sito.
Il menu facilita la navigazione degli utenti del sito e può indurli a trascorrere più o meno tempo al suo interno. Un errore comune è creare menu troppo articolati; avere un menu intelligente, facile da usare e che lasci chiaramente capire a quale pagina dà accesso, è invece un must per ogni sito. Per gli e-Commerce, che normalmente presentano tanti prodotti e categorie, è invece preferibile utilizzare il cosiddetto mega menu, che riesce a organizza le voci in sezioni ben distinte.
Anche se esistono diversi modi per creare un menu responsivo, la caratteristica principale della soluzione qui proposta è la totale mancanza di jQuery e 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. Ovviamente l'aspetto estetico, colori, tipo e grandezza del font, potete modificarlo in modo estremamente semplice e adattarlo alle vostre esigenze.


In questo esempio partendo da un menu con voci centrate, tra cui una (Prodotti) con sotto voci, il cosiddetto dropdown menu (forse può essere d'aiuto l'articolo che parla dei tag HTML5)

Menù desktop chiuso

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

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 a integrare una risorsa esterna, cioè la libreria Font Awesome o Bootstrap Glyphicons, kit gratuiti 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à ☰ o ∇ 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

<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

CSS caricato alle risoluzioni inferiori a 768px

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 (ma ottenendo un peso del file e un caricamento più lento) un menu responsivo. Vediamo un semplice esempio.

HTML

CSS

jQuery

SCARICA l’esempio.

Potrebbe interessarti anche l'articolo su come creare un sito web professionale, ma mi auguro che Menu responsivo in HTML e CSS senza JavaScript e jQuery abbia soddisfatto le tue aspettative.