Simple CSS Menu

css, html, Learn CSS, Learn HTML, meniu html

Sa invatam cum sa construim un meniu simplu HTML folosindu-ne doar de declaratii CSS. Vom folosi pentru partea de HTML o lista simpla si cateva link-uri.

Structura HTML a meniului CSS este urmatoarea.

<ul>
	<li><a href="#">MENIU</a></li>
	<li><a href="#">MENIU</a></li>
	<li><a href="#">MENIU</a></li>
	<li><a href="#">MENIU</a></li>
</ul>

In prima faza, pentru partea de CSS, va trebui sa declaram parametrii body-ului.

body {
	margin: 0;
	font-family: Verdana, Arial, 'Times New Roman';
}

Am setat marginea ca 0 pentru ca bara noastra de meniu va fi la fel de lunga ca dimensiunea browser-ului. Am ales fontul Verdana pentru ca imi place, dar puteti opta pentru orice alta varianta de font.

ul#menu {
	position: relative;
	margin: 0;
	padding: 0;
	background-color: #999;
	height: 30px;
}

Dupa aceea ne-am adresat listei cu id-ul menu. Am setat pozitia acesteia ca relative pentru a putea fi pozitionata cursiv cu celelalte elemente din pagina, am setata margin si padding ca 0 pentru a fi afisata bara la fel in orice browser, am setat culoarea de fundal ca #999 si am setat inaltimea barei la 30px.

ul#menu li {
	display: block;
	float: left;
}

Dupa aceea am setat ca elementele din lista sa fie afisate ca block si sa pluteasca spre stanga (acest atribut ne permite pozitionarea lor pe o singura linie).

Acum sa ne ocupam de link-urile propriu-zise.

ul#menu li a {
	display: block;
	outline: none;
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	font-size: 15px;
	height: 100%;
	padding: 5px 10px 0px 10px;
}

Toata actiunea se va petrece in cadrul elementelor a, inclusiv actiunea de hover, pentru compatibilitatea intre browsere. Pentru fiecare link din lista am scos borderul care apare la click ( remove border from a href ), am scos decoratiunea default de underline, am setat culoarea font-ului ca alba, dimensiunea ca 15px si afisarea ca bold, am setata inaltimea casutei de link ca 100% (din elementul li corespunzator) si padding-ul 5, 10, 0, 10 pentru afisarea centrata in cadrul casutei a textului si distanta dintre marginea stanga si dreapta fata de text.

ul#menu li a:hover {
	background-color: #000;
} 

La hover, casuta de link isi va schimba culoarea de fundal in negru. Asta este tot, cel mai simplu meniu CSS in cel mai usor mod de realizare. Bara de meniu CSS este compatibila cu toate browserele.

C’ya next time!

Ti-a placut articolul Simple CSS Menu?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

• Flash Custom Right Click Menu
• Schimba fisierul CSS folosind jQuery
• Google Font API
• Static FBML
• Invata Ajax cu ajutorul unei aplicatii simple