Creează un meniu responsive în CSS

Ce este responsive web design?

Responsive Web Design este o abordare in care design-ul si dezvoltarea raspund la comportamentul utilizatorului si mediul de lucru al acestuia. Concret, când vorbim de Responsive Web Design, ne gândim la design-uri ce diferă în funcție de dispozitiv, mărimea ecranului și orientare.

Folosind un mix de șabloane, grile flexibile, imagini și o utilizare insteață a media query-urilor din CSS, putem schimba aspectul general al unei aplicații. Atunci când utilizatorul trece de pe laptop pe tabletă sau pe telefon, aplicația ar trebui să se adapteze în mod automat la noua rezoluție, la noile dimensiuni ale imaginilor și la posibilitățile de scripting (de exemplu, când utilizatorul trece de pe desktop pe mobil, cel din urmă oferă noi tipuri de evenimente – touch, swipe etc.).

Ethan Marcotte a scris un articol foarte interesant despre Responsive Web Design, prin 2010, care surprinde de fapt cum a luat naștere toată această idee. Acolo el vorbește de design arhitectural responsive, unde o cameră sau spațiu se ajustează automat în funcție de numărul sau fluxul de oameni.

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them.

Ethan Marcotte

Demo navigație responsive

Înainte de tutorialul propriu-zis, mai jos este un demo la ce puteți obține, dacă urmăriți toți pașii. Pentru a vedea mai bine componenta de responsive web design, redimensionați pagina (dacă sunteți pe desktop) până când ajungeți la dimensiuni specifice dispozitivelor mobile. O să vedeți cum meniul se schimbă într-un dropdown.

Codul HTML pentru nav

Pornim de la o listă neordonată la care îi adăugăm stiluri. Această tehnică își arată adevăratul potențial atunci când meniul este compus din mai multe elemente care, la o rezoluție mică, ar arăta foarte dezordonat. Astfel, toate acele elemente se condensează într-un singur buton dropdown.

Mai jos e codul HTML necesar meniului.Tagul nav are rolul unui wrapper și va fi elementul față de care toate elementele copil se vor raporta – din acest motiv va avea position:relative. Clasa current indică linkul din meniu care va rămâne vizibil.

<nav class="nav">
<span class="hamburger">≡</span>
<ul>
 	<li class="current"><a href="#">Portfoliu</a></li>
 	<li><a href="#">Ilustratii</a></li>
 	<li><a href="#">Web Design</a></li>
 	<li><a href="#">Programare</a></li>
 	<li><a href="#">Grafica</a></li>
</ul>
</nav>

CSS-ul

CSS-ul pentru meniu (la rezoluții de peste 600 de px) este mai jos. Folosesc display:inline-block în loc de float:left pentru elementul <li>.Acest lucru ne permite să aliniăm la stânga, dreapta sau pe centru meniul, specificând text-align <ul>-ului.

.nav {
    position: relative;
    margin: 20px 0;
}

.nav .hamburger {
    display: none;
    position: absolute;
    right: 0;
    padding: 0px 10px;
    font-size: 24px;
}

.nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav li {
    display: inline-block;
    margin-right: 5px;
    padding: 0;
}

.nav a {
    border-radius: 2px;
    color: #999;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
}

.nav a:hover { 
    background: #ececec;
    color: #000; 
}

.nav .current a {
    background: #999;
    color: #fff;
}

/* nav centrat */
.nav.center ul {
    text-align: center;
}

Alinierea la stânga sau la dreapta

Precum am menționat mai sus, poți schimba poziția butoanelor folosind proprietatea text-align.

/* nav la dreapta */
.nav.right ul {
    text-align: right;
}

/* nav centrat */
.nav.center ul {
    text-align: center;
}

Suport Internet Explorer

📓 Această secțiune este ieșită din uz – aproape nimeni nu mai folosește aceste browsere.

Tag-ul din HTML5, <nav>, și media-queries nu sunt suportate de Internet Explorer 8 și versiunile anterioare.Pentru asta trebuie să incluzi css3-mediaqueries.js(sau respond.js) și html5shim.js, ca soluții de rezervă.

<!-- [if lt IE 9]>
<script src="//css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Responsive

Acum vine partea interesantă – să facem meniul responsive utilizând media-query.Media query e o proprietate mai veche, dar care a luat avânt cu CSS3; ea în esență verifică rezoluția device-ului de pe care se vizualizează site-ul.

Vom folosi ca punct de trecere, între desktop și orice alt device cu o rezoluție mai mică, valoarea de 600 de px.Setez elementul nav cu poziție relativă pentru a putea seta elementul ul cu poziție absolută.Ascund toate elementele <li> specificând display:none, dar păstrez elementul li .current unde setez display:block(asta va produce dropdown-ul).Am adăugat o pictogramă elementului .current pentru a indica că el este elementul activ.

@media screen and (max-width:600px) {
    .nav {
        position: relative;
        min-height: 40px;
    }

    .nav .hamburger {
        display: visible;
    }

    .nav ul {
        background: #fff;
        border: solid 1px #aaa;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        width: 180px;
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
    }

    .nav li {
        display: none; /* ascunde elementele */
        margin: 0;
    }

    .nav .current {
        display: block; /* arata doar itemul <ul><li>.current */
    }

    .nav a {
        display: block;
        padding: 5px 5px 5px 32px;
        text-align: left;
    }

    .nav .current a {
        background: none;
        color: #666;
    }

    /* stilurile pentru hover */
    .nav ul:hover {
        background-image: none;
    }

    .nav ul:hover li {
        display: block;
        margin: 0 0 5px;
    }

    .nav.right ul {
        left: auto;
        right: 0;
    }

    .nav.center ul {
        left: 50%;
        margin-left: -90px;
    }

Ce mai e de făcut?
Feedback

Lasă un comentariu