Menu vertical com imagens de fundo no rollover

Em artigo anterior vimos como usar CSS um menu vertical com um efeito de mouseover , usando uma cor de fundo diferente para marcar o item que você está movendo o mouse.

Revisitamos este exemplo e em expansão, adicionando duas características principais deste menu: melhor acessibilidade através do uso de balas e um melhor desempenho em termos de design.

Aqui está o resultado que queremos obter:

No exemplo a imagem do ponteiro do mouse está parado no segundo link no menu.

Estas duas imagens são usadas por exemplo, para indicar o nome eo menu_2.gif menu_1.gif:

onde o tamanho (150X22 pixels) foram feitos sob medida para a largura da caixa, o tamanho da fonte e estofamento atribuídos a itens individuais.

Convido os leitores para criar imagens personalizadas para o layout e as dimensões pertinentes às suas necessidades.

Vamos praticar, começando a desenhar o menu. Analisarmos o 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 os menus vão estar em uma caixa marcada como "menu", em que vamos construir uma lista com marcadores contendo os links.

Não atribuir qualquer identificação e sem classe para ligar a qualquer um dos itens do menu (lista, lista de links), baseada unicamente em identificações pelo aninhamento de elementos.

Segue o CSS acompanhadas das observações adequadas:

 / * Estilizado genericamente a tag DIV * /









 p







 {



    



 font-size: 10px;



    



 font-family: verdana;







 }









 / * Atribui o fundo ea largura da caixa no menu * /









 Menu #







 {



    



 background: # ccddEe;



    



 width: 150px;







 }









 / * Delete o estilo padrão da tag UL constantes do menu * /









 # Menu ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Lista estilizado no menu * /









 # Menu será







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Atribui o estilo para os links na lista de menu * /









 # Menu li um, eles a: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Defina o fundo das ligações, por padrão, eo mouseover * /









 # Menu lá para







 {



    



 background-image: url (menu_1.gif);







 }







 # Menu vai a: hover







 {



    



 background-image: url (menu_2.gif);







 }

As operações do aninhamento de elementos, como mencionado acima, certifique-se que a bala só que vai aparecer com esta estilização é o menu, como resultado de assentamento dentro da caixa com o ID "menu".

Todos os outros marcadores do site terá o seu modo de padrão ou explicitamente atribuído via CSS.