Tutorial CSS - Bara de navigare

Tutoriale CSS si HTML, tutoriale editare si instalare site-uri in CSS si HTML!
Avatar utilizator
DarkArms
Membru
Mesaje: 3107
Localitate: Reșița, România
Nick server: cleks
Contact:

Tutorial CSS - Bara de navigare

Mesaj de DarkArms » Mie Dec 07, 2016 2:05 pm

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 o bara 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:

Cod: Selectaţi tot

<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.

Cod: Selectaţi tot

ul {
	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.

Cod: Selectaţi tot

a {
	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.

Cod: Selectaţi tot

ul {
	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 floating pentru aforta elementele listei sa fie afisate unul langa celalalt.

Folosind inline

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

Cod: Selectaţi tot

li { 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

Vom folosi atributul float pentru 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.

Cod: Selectaţi tot

li { 
	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 de meniuri 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

Înapoi la “Tutoriale CSS si HTML”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator