Cum sa faci rapid un meniu cu css

Ai nevoie de 4 elemente: un fisier css, un fisier html si 2 seturi de imagini: unul pentru butoanele normale (neactivate) si unul pentru butoanele active (deasupra caruia se afla cursorul – starea hover).

Pas 1: Se editeaza un fisier css:

.menu_buton1

{
cursor: pointer;
background-image:url(img/b_01.jpg);
}

.menu_buton1_hover
{
cursor: pointer;
background-image:url(img/b_01_hover.jpg);
}

Este nevoie de 2 stiluri pentru un buton, stilul default ( cand butonul nu e activ ) – menu_buton1, si stilul care se aplica atunci cand vei fi cu mouse-ul deasupra lui : menu_buton1_hover.

Cursor: pointer va face sa apara cursorul tip link deasupra imaginii, iar background-image va seta imaginea dorita.

Se repeta cele doua stiluri pentru fiecare buton al meniului.

Pas 2: Se editeaza fisierul html:

Vom face un tabel fara margini si fara spatii intre celule.

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="121" height="75" class="menu_buton1" onMouseOver='this.className=" menu_buton1_hover"' onMouseOut='this.className=" menu_buton1"' onClick='window.location = "link.html"'>&nbsp;

</td>

</tr>

</table>

Fiecare celula va fi un buton al meniului. Vom seta in fiecare celula dimensiunile dorite prin width si height, apoi ii vom defini clasa default: menu_buton1.

Vom folosi event-urile td-ului pentru a putea schimba stilul celulei fara sa reincarcam pagina. Codul din event-ul onMouseOver de exemplu, se va apela automat cand trecem cu cursorul deasupra elementului. this.className=" menu_buton1_hover" va face ca stilul elementului curent (td-ul nostru) sa se modifice in menu_buton1_hover. Acest stil va seta o alta poza de fundal (vezi pasul 1). La iesirea cu mouse-ul de deasupra elementului, vom schimba iar stilul la cel initial.

Pentru a simula efectul butonului, folosim onClick unde vom afisa alta pagina prin window.location = `link.html`.

Ca si continut, td-ul va avea un in el, adica un spatiu simplu care nu va aparea pe ecran, dar care trebuie pus deoarece td-ul trebuie sa contina ceva in el. Se poate pune o imagine cu un pixel transparent (gif) de exemplu, varianta chiar mai recomandata decat un spatiu.

Astfel un simplu td, cu 2 poze de fundal si cateva linii de cod, s-a transformat intr-un buton adevarat. In functie de cat de inventivi suntem, putem prezenta utilizatorului interfete atractive, dinamice, evoluate. Acest gen de meniuri este foarte simplu de utilizat si intretinut, singurul lucru dificil fiind designul efectiv al pozelor.