Meniu vertical cu imagini de fundal in rollover

Intr-un articol fosta am vazut cum se utilizează CSS un meniu vertical cu un efect de mouseover , utilizând o culoare de fundal diferită pentru a marca elementul pe care se misca mouse-ul.

Am reexamineze acest exemplu şi extinderea, adăugând două caracteristici-cheie ale acestui meniu: accesibilitate îmbunătăţită prin utilizarea de gloanţe şi de o mai bună performanţă în termeni de design.

Aici este rezultatul ne-o dorim pentru a obţine:

În exemplul de captură de ecran a indicatorului mouse-ului este staţionară pe pe al doilea link din meniu.

Aceste două imagini sunt folosite, de exemplu, pentru a da numele şi menu_2.gif menu_1.gif:

în cazul în care mărimea (150X22 pixeli) au fost adaptate la lăţimea de caseta, dimensiunea fontului şi padding alocate pentru elemente individuale.

Invit cititorii pentru a crea imagini personalizate pentru aspect şi dimensiuni de pertinente pentru nevoile sale.

Să practică, începe să tragă în meniul. Noi analizăm codul HTML:

 <div id="menu">



    



 <ul>



        



 <li> <a href="#"> Page 1 </ a> </ li>



        



 <li> <a href="#"> Pagina 2 </ a> </ li>



        



 <li> <a href="#"> Pagina 3 </ a> </ li>



        



 <li> <a href="#"> Page 4 </ a> </ li>



        



 <li> <a href="#"> Page 5 </ a> </ li>



    



 </ Ul>







 </ Div>

Toate meniurile vor fi într-o cutie marcat "meniu", în care vom construi o listă cu marcatori care conţine link-uri.

Nu atribuie orice ID-ul şi nici o clasă pentru a legătură într-unul dintre elementele de meniu (lista, lista, legătură într-), bazate exclusiv pe identificări de cuiburi de elemente.

Urmăreşte CSS însoţite de comentarii adecvate:

 / * Stilizată generic DIV tag-ul * /









 P







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Atribuirea fundal şi lăţimea caseta din meniu * /









 # Meniu







 {



    



 background: # CCDDEE;



    



 lăţime: 150px;







 }









 / * Ştergere stil implicit de la tag UL cuprinse în meniu * /









 # Meniu ul







 {



    



 margin: 0px 0px 0px 0px;



    



 lista-style-type: none;







 }









 / * Listele stilizată în meniul * /









 # Meniul va







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Atribuirea stilul de a link-urile din lista de meniu * /









 # Meniu li o, le-a: hover







 {



    



 display: block;



    



 poziţia: relativă;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-Greutate: bold;



    



 padding: 5px 5pixeli 5pixeli 5pixeli;







 }









 / * Set fondul de link-uri, în mod implicit, şi mouse-over * /









 # Meniu de ele







 {



    



 background-image: url (menu_1.gif);







 }







 # Meniul va a: hover







 {



    



 background-image: url (menu_2.gif);







 }

Operaţiunile de cuiburi de elemente, astfel cum sa menţionat mai sus, asiguraţi-vă că glonţul numai că vor apărea cu acest stilizarea este meniul, ca urmare a cuiburi în interiorul casetei cu ID-ul "meniu".

Toate celelalte gloanţe a site-ului va avea modul lor de implicit sau explicit atribuite prin CSS.