Tutorial Responsive

Come realizzare un Menu Responsive

By Andrea Marchetti
@marchetti_design

Oggi andremo a vedere nel dettaglio come costruire un menu responsive, che si adatta a Smartphone e Tablet, grazie ai CSS3 e un pizzico di javascript. Il menu è una variante della soluzione usata nel precendente articolo come costruire un sito responsive.

Funzionamento

Su schermi normali i link del menu vengono visualizzati orizzontalmente, quando lo schermo ha una larghezza inferiore a 767px il menu viene nascosto e reso visualizzabile tramite un pulsante in alto a destra, richiamando lo stile mobile delle applicazioni di facebook e yoututbe (solo per citarne alcune).

Andiamo a vedere il codice html, menu, logo e pulsante:

<header id="header">

<h1 id="site-title"><a href="#">Responsive Menu</a></h1>

<div class="btn-responsive-menu"></div>

</header>

 <!– #header –></pre>

<div id="mainmenu">

<ul>

	<li><a>Home</a></li>

	<li><a>About</a></li>

	<li><a>Contact</a></li>

</ul>

</div>

<pre> <!– #mainmenu –>

Il CSS:

/*** Menu ***/

#mainmenu ul 		{margin: 0px 0 0px 0px;float:left;width:100%; list-style: none;}

#mainmenu ul li 	{float: left;margin: 0 0px 0 0;position: relative;}

#mainmenu a 		{color: #fff; display: block;font: 14px;padding: 14px 20px;font-family: oswald; text-transform:uppercase;}

#mainmenu a:hover {background:#666;}

	/* Button Responsive Menu*/

	.btn-responsive-menu{display: none;float: right;padding:5px;cursor:pointer;margin:  0px 20px 0 0;color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background:#333;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}

	.icon-bar 			{display: block;width: 18px;height: 2px;margin:5px;background-color: #f5f5f5;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}

	.show{display:block!important}

Da notare che il pulsante .btn-responsive-menu allo stato di default è nascosto tramite il codice display:block.

Ora tramite la media query @media (max-width: 767px) { … } andiamo a nascondere il menu e mostrare il pulsante quando il dispositivo ha una larghezza di un iPad on un iPhone.

@media (max-width: 767px) {

	/* Header */

	#site-title a {font-size:25px;margin-left:10px;}

	#mainmenu			{display:none;}

	#mainmenu ul li 	{float: none;}
	.btn-responsive-menu{display:block;}
}

Con la propietà #mainmenu ul li {float: none;} andiamo a “linearizzare” i link, impilandoli verticalmente e fancedoli occupare ognuno l’intera grandezza dello schermo. Questa struttura ottimizza il menu per l’uso mobile con link più grandi e facilmente cliccabili. C’è da ricordare che non abbiamo un mouse per cliccare ma utlizziamo le dita.

Per far si che quando si clicca il pulsante .btn-responsive-menu venga visualizzato il div #mainmenu utlizziamo il metodo toggleClass() di jQuery. Questo aggiunge e toglia la classe .show con display:block al contenitore, visualizzando e nascondendo il menu.

$(".btn-responsive-menu").click(function() {

	$("#mainmenu").toggleClass("show");

});

Per “triggerare” il menu viene utilizzato jQuery ma la visualizzazione avviene tramite i CSS (la classe .show con display:block visualizza il menu). Javascript si usa solo per “triggerare”, questo perchè su mobile le animazioni jQuery come slideDown() danno problemi.

Cosi abbiamo una struttura che si ottimizza per il mobile, nascondendo e visualizzando il menu con un pulsante, aumentando l’area dei link.

Stay tuned!

Responsive

Potrebbero interessarti:

Slider Responsive Full Screen con testi animati utilizzando Flex Slider

Come costruire un Sito Web Responsive

Creare un Parallax Design accattivante e Responsive con Bootstrap

Realizzare un Layout a griglia Responsive con Isotope