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: 22119 22119 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:
« 1 2 34567891011 »
comenteaza printeaza


Primul lucru care trebuie facut este sa stilizam incadrarea care contine legaturile de navigare, in acest caz:

#navigation: #navigation {
    width: 200px;
}

Am oferit lui #navigation o latime. Daca acest sistem de navigare ar face parte dintr-o pagina de layout CSS, am adauga informatii de pozitionare si la acest ID. Acum stilizam lista:

#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Regula de mai sus scoate bulinele de listare si spatiul de la margine pe care browserul il aplica implicit atunci cand afiseaza o lista.

Navigare folosind CSS - img3

Pasul urmator este sa stilizam elementele li din #navigation, pentru a le pune o margine inferioara:

#navigation li {
border-bottom: 1px solid #ED9F9F;
}

In final stilizam linkul in sine:

font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;

Cea mai mare parte din munca este realizata aici, la crearea regulilor CSS pentru a aduga margini de stanga si dreapta, scoaterea sublinierii etc. Prima declarare de proprietate in aceasta regula seteaza proprietatea display pe block. Aceasta face linkul sa afiseze ca element bloc, adica zona fiecarui buton de navigare sa fie activa cand muti cursorul peste ea; acelasi efect il vezi daca folosesti o imagine pentru navigare.

Pot folosi CSS si liste pentru a crea un sistem de navigare cu subnavigare?
Cateodata, mai multe nivele de navigare sunt necesare dar este posibil sa creezi navigare multi-nivel folosind style lists in CSS?

Metoda perfecta de a afisa subnavigarea in cadrul sistemului de navigare este sa creezi o sublista in cadrul listei. Cele doua nivele ale navigarii vor fi usor de inteles cand sunt marcate astfel chiar si in browsere care nu suporta CSS.

Pentru a crea o navigare multi-nivel, creaza o lista (nested list) si formateaza culorile, marginile si proprietatile linkului (legaturii) pentru noile elemente de lista:

<!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="listnav_sub.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>

#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}

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