Barra di navigazione responsive con i soli CSS
Codice HTML
<div> <label for="showMenu" class="showMenu"> <i class="fa fa-align-justify fa-lg"></i> MenĂ¹ </label> <input type="checkbox" id="showMenu" role="button"> <ul id="menu"> <li><a href="http://">Home</a></li> <li><a href="http://">LyX</a></li> <li><a href="http://">Tutorial</a> <ul class="hidden"> <li><a href="http://">Tutorial 1</a></li> <li><a href="http://">Tutorial 2</a></li> <li><a href="http://">Tutorial 3</a></li> </ul> </li> <li><a href="http://">Guide LyX</a></li> <li><a href="http://">Modelli</a> <ul class="hidden"> <li><a href="http://">Modello 1</a></li> <li><a href="http://">Modello 2</a></li> <li><a href="http://">Modello 3</a></li> <li><a href="http://">Modello 4</a></li> <li><a href="http://">Modello 5</a></li> </ul> </li> <li><a id="donate" href="http://">Contatti</a></li> </ul> </div>
Codice CSS
<style type="text/css">/* reset stili */
ul { margin: 0; padding: 0; list-style-type: none; }
/* lista orizzontale */
#menu li { display: inline-block; position: relative; }
/* menu */
#menu { width: 100%; background-color: black; background: -moz-linear-gradient(#444, #111); /* firefox*/ 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: 150px; 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; } /* sub menu */
#menu li .hidden { display: block; position: absolute; top: 100px; left: 0; background-color: black; opacity: 0; visibility: hidden; z-index: 1000; }
/* links sub menu */
#menu li .hidden li a { width: 100px; border-bottom: 1px solid #202020; border-right: none; box-shadow: none; } /* menu hover */
#menu li:hover .hidden { margin-top: -65px; opacity: 1; -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; } @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; 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; }
}
/* diamo uno stile al pulsante del menu e nascondiamolo */
.showMenu { padding: 10px 0; color: white; background: #0066FF; text-align: center; display: none; } /* nascondiamo il checkbox */
input[type=checkbox]{ display: none; }
/* mostriamo il menu quando il checkbox viene selezionato */
input[type=checkbox]:checked ~ #menu { display: block; } /* mostriamo il pulsante del menu */
.showMenu { display: block; }
</style>