Menú vertical con imágenes de fondo en la renovación

En un artículo anterior vimos cómo utilizar CSS un menú vertical con un efecto del ratón , utilizando un color de fondo diferente para marcar el elemento que está moviendo el ratón.

Retomamos el ejemplo y la ampliación, la adición de dos características clave de este menú: mejora de la accesibilidad mediante el uso de balas y un mejor desempeño en términos de diseño.

Aquí está el resultado que queremos obtener:

En el ejemplo de captura de pantalla del puntero del ratón está parado en el segundo enlace en el menú.

Estas dos imágenes se utilizan por ejemplo para dar el nombre y la menu_2.gif menu_1.gif:

donde el tamaño (150X22 píxeles) se han hecho a la medida de la anchura de la caja, el tamaño de la fuente y el relleno asignado a los elementos individuales.

Invito a los lectores a crear imágenes personalizadas a la disposición y las dimensiones pertinentes a sus necesidades.

Vamos a practicar, empezando a sacar el menú. Se analiza el código 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>

Todos los menús estarán en una casilla que dice "menú", en el que vamos a construir una lista con viñetas que contiene los enlaces.

No asigna ningún nombre de usuario y ninguna clase de vínculo con cualquiera de los elementos del menú (lista, lista, enlace), basado únicamente en la identificación por el anidamiento de elementos.

Sigue el CSS acompañado por los comentarios apropiados:

 / * Estilizada forma genérica la etiqueta DIV * /









 p







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Asignar el fondo y la anchura de la caja en el menú * /









 Menú #







 {



    



 fondo: # CCDDEE;



    



 ancho: 150px;







 }









 / * Eliminar el estilo predeterminado de la etiqueta UL contenidas en el menú * /









 Menú # ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-name: ninguno;







 }









 / * Listas estilizada en el menú * /









 # Menu







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Asigna el estilo a los enlaces en la lista de menú * /









 Menú # li a, ellos a: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Establecer el fondo de los enlaces, por defecto, y al pasar el ratón / *









 # Menú allí para







 {



    



 background-image: url (menu_1.gif);







 }







 # Menu a: hover







 {



    



 background-image: url (menu_2.gif);







 }

Las operaciones de la anidación de elementos, como se mencionó anteriormente, asegúrese de que la única bala que aparece con esta estilización es el menú, como resultado de anidación dentro de la caja con el identificador "menu".

Todas las demás viñetas de la página tendrá su forma de defecto o asignados explícitamente a través de CSS.