Tutorial CSS - Bara de navigare

Bara de navigare in CSS

De cate ori ai intrat pe un site si ai te-ai gandit: "Cum a facut bara de navigare?".

Iata si raspunsul: Pornind de la cod HTML simoplu si stilizandule cu ajutorul CSS.

In general pentru a crea obara de navigare fie ea orizontala sau un meniu vertical sunt folosite listele HTML care ulterior sunt personalizate folosind CSS. Linkuri normale in interiorul tagului <li> care va fi incapsulat in tagul <ul>

Am atasat mai jos codul html necesar:

css<ul>

	<li><a href="#">Acasa</a></li>
	<li><a href="#">Articole</a></li>
	<li><a href="#">RSS feed</a></li>
	<li><a href="#">Contact</a></li>

</ul>

Vom folosi acum CSS pentru a da forma listei de mai sus, si anume list-style-type:none - pentru a inlatura "bulinele" specifice listei. Deasemenea vom inlatura marginea si pading-ul pe care browser-ul il atribuie ca valoare standard.

cssul {
	list-style-type:none;
	margin:0;
	padding:0;
}

Codul CSS de mai sus poate fi folosit atat pentru meniuri verticale cat si pentru bara orizontala.

CSS - Bara verticala de meniu

Pentru a un meniu vertical de linkuri nu trebuie decat sa reprezentam linkurile ca un block si sa stabilim latimea blocului. Sa trecem la treaba.

cssa {
	display:block;
	width:100px;
}

***Nota
Desi nu este absolut obligatoriu sa stabilim latimea blocului de elemente, va recomand insa, sa nu omiteti acest detaliu. In browsere mai vechi bara de linkuri poate fi distorsionata.

In principiu codul de mai sus este de ajuns pentru a crea un meniu vertical. In continuare aveti insa un meniu terminat si finisat decent zic eu. In privinta culorilor si a contarstelor nu trebuie decat sa va folositi imaginatia.

cssul {
	list-style-type:none;
	margin:0;
	padding:0;
}

a:link,a:visited {
	display:block;
	font-weight:bold;
	font-size:20px;
	color:#fff;
	background-color:#d2691e;
	width:200px;
	padding:8px;
	text-decoration:none;
}

a:hover,a:active {
	background-color:#daa520;
}

[code="html" preview="false"]
<ul>
	<li><a href="#">Acasa</a></li>
	<li><a href="#">Articole</a></li>
	<li><a href="#">RSS Feedt</a></li>
	<li><a href="#">Contact</a></li>
</ul>

vezi bara de meniu verticala

CSS - Bara verticala de meniu

Pentru a crea o bara de meniu orizontala in css putem folosi, ori atributul inline, pentru a forta elementele listei sa fie insirate pe aceasi line, ori atributul floatingpentru aforta elementele listei sa fie afisate unul langa celalalt.

Folosind inline

Pentru a crea o bara de meniuri orizontale cu atributul inlinenu trebuie decat sa adaugam urmatoarea linie de cod CSS.

cssli { display:inline; }

Ca si afisare standard elementele unei liste sunt afisate in bloc. Linia de cod CSS de mai sus nu face decat sa elimine enter-urile inainte si dupa acestea afisand link-urile pe aceasi linie.

Folosind float

Vm folosi atributul floatpentru a afisa elementele listei unul langa celalalt. Vom folosi deasemenea atributul display:block; pentru a afisa linkul ca si un buton si vom stabili latimea acestuia.

Iata csi codul CSS aferent.

cssli { 
	float:left;
}

a {
	display:block;
	width:60px;
}

Odata ce am reprezentat elementul in bloc este obligatoriu sa stabilim latimea acestuia. In caz contrar acesta va ocupa toata latimea disponibila.

Codurile afisate anterior sunt suficiente pentru a crea o bara demeniuri orizontala folosind CSS In continuare aveti insa un meniu terminat si finisat. In privinta culorilor si a contarstelor nu trebuie decat sa va folositi imaginatia si sa va jucati putin.

vezi bara de meniu orizantala