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: 21611 21611 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:
« 123456 7 891011 »
comenteaza printeaza

Abordarea navigarii cu taburi de mai sus este o versiune de baza a metodei "Douglas Bowman's Sliding Doors of CSS method", care este o tehnica incercata si testata pentru a crea o interfata cu taburi. Structura data meniului de navigare de aici este acelasi tip de lista simpla neordonata cu care am lucrat pana acum, cu diferenta ca fiecarui "obiect" ii este atribuita un atribut de clasa (class) care descrie linkul pe care il contine. Am incadrat intreaga lista in elementele <div> cu un id si un header. Tehnica isi ia numele de la cele doua imagini folosite pentru a o implemanta - una se suprapune peste cealalta si imaginile se departeaza cu cat marimea textului creste.

Vei avea nevoie de patru imagini pentru a crea acest efect: doua sunt pentru a crea culoarea normala a tabului, si doua le vei folosi cand tabul este selectat. Imaginile folosite sunt mult mai late decat ar fi nevoie in mod normal pentru un tab pentru a aves suficient spatiu ca tabul sa "creasca" daca browserul utilizatorului este configurat sa afiseze un text de o marime foarte mare.

Navigare folosind CSS - img12


Lista de baza cu categoriile de navigare:

<div id="header">
<ul id="tabnav">
<li class="recipes"><a href="#">Recipes</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
<li class="articles"><a href="#">Articles</a></li>
<li class="buy"><a href="#">Buy Online</a></li>
</ul>
</div>

Primul pas este sa formatez zona care inconjoara sistemul de navigare. Vom da antetului o margine de jos simpla pentru a face un exercitiu dar pe un site real pot exista si alte elemente pe langa aceste taburi (precum logo sau un camp de cautare):

#header {
float: left;
width: 100%;
border-bottom: 1px solid #8DA5FF;
margin-bottom: 2em;
}

Mai departe cream o formatare pentru elementul ul din header:

#header ul {
margin: 0;
padding: 2em 0 0 0;
list-style: none;
}

Aceasta regula scoate bulinele de listare si modifica marginea si spatierea listei - am adaugat 2em la padding (spatiere) in partea de sus a elementului ul.

In figura de mai jos poti vedea rezultatele muncii de pana acum:

Navigare folosind CSS - img13


Acum trebuie sa formatam lista cu elemente:

#header li {
float: left;
background-image: url("images/tab_left.gif");
background-repeat: no-repeat;
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}

Aceasta regula de formatare foloseste proprietatea float pentru a pozitiona lista de elemente orizontal, mentinand caracterul bloc al fiecarui element. Apoi adaugam prima imagine "sliding door" - partea subtire din stanga tabului - ca imagine de fundal. O margine in dreapta de un pixel pe elementul de lista creaza un spatiu intre taburi.

In figura de mai jos vezi ca imaginea din stanga tabului apare pentru fiecare tab.

Navigare folosind CSS - img14


Pagina:
« 123456 7 891011 »
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
4450
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4340
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4305
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4145
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
StyleSheet PHP Java SEO Fireworks Verilog AJAX Lightroom Vista Excel Sony Vegas XML Bridge Photoshop Swift 3D Illustrator XHTML SWF Word MySQL CSS RoR Action Script HTML Javascript Outlook Dreamweaver Powerpoint PSD COREL DRAW Fotografie JSON Ruby on Rails Gimp Python Flash
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