E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Navigare (1)

Navigare in CSS

19.04.2008
Navigare in CSS

Daca nu te limitezi la siteuri web cu o singura pagina va trebui sa creezi navigarea. Ea este una din cele mai importante componente ale web-designului si necesita o atentie sporita pentru ca vizitatorii sa poata naviga pe site cu usurinta.

Total vizualizari: 21423 21423 afisari   |   Comentarii  2   |   Rating   |   (5 voturi)   |   Timp necesar: 1h 30 min 1h 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Sitepoint.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 12345678910 11
comenteaza printeaza


Vom face legaturile din meniu sa fie afisate ca niste blocuri, astfel incat sa umple zonele dreptunghiulare definite de elementele din meniu. Internet Explorer 6 (si mai vechi) nu recunoaste acest lucru; totusi setand latimea fiecarui link la 100% asigura ca reginunea pe care se face click se extinde pentru a umple blocul de continut.

#nav a:link, #nav a:visited {
display: block;
}
* html #nav a {
width: 100%;
}

Mai departe, trebuie sa formatezi listele imbricate care constituie meniurile fly-out astfel incat, implicit, sa nu fie afisate (display:none). Totusi specificam ca pozitionarea absoluta trebuie folosita cand sunt afisate, astfel incat sa nu afecteze restul documentului.

#nav ul {
display: none;
position: absolute;
}

In final folosesti pseudo-clasa :hover pentru a afisa meniul fly-out in cadrul oricarui element principal cand cursorul ajunge pe suprafata sa:

#nav li:hover ul {
display: block;
}

Cu aceste reguli de formatare CSS stabilite, meniurile se vad ca in imaginea urmatoare.

Navigare folosind CSS - img21


Initial codul seteaza listele imbricate pe display:none. Cand utilizatorul trece cu mouseul peste elementul principal de meniu, proprietatea listei imbricate din acel element de lista este setata pe display:block, si meniul apare. Totusi, aceasta abordare nu functioneaza in Internet Explorer, pentru ca in acel browser pseudo-clasa :hover functioneaza numai la linkuri - si pe nici un alt element.

Restul din CSS aplica pur si simplu formatari vizuale pentru a face meniurile sa arate bine.

Falling Between the Cracks
Cand meniul fly-out se deschide, utilizatorul trebuie sa mute cursorul in jos catre elementele meniului fly-out pentru a selecta unul. Daca in aceasta miscare cursorul se muta in afara elementului de lista care a deschis meniul fly-out, meniul se va inchide imediat, pentru ca nu va mai fi activa pseudo-clasa :hover.

Daca ne uitam la regulile de formatare pentru aceasta pagina, vei vedea ca folosim pozitionarea absoluta pentru a afisa lista imbricata peste continutul paginii fara a-l deranja.

Teoretic, ar trebui sa poti sa lasi un spatiu mic intre nivelul superior al meniului si meniul fly-out adaugand o margine in partea superioara a listei; totusi in Internet Explorer 7, meniul fly-out va disparea daca cursorul trece de zona marginilor, facand meniul inutilizabil. De aceea am creat efectul aplicand o margine alba in partea superioara a meniului.

Am adaugat si o margine foarte mica in partea de sus a fiecarui element de lista si o margine negativa de aceeasi valoare in partea de jos. Acest lucru are ca efect mutarea meniului in jos cu un pixel - suficient pentru ne asigura ca marginea alba nu acopera partea de jos a elementului din meniul principal.

#nav ul li {
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
border-top: .5em solid #FFF;
background-color: #F1F5F9;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
}

Accesibilitatea presupune:
Cand folosesti un meniu drop-down - cu sau fara JavaScript - asigura-te ca utilizatorii care nu vad intregul efect al meniurilor vor fi capabili sa navigheze pe site.

In cazul acestui exemplu, utilizatorii care nu au suport CSS vor vedea listele imbricate extinse si vor si capabili sa navigheze pe site. Oricine care foloseste un browser are nu suporta afisarea submeniurilor, ca Internet Explorer 6, va putea totusi naviga atat timp cat paginile de care sunt legate elementele meniului principal contin linkuri catre toate paginile din submeniul sectiunii.

In aceasta sectiune s-a discutat despre o gama de metode prin care se poate crea un sistem de navigare folosind structurally sound markup,(o marcare structurala logica) si s-au furnizat exemple care pot fi folosite ca puncte de plecare pentru propriile tale experimente.

In cazul site-urilor existente unde nu este posibila o remodelare completa, un sistem de navigare bazat pe CSS poate fi o metoda foarte buna de imbunatatire a accesibilitatii site-ului si a vitezei de incarcare fara sa afecteze infatisarea intr-un mod prea evident.

Pagina:
« 12345678910 11
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(5 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (2) spune-ti parerea
alexandra alexandra , Luni, 27 Februarie 2012, ora 05:41
#2

@craca

Daca vrei sa aliniezi elementele unele sub altele, dupa fiecare sectiune a meniului ii poti pune un div cu clear:both si width:100%. Sau - pune fiecare sectiune a meniului intr-un alt div care sa nu aiba float:left.

Raporteaza acest comentariu ca injurios!
craca , Duminica, 26 Februarie 2012, ora 08:29
#1

Foarte interesant, dar si mai interesant ar fi daca ne-ati putea explica cum facem sa mutam elementele in jos ale meniului at cand dorim sa facem un meniu vertical cu submeniuri ( adica nu mai folosim float:left)

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4325
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4190
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4170
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4010
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
JSON PSD Lightroom AJAX Java Python Illustrator SWF Word Swift 3D Verilog Dreamweaver Powerpoint Photoshop SEO Bridge XHTML XML HTML Vista Flash COREL DRAW Ruby on Rails MySQL Fotografie Gimp RoR Excel PHP Javascript Fireworks CSS StyleSheet Action Script Sony Vegas Outlook
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software