Menu vertical avec des images de fond dans le capotage

Dans un ancien article que nous avons vu comment utiliser les CSS une menu vertical avec un effet de mouseover , en utilisant une couleur de fond différente pour marquer l'élément que vous déplacez la souris.

Nous revisitons notre exemple et en expansion, l'ajout de deux caractéristiques principales de ce menu: une meilleure accessibilité grâce à l'utilisation de balles et d'une meilleure performance en termes de design.

Voici le résultat que nous voulons obtenir:

Dans l'exemple capture d'écran du pointeur de la souris est immobile sur le second lien dans le menu.

Ces deux images sont utilisées par exemple pour donner le nom et l'menu_2.gif menu_1.gif:

où la taille (150X22 pixels) ont été faites sur mesure à la largeur de la boîte, la taille de la police et un rembourrage assignés à des éléments individuels.

J'invite les lecteurs à créer des images personnalisées à disposition et les dimensions pertinentes à ses besoins.

Soyons pratiques, commencent à attirer l'menu. Nous analysons le code 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>

Tous les menus seront dans une boîte marquée "menu", dans laquelle nous allons construire une liste à puces contenant les liens.

Ne pas céder aucun ID et pas de classe à un lien à l'un des éléments du menu (liste, liste, lien), basée uniquement sur les identifications par l'imbrication des éléments.

Suit le CSS accompagné de commentaires appropriés:

 / * Stylisé génériquement la balise DIV * /









 p







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Attribuer le fond et la largeur de la boîte dans le menu * /









 Menu #







 {



    



 background: # ccddEe;



    



 largeur: 150px;







 }









 / * Supprimer le style par défaut de la balise UL contenues dans le menu * /









 # Menu ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Listes stylisé dans le menu * /









 # Menu sera







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Attribuer le style des liens dans la liste du menu * /









 # Menu li a, les a: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Définir l'arrière-plan des liens, par défaut, et le passage de la souris * /









 # Menu là pour







 {



    



 background-image: url (menu_1.gif);







 }







 # Menu sera a: hover







 {



    



 background-image: url (menu_2.gif);







 }

Les opérations de l'imbrication des éléments, tel que mentionné ci-dessus, en sorte que la balle seule qui apparaîtra avec cette stylisation est le menu, à la suite de nidification à l'intérieur de la boîte avec l'ID "menu".

Tous les autres balles du site auront leur façon de défaut ou explicitement attribuées via CSS.