Meniu de linkuri cu css – Tutorial

In acest tutorial css voi prezenta cum putem face un meniu simplu cu css, care merge in fiecare browser foarte bine, chiar si in cele mai vechi versiuni de IE – datorita codului customizat. Este adevarat ca se poate realiza meniul si cu cod mai putin, dar daca vrem sa avem suport si pentru IE, atunci trebuie facut asa.
Meniurile de linkuri se pot stiliza cel mai usor cu css daca folosim liste neordonate, adica
ul. Prima data vom crea un stil pentru un id, si id-ul vom aplica la lista cu linkuri. Haideti sa vedem codul, si pe urma cateva explicatii. Deci vom face un meniu care arata asa:
Rezultatul final

Codul folosit pentru acest meniu css

<html>
<head>
<title>Meniu de linkuri cu css – tutorial</title>

<style type="text/css">
#meniu {
list-style-type:none;
width:483px;
height:30px;
border:solid;
border-width:0px 0px 5px 0px;
border-color:#7AB8E9;
margin:0px;
padding:0px;
}
#meniu li {
float:left; width:120px; height:30px;
margin-right:1px;
line-height:30px;
text-align:center;
background-color:#000000;
}
#meniu li a:link {
width:120px; height:30px;
display:block;
background-color:#000000;
text-align:center;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#990000;
text-decoration:none;
}
#meniu li a:visited {
width:120px; height:30px;
display:block;
background-color:#000000;
text-align:center;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#990000;
text-decoration:none;
}
#meniu li a:hover {
width:120px;height:30px;
display:block;
background-color:#333333;
text-align:center;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}
</style>

</head>
<body>

<ul id="meniu">
<li><a href="#">Tutoriale</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Html</a></li>
<li style="margin-right:0px;"><a href="#">Tutoriale css</a></li>
</ul>
</body>
</html>

Puteti copia codul de mai sus, si puteti salva intr-un fiser html, sau copia in editorul online de pe acest site, si prin editare puteti sa experimentati modificand parametrii la stiluri, cred ca asa se invata cel mai bine. f
Cateva lucruri despre acest stil, ce am facut de fapt? – Dupa cum vedeti, am creat un stil cu numele de id “meniu”. Acest id are niste stiluri “copii”, adica parametri speciali pentru anumite cazuri – in varianta noastra, cum trebuie sa se comporte linkurile incadrate in lista neordonata cu idul “meniu”.

Explicatii

Acest tutorial, stilul de mai sus contine si niste directive css, care nu au fost mentionate, discutate in “tutoriale-le” anterioare. Haideti sa vedem care sunt directivele:
list-style-type:none; – inseamna ca lista neordonata sa nu fie precedata de nici un semn, linie, cerc etc – pur si simplu sa fie enumerate elementele listei.
display:block; – inseamna ca elementul sa se comporte ca si un intreg paragraf, sau header, adica sa aiba spatiu gol care il inconjoara. In cazul nostru am avut nevoie de aceasta directiva ca linkurile sa fie usor accesibile, adica sa nu trebuiasca sa punem mouse ul exact deasupra textului, ci sa ajunga si daca punem doar desupra spatiului declarat cu height si width. Incercati sa-l scoateti display:block, si veti intelege imediat diferenta cand faceti un hover desupra unui link.
line-height:30px; – cred ca era deja mentionat intr-un alt tutorial esenta acestei directive, dar insa trebuie mai mentionat ceva si aici. Am setat line-height la acelasi intaltime ca si elementele listei, ca textul din cadrul listei sa fie pozitionat exact in centru, inclusiv din punct de vedere vertical.
text-decoration:none; – browserele au in fisierul defult css directiva ca linkurile sa fie subliniate default, ca sa scapam de acest lucru, folosim : text-decoration:none

Cum transformam acest meniu?
– intr-un meniu vertical

Tot ce trebuie sa facem ca sa trasformam meniul in vertical, este sa scoatem directiva float:left;, ca elementele listei sa nu curga la stanga, trebuie sa scoatem borderul, iar din margin-right trebuie sa facem margin-bottom.
Ca sa intelegeti totul din acest tutorial, trebuie sa urmati toate “tutoriale-le css” anterioare! – sper ca acest cod sa va usureze multe ori munca voastra! (copy – paste)

Lasă un răspuns

(*)


*