Menu Vertical

Menu super dinâmico que altera cores ao passar o mouse...

Por | @oficinadanet Programação
Saudações Galera da Oficina da Net!

Hoje postarei mais um tópico sobre um MENU super interessante, ele é feito com lista não-ordenada, com um fundo azul. Para uma melhor explicação:

Vamos construir uma lista não-ordenada:




Agora construiremos uma folha de estilo(CSS) com a
    :

    ul#menu - Aqui definimos como a lista ficará com estado normal.
    ul#menu li - Aqui só define a borda em baixo de cada
  • .
    ul#menu li a:link, ul#menu li a:visited - Aqui eu aproveitei e coloquei logo duas definições o a:link(link não-visto) e a:visited(link visto).
    ul#menu li a:hover – Aqui está definido quando passar o mouse sobre ele. O mais interessante é que ele vai ficar em itálico com o fundo mais escuro.







    Iremos adicionar alguns links:



    Obs.: Os Links deverão estar dentro do
  • .


    Pronto! Nosso Menu está terminado, você pode colocá-lo como um arquivo externo para facilitar uma futura alteração.

    Código Pronto:


    Menu Vertical









    Como Ficará:
    Menu Vertical


    Valeu galera até a próxima e
    Fiquem com Deus!

    Fonte: Sites relacionados à CSS.

    Daniel Guimarães
    Email: target="_blank">guimaraes_dgm@hotmail.com

Mais sobre:
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo