Menú vertical amb imatges de fons en un tomb

En un vell article hem vist com amb CSS menú vertical amb efecte del ratolí usant un color de fons diferent per marcar l'element que està movent el ratolí.

Ens revisar i ampliar aquest exemple, l'addició de dues característiques clau d'aquest menú: una major accessibilitat mitjançant l'ús de bales i un millor rendiment en termes de disseny.

Aquí està el resultat que volem aconseguir:

En l'exemple de pantalla del punter del ratolí es congela en el segon enllaç al menú.

Aquestes són les dues imatges que s'utilitzen per exemple per assignar el nom i la menu_2.gif menu_1.gif:

que la mida (150x22 píxels) s'han estudiat específicament en funció de l'amplada de la caixa, la mida de la font i el farciment assignat als elements individuals.

Convido als lectors a crear imatges personalitzades a disposició i les dimensions que corresponguin a les seves necessitats.

Anem a practicar, començant a dibuixar el menú. S'analitza el codi HTML:

 <div id="menu">



    



 <ul>



        



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



        



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



        



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



        



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



        



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



    



 </ Ul>







 </ Div>

Tots els menús estaran en una casella que diu "menú", en el qual anem a construir una llista de punts que conté el vincle.

No assigna cap ID de classe i no enllaços a qualsevol dels elements del menú (llista, llista, enllaços), basat únicament en la identificació per el niuament de elements.

Acompanyat pel CSS següents observacions pertinents:

 / * Estilitzada forma genèrica l'etiqueta DIV * /









 p







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Assignar el fons i l'amplada de la caixa en el menú * /









 Menú #







 {



    



 fons: # CCDDEE;



    



 ample: 150px;







 }









 / * Elimina l'estil per defecte de l'etiqueta UL contingudes en el menú * /









 Menú # ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-name: cap;







 }









 / * Mostra estilitzada figura al menú * /









 # Menu







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Assigna l'estil als enllaços a la llista de menú * /









 Menú # li a, que a: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192.939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * S'estableix el fons de la relació, i en passar el ratolí per defecte * /









 # Al menú de







 {



    



 background-image: url (menu_1.gif);







 }







 # Menu a: hover







 {



    



 background-image: url (menu_2.gif);







 }

La implantació de les operacions dels elements, com es va esmentar anteriorment, assegureu-vos que l'única bala que apareix amb aquesta estilització és el menú, a causa de la nidificació dins de la caixa amb la ID "del menú."

Totes les altres vinyetes de la pàgina tindrà la seva forma de defecte o assignats explícitament a través de CSS.