Programare web

Creează un meniu responsive în CSS

Acum, orice design serios trebuie să fie responsive, să își păstreze funcționalitatea pe orice device indiferent de rezoluția sa.Am aflat acum de o nouă tehnică prin care putem crea un meniu responsive fără a mai folosi Javascript.Folosește un cod HTML5 simplu, iar meniul poate fi aliniat la stânga, centru sau pe dreapta.Acest meniu se va afișa la hover, fără a mai fi necesar pentru user să dea clic pe el, ceea ce e mult mai facil.
[button link=”https://www.code-it.ro/Demos/meniuresponsive.html” color=”aqua”]Demo[/button]

Responsive-web-Design
Responsive web design

Vom porni desigur de la o listă pe care o vom stila.Această tehnică își arată adevăratul potențial atunci când meniul este compus din multe elemente care, la o rezoluție mică ar arată foarte dezordonat.Astfel, toate acele elemente se condensează într-un singur buton care e un elegant dropdown.

Codul HTML pentru nav

Mai jos e codul HTML necesar meniului.Tagul nav este necesar pentru a crea dropdown-ul cu proprietatea CSS absolute.Clasa .current indica linkul din meniu care va ramane vizibil.
[cc lang=”html”]

[/cc]

CSS-ul

CSS-ul pentru meniu(rezoluția desktop-ului) este chiar simplu așa că nu voi intra în detalii.Observă totuși că 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.
[cc lang=”css”]
/* nav */
.nav {
position: relative;
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}
[/cc]
 

Alinierea la stânga sau la dreapta

Precum am menționat mai sus, poți schimba poziția butoanelor folosind proprietatea text-align.
[cc lang=”css”]
/* nav la dreapta */
.nav.right ul {
text-align: right;
}

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

Suport Internet Explorer

Tag-ul din HTML5,

Write A Comment