Realizare meniu de navigare responsive - VIDEO

In acest tutorial vom vedea cum sa configuram de la zero, in foarte putine randuri de markup, un meniu de navigare ce se adapteaza la orice rezolutie a ecranului.

DEMO MENIU DE NAVIGARE RESPONSIVE
DESCARCA DEMO MENIU DE NAVIGARE RESPONSIVE

Codul HTML

Markup-ul este foarte simplu. Aici am inserat un simplu tag “nav” care contine o lista pentru optiunile meniului. Acesta este tot codul HTML de care avem nevoie pentru a realiza meniul inserand deci un tag care contine lista cu toate optiunile meniului. Ceea ce observam este ca inainte de lista am inserat textul MENU, care este acela pe care il vedem in vizualizarea sub 500 px de rezolutie. Acest text l-am setat in forma de link si i-am dat id-ul de menu.

<nav>
<a herf="#" id="menu">MENU</a>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Discounts</a></li>
<li><a href="">News</a></li>
<li><a href="">Contacts</a></li> 
</ul> 
</nav>

Pentru CSS

Aici avem doua serii de reguli, primele sunt cele generale pe care le vedem in vizualizarea normala, iar dedesubt avem regulile CSS care se refera la vizualizarea pentru dispozitivele cu o rezolutie mai mica de 500 px.

In regulile principale mai intai vom seta regula pentru body, deci pentru pagina generala avem o culoare de fundal setata pe gri inchis si marginea setata pe 0.

Regula pentru id-ul menu se refera la textul Menu pe care il vedem in vizualizarea la sub 500 de px de rezolutie. Deci la rezolutie mai mare de 500 de pixeli acest text dispare lasand loc meniului intreg. Deaceea pentru id-ul menu avem regula display setata pe non, pentru ca acest text nu trebuie sa fie vizibil.

Mai jos avem regulile uzuale pentru o corecta punere in pagina a listei meniului, setand culoarea de fundal, font-ul, culoarea font-ului samd, padding-ul, marginea samd.

CSS Media Queries

Cea mai importanta parte a functionarii meniului responsive sunt regulile css media queries, deci in acest caz am configurat regulile css alternative pentru rezolutiile mai mici de 500 de px. In primul rand avem textul „menu” vizibil numai in cazul rezolutiilor mici unde avem setata proprietatea display pe block, iar pentru rezolutiile mai mari de 500 px proprietatea display ne amintim ca este setata pe none deoarece textul nu este vizibil.

Initial la rezolutiile mai mici de 500 px lista nu este vizibila deci am setat pentru tag-ul “ul” proprietatea display setata pe “none”.

Apoi avem aceste doua clase .showNav (care face ca lista sa fie vizibila) si .hideNav (care o ascunde), aceste doua clase sunt importante pentru functionarea codului javascript pe care in vom analiza imediat si care controleaza animatia de deschidere si inchidere a meniului.

body {margin: 0; padding: 0; background-color: #333;}
#menu {display:none;}
nav {display: block;}
nav ul {display: block; overflow: auto;}
nav ul li {display: inline; list-style: none;}
nav ul li a {font-family: helvetica, sans-serif; float: left; display: block;
text-decoration: none; color: #FFF; background-color: #39F;
padding-top: 10px; padding-right: 30px; padding-bottom: 10px; padding-left: 30px; margin: 5px;}

@media only screen and (max-width:500px){
#menu {width: 100%; display:block; height: 30px; color: white; text-align: center;
background-color: #39F; padding-top: 10px; margin-bottom: 5px;}
#menu:hover {cursor:pointer;}
nav ul {display:none;}
nav ul li {display: block;}
nav ul li a {float: none;}
.showNav {display:block;}
.hideNav {display:none;}
}

Codul Javascript

Partea de JavaScript este si ea foarte simpla iar in aceste randuri avem toate functiile de care avem nevoie.
Mai intai trebuie sa inseram in partea de head a paginii nostre link-ul la framework-ul general javascript.

Functia pe care am utilizat-o pentru animatia dechiderii si inchiderii meni-ului este slide Toogle. Ceea ce spunem in aceste randuri este:

in momentul in care se face click pe elementul cu id-ul Menu, adica pe textul „menu”, se va aplica asupra elemenutului nav ul functia slide toogle. Viteza de animatie a functiei slidetoogle este setata pe „slow” dar o putem schimba pe fast sau o putem personaliza.

Ultimele 3 randuri de cod se refera la cele doua clase pe care le-am vazut mai devreme care controleaza vizibilitatea meni-ului de navigare.

$('#menu').click(function(){
$('nav ul').slideToggle('slow', function(){
$(this).css('display') == 'none' ?
$(this).removeClass('showNav').addClass('hideNav').removeAttr('style') :
$(this).removeClass('hideNav').addClass('showNav').removeAttr('style');
});
})

DESCARCA MENIUL DE NAVIGARE.