CSS: realizzare una barra di navigazione responsive dropdown senza jQuery e JavaScript
Per creare una barra di navigazione responsive dropdown con i soli CSS e senza jQuery e JavaScript che potete vedere qui:
Pagina web con barra di navigazione responsive con i soli CSS
Osservando questo esempio nel browser, provate ad alterare la larghezza della finestra, stringendola ed estendendola. Potrete così osservare i cambiamenti della barra di navigazione secondo la dimensione della finestra del browser.
Per creare questa barra di navigazione nella pagina web bisogna scrivere i seguenti codici html.
Codice HTML
<nav>
<!--Creo il pulsante per mostrare e nascondere il menu-->
<!--Label crea un’etichetta per il checkbox, cliccando il quale si attiverà il pulsante per mostrare o nascondere il menu.
Nell'input il valore for deve essere uguale a quello dell’id per collegare i due elementi-->
<label for="showMenu" class="showMenu">☰</label>
<input type="checkbox" id="showMenu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Azienda</a></li>
<li><a href="#">Prodotti <span style="font-size:8px">∇</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>
</nav>
Codice CSS
<style type="text/css">
/* 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 per il 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-right:none}
/* animazione per il 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:black;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}
/* MEDIA QUERIES */
/* rendo il menù responsivo per adattarlo ai dispositivi più piccoli, fino ad una risoluzione massima di 768px */
@media only 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 per gli elementi dei menu e i 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}
}
</style>
Se vogliamo cambiare l'aspetto della nostra barra di navigazione basta cambiare i colori all'interno della sintassi del nostro file CSS, oppure modificare la lunghezza dei pulsanti della barra di navigazione.
