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: 22100 22100 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:
« 12345678 9 1011 »
comenteaza printeaza


Rezultatele se vad in imaginea de mai jos.

Navigare folosind CSS - img17


Aceasta solutie ofera o modalitate de a folosi imagini in navigare fara sa recurgi incarcarea multor fisiere separate. Navigarea are trei stari, dar ele nu sunt evidentiate folosind trei imagini diferit. Folosim o singura imagine mare care contine imagini pentru toate cele trei stari ca in imaginea de mai jos.

Navigare folosind CSS - img18


Navigarea este marcata ca o lista simpla:

<ul id="nav">
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>

Controlam afisarea imaginii de fundal din blocul de declarari pentru lagaturile de navigare. Pentru ca imaginea este mult mai mare decat aria ceruta de element vom vedea numai ardeiul galben la inceput.

#nav a:link, #nav a:visited {
display: block;
width: 150px;
padding: 10px 0 16px 32px;
font: bold 80% Arial, Helvetica, sans-serif;
color: #FF9900;
background: url("peppers.gif") top left no-repeat;
text-decoration: none;
}

Cand starea hover este activata, imaginea de fundal se muta in sus cu exact numarul de pixeli necesari pentru a arata ardeiul rosu. In acest exemplu, am mutat imaginea cu 69 pixeli, dar aceasta valoare va varia in functie de imaginea folosita. Poti determina numarul de pixeli matematic sau prin incercari repetate.

#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}

Efectul poate sa aiba de suferit daca utilizatorul modifica marimea textului in browser catre un font mai mare, ceea ce permite marginilor imaginilor ascunse sa apara. Poti anticipa aceasta eventualitate intr-o oarecare masura lasand un spatiu mare intre fiecare din cele trei imagini.

Image Flickering in Internet Explorer
Aceasta tehnica genereaza cateodata sistemul de navigare sa tremure in Internet Explorer. In teste, aceasta tinde sa fie o problema cand imaginea este mai mare decat cele folosite aici; totusi daca elementele de navigare tremura exista un remediu bine documentat.

Cum creez meniuri drop-down CSS?
In sectiunea precedenta ai invatat sa creezi rolloveruri fara imagini si JavaScipt. Se poate obtine acelasi lucru si pentru meniuri drop-down?
Raspunsul este da... dar meniurile care rezulta nu vor functiona in Internet Explorar 6! Cu toate acestea in imaginea de mai jos este ilustrata aceasta tehnica care va deveni mai folositoare odata ce Internet Explorer 7 isi va mari cota de piata.


Navigare folosind CSS - img19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>CSS Flyout menus</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="menus.css" />
</head>
<body>
<ul id="nav">
<li><a href="#">Starters</a>
<ul>
<li><a href="">Fish</a></li>
<li><a href="">Fruit</a></li>
<li><a href="">Soups</a></li>
</ul>
</li>
<li><a href="#">Main courses</a>
<ul>
<li><a href="">Meat</a></li>
<li><a href="">Fish</a></li>
<li><a href="">Vegetarian</a></li>
</ul>
</li>
<li><a href="#">Desserts</a>
<ul>
<li><a href="">Fruit</a></li>
<li><a href="">Puddings</a></li>
<li><a href="">Ice Creams</a></li>
</ul>
</li>
</ul>
</body>
</html>
Pagina:
« 12345678 9 1011 »
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
4800
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4735
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4610
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4545
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4405
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Sony Vegas Gimp Javascript Action Script COREL DRAW Fotografie CSS SEO MySQL Lightroom Swift 3D Photoshop AJAX PHP Powerpoint XHTML Illustrator Vista Outlook Word Dreamweaver RoR Bridge Flash SWF Python HTML XML JSON Ruby on Rails Java PSD Fireworks Verilog StyleSheet Excel
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