Menu responsive a parte, avete mai provato a visualizzare un sito web non ottimizzato per cellulari dal vostro smartphone? Sicuramente non deve essere stata un’esperienza di navigazione molto piacevole, dal momento che sarai stato costretto a “scrollare” continuamente a destra e sinistra per visualizzare i contenuti.
Questo fastidioso inconveniente non esisterebbe se il sito in questione fosse stato ottimizzato per la versione mobile. Al giorno d’oggi è infatti possibile ovviare al problema grazie al responsive web design (RWD).
Dopo aver chiarito in breve in cosa consiste l’RWD e a cosa serve, torniamo allo scopo dell’articolo odierno, che spiegherà come realizzare un menu responsive con l’utilizzo dei soli CSS.
Lo scheletro HTML del nostro menu responsive
Iniziamo con lo strutturare il nostro menu, in questo caso una lista che racchiude al suo interno due sotto liste.
<ul id="menu"> <li><a href="http://">Home</a></li> <li><a href="http://">Project</a></li> <li><a href="http://">Service</a> <ul class="hidden"> <li><a href="http://">Service 1</a></li> <li><a href="http://">Service 2</a></li> <li><a href="http://">Service 3</a></li> </ul> </li> <li><a href="http://">Support</a></li> <li><a href="http://">FAQ</a> <ul class="hidden"> <li><a href="http://">Question 1</a></li> <li><a href="http://">Question 2</a></li> <li><a href="http://">Question 3</a></li> <li><a href="http://">Question 4</a></li> <li><a href="http://">Question 5</a></li> </ul> </li> <li><a id="donate" href="http://">Donate</a></li> </ul>
CSS: resettiamo lo stile della lista del menu responsive
Dopo aver creato lo scheletro di base, non resta che iniziare ad utilizzare i CSS.
La prima cosa da fare è il classico reset dello stile della lista. In seguito, disponiamo uno accanto all’altro gli elementi del menu principale per rendere la lista orizzontale.
/* reset stili */ ul { margin: 0; padding: 0; list-style-type: none; } /* lista orizzontale */ #menu li { display: inline-block; position: relative; }
Lo stile del menu primario
Il codice seguente servirà per lo più a dare un’impronta grafica al menu primario, ed è quello da modificare nel caso in cui volessi personalizzare la navbar.
/* menu */ #menu { width: 100%; background-color: black; background: -webkit-linear-gradient(#444, #111); /* safari an chrome*/ background: -moz-linear-gradient(#444, #111); /* firefox*/ background: -o-linear-gradient(#444, #111); /* opera */ background: linear-gradient(#444, #111); border: 1px solid #222; border-radius: 6px; box-shadow: 1px 1px 4px #777; text-align: center; } /* links */ li a { display: block; padding: 12px 20px; width: 60px; color: #999; text-transform: uppercase; font: bold 0.7em Arial, Helvetica; text-decoration: none; text-shadow: 0 1px #000; border-right: 1px solid #222; box-shadow: 1px 0 #444; } /* rimuoviamo il bordo e l'ombreggiatura dall'ultimo link del menu */ #donate { border: none; box-shadow: none; } /* links hover */ a:hover { color: #C8C8C8; }
Lo stile dei menu secondari
Occupiamoci ora dello stile dei menu secondari.
/* sub menu */ #menu li .hidden { display: block; position: absolute; top: 100px; left: 0; background-color: black; opacity: 0; filter:Alpha(opacity=0) /* IE8 and earlier */ visibility: hidden; } /* links sub menu */ #menu li .hidden li a { width: 100px; border-bottom: 1px solid #202020; border-right: none; box-shadow: none; }
L’animazione degli elementi al passaggio del cursore
Infine, creiamo un’animazione per il passaggio del cursore sopra agli elementi del menu.
/* menu hover */ #menu li:hover .hidden { margin-top: -65px; opacity: 1; filter:Alpha(opacity=100); /* IE8 and earlier */ -webkit-transition: all 0.5s ease; /* safari and chrome */ -moz-transition: all 0.5s ease; /* firefox */ -o-transition: all 0.5s ease; /* opera */ transition: all 0.5s ease; visibility: visible; }
Le media queries
La barra di navigazione per la versione desktop è ultimata. A questo punto dobbiamo renderla responsive, iniziando con l’avvalerci delle media queries. Tramite questo codice il nostro menu si adatterà ai dispositivi più piccoli, fino ad una risoluzione con larghezza massima di 768 px.
@media only screen and (max-width: 768px) { #menu { background: none; border: none; border-radius: 0; box-shadow: none; text-align: center; display: none; } /* rendiamo gli elementi dei menu elementi di blocco */ ul li { display: block; } /* impostiamo la larghezza massima per gli elementi dei menu e i links */ ul li, ul li a { padding-right: 0; padding-left: 0; width: 100%; } #menu li .hidden li, #menu li .hidden li a { width: 100%; } /* rendiamo visibili gli elementi del sub menu solo al passaggio del mouse */ #menu li .hidden li { display: none; } #menu li:hover .hidden li { display: block; } /* aumentiamo la grandezza dei links */ li a { font: bold 0.9em Arial, Helvetica; } /* resettiamo la posizione degli elementi del menu */ #menu li { position: static; } /* resettiamo la posizione del sub menu e lo rendiamo visibile */ #menu li .hidden { position: static; filter:Alpha(opacity=100); /* IE8 and earlier */ opacity: 1; visibility: visible; } /* rimuoviamo bordo e ombreggiatura dai links del menu */ #menu li a { border: none; box-shadow: none; } /* nessuna animazione al passaggio del mouse */ #menu li:hover .hidden { margin: 0; } /* rimuoviamo il bordo dai links del sub menu */ #menu li .hidden li a { border: none; } /*diamo un colore di sfondo agli elementi del menu e del sub menu */ #menu li { background-color: black; } #menu li .hidden li { background-color: #003366; } }
Creiamo il pulsante per mostrare e nascondere il menu responsive
Il grosso è fatto. Ciò che resta da fare è aggiungere un pulsante per mostrare e nascondere il menu.
Inseriamo quindi questo codice nel file HTML, immediatamente prima della lista principale.
<label for="showMenu" class="showMenu"> <i class="fa fa-align-justify fa-lg"></i> </label> <input type="checkbox" id="showMenu" role="button">
Il tag <label> servirà a creare un’etichetta per il checkbox, perché una volta che ci cliccheremo sopra con il mouse, essa attiverà il pulsante e potremo mostrare o nascondere il menu. È importante che il valore dell’attributo for sia uguale a quello dell’id del checkbox, in modo tale da collegare i due elementi.
Come avrete notato, ho utilizzato un icon font all’interno di <label>, quindi in questo caso è indispensabile integrare la libreria Font Awesome.
Diamo uno stile all’etichetta del menu responsive
/* diamo uno stile al pulsante del menu e nascondiamolo */ .showMenu { padding: 10px 0; color: white; background: #0066FF; text-align: center; display: none; }
Il checkbox invece andrà nascosto in ogni caso, ed il menu comparirà quando esso verrà selezionato tramite click sull’etichetta.
/* nascondiamo il checkbox */ input[type=checkbox]{ display: none; } /* mostriamo il menu quando il checkbox viene selezionato */ input[type=checkbox]:checked ~ #menu { display: block; }
Non resta che rendere visibile l’etichetta nella versione mobile, quindi inseriamo il codice seguente nelle media queries.
/* mostriamo il pulsante del menu */ .showMenu { display: block; }
Abbiamo terminato il nostro menu responsive, e tutto senza l’utilizzo di JavaScript.
Buonasera a tutti,
Ho provato il menù in css e va molto bene su i più noti browser sia su smartphone che pc e mac. Per caso avete anche il codice css (in un file zip) per riempire una tabella ? devo visualizzare il contenuto di una query da MySQL di altervista.
E la tabella scritta in php e suggerita da alter vista va solo bene per chrome per pc !!!
Grazie in anticipo.
Mi spiace ma non mi intendo di linguaggi di programmazione.
Ciao Scusa io ho provato ma non riesco, ho fatto un bel drang and drop per andare sul sicuro seguendo le regole ma nulla, il menu resta sempre fisso nella barra e non si nasconde nemmeno, come posso risolvere? Grazie
Grazie!!!
Figurati 😉