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: 21934 21934 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:
« 1234567 8 91011 »
comenteaza printeaza

Mai departe formatam link-urile (legaturile) terminand cu infatisarea taburilor in starea deselectata. Imaginea care formeaza partea din dreapta a tabului este aplicata la fiecare link, finalizand efectul tabului:

#header a {
float: left;
display: block;
background-image: url("images/tab_right.gif");
background-repeat: no-repeat;
background-position: right top;
padding: 0.2em 10px 0.2em 0;
text-decoration: none;
font-weight: bold;
color: #333366;
}

Rezultatul se poate vedea in imaginea de mai jos:

Navigare folosind CSS - img15


Daca mariti marimea textului in browser, vei vedea ca si taburile se maresc si fac acest lucru fara sa se suprapuna si fara ca textul sa iasa inafara tabului - asta se intampla pentru ca am folosit imagini care permit spatiu suficient pentru crestere.
Pentru a termina sistemul de navigare, trebuie sa marcam tabul care corespunde paginii afisate curent. Fiecarui element din lista i s-a atribuit un singur nume de clasa. Daca atribuim elementului body un ID care are o valoare egala cu valoarea fiecarei clase din lista, CSS va face restul:

<body id="recipes">

Chiar daca pare ca este mult cod, codul CSS care formateaza tabul in concordanta cu ID-ul body este relativ direct. Imaginile folosite sunt copii exacte ale imaginile stanga si dreapta pe care le-am aplicat la taburi, dar au alta culoare, ceea ce produce efectul unui tab marcat.

Iata codul CSS:

#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {
background-image: url("images/tab_active_left.gif");
} #recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
background-image: url("images/tab_active_right.gif");
background-color: transparent;
color: #FFFFFF;
}

Cu aceste reguli de formatare instituite, specificarea unui ID recipes sectiunii body va cauza tabul Recipes sa fie marcat, contact va cauza tabul Contact Us sa fie marcat si asa mai departe. Rezultatele sunt aratate in imaginea de mai jos.

Identificarea unei tehnici utile
Tehnica de a adauga un ID la elementul de corp poate fi foarte utila. De exemplu, poti avea scheme de culori diferite pentru sectiuni diferite ale siteului, pentru a ajuta utilizatorul sa identifice sectiunile pe care le foloseste. Poti pur si simplu sa adaugi numele sectiunii la elementul din body.

Navigare folosind CSS - img16



Cum creez roll-overuri in CSS fara sa folosesc JavaScript?
Navigarea bazata pe CSS poate sa furnizeze niste efecte foarte interesante dar exista inca unele efecte care necesita folosirea de imagini. Este posibil sa te bucuri de avantajele navigarii pe baza de text si sa si folosesc imagini? Este posibil sa combini imagini iar CSS creaza rollover-uri fara JavaScript.

Iata codul:

<!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>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="images.css" />
</head>
<body>
<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>
</body>
</html>

ul#nav {
list-style-type: none;
padding: 0;
margin: 0;
}
#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;
}
#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}
#nav a:active {
background-position: 0 -138px;
color: #006E01;
}
Pagina:
« 1234567 8 91011 »
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
4665
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4585
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4505
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4405
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4285
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Ruby on Rails Lightroom Word Gimp SEO AJAX Python Illustrator Excel PHP XML Outlook Java StyleSheet PSD CSS Photoshop Dreamweaver SWF Fotografie Powerpoint RoR Vista MySQL Sony Vegas Action Script Flash JSON Bridge XHTML HTML Javascript Fireworks COREL DRAW Swift 3D Verilog
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