html
DESCRIPTION
exemple htmlTRANSCRIPT
17. Meniuri
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>
<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>
Observatie: # reprezinta un URL sau un nume de fisier.
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.
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.
a {display:block;width:100px;}
***Nota Desi nu este absolut obligatoriu sa stabilim latimea blocului de elemente, este recomandat insa, sa nu omiteti acest detaliu. In browsere mai vechi bara de linkuri poate fi distorsionata.
In principiu codul de mai jos este de ajuns pentru a crea un meniu vertical.
<html><head>
<style type="text/css">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;}</style></head><body><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></body></html>
CSS - Bara orizontala de meniu
Pentru a crea o bara de meniu orizontala in css putem folosi ori atributul inline, pentru a forta elementele listei sa fie pe aceeasi line, ori atributul floating pentru a forta 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.
l i { display:inline; }
Ca afisare standard elementele unei liste sunt afisate in bloc. Linia de cod CSS de mai sus nu face decat sa elimine intreruperile de linie 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 de asemenea atributul display:block; pentru a afisa linkul ca si buton si vom stabili latimea acestuia.
Iata si codul CSS aferent.
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.
Exemplu 1: Meniu construit folosind inline <html><head><style type="text/css">ul {
list-style-type:none;margin:0;padding:0;padding-top:6px;padding-bottom:6px;
}li {
display:inline;}a:link,a:visited {
font-weight:bold;font-size:17px;color:#FFFFFF;background-color:#d2691e;text-align:center;padding:6px;
text-decoration:none;}a:hover,a:active {
background-color:#daa520;}</style></head><body><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></body></html>
Exemplu 2: Meniu construit folosind float <html>
<head><style type="text/css">ul {
list-style-type:none;margin:0;padding:0;overflow:hidden;
}li {
float:left;}a:link,a:visited {
display:block;width:120px;font-weight:bold;font-size:17px;color:#FFFFFF;background-color:#d2691e;text-align:center;
padding:4px;text-decoration:none;
}a:hover,a:active {
background-color:#daa520;}</style></head><body><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></body></html>