Programação » CSS

Menu Vertical

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

Publicado em: 17 de dezembro de 2006 | Leituras: 13.737 | Canal: CSS | Autor: Daniel Guimarães

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:

1º Vamos construir uma lista não-ordenada:



<ul id="menu"><li></li>

<li></li>

<li></li>

</ul>

2º Agora construiremos uma folha de estilo(CSS) com a <ul>:

ul#menu - Aqui definimos como a lista ficará com estado normal.
ul#menu li - Aqui só define a borda em baixo de cada <li>.
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.

<style type="text/css">

<!--

ul#menu {

width:200px;

border:1px solid #000066;

background:#599BFF;

margin:0;

padding:0;

list-style-type:none;

}

ul#menu li {

border-bottom:1px solid #0000CC;

}

ul#menu li a:link, ul#menu li a:visited {

display:block;

height:1%;

text-decoration:none;

font-family: verdana;

font-size:14px;

color:#FFFFFF;

border-left:10px solid #0066FF;

padding-left:5px;

}

ul#menu li a:hover {

background-color: #0033FF;

color:#FFFFFF;

border-left:10px solid #000066;

font-style:italic

} 

-->

</style>

3º Iremos adicionar alguns links:

<ul id="menu">

<li><a href="#">Home</a></li>

<li><a href="#">Fale Conosco</a></li>

<li><a href="#">Quem Somos</a></li>

<li><a href="#">Mapa do Site</a></li>

<li><a href="http://www.oficinadanet.com.br/">Oficina da NET</a></li> 

</ul>

Obs.: Os Links deverão estar dentro do <li></li>.

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

Código Pronto:

<html>

<head>

<title>Menu Vertical</title>

<style type="text/css">

<!--

ul#menu {

width:200px;

border:1px solid #000066;

background:#599BFF;

margin:0;

padding:0;

list-style-type:none;

}

ul#menu li {

border-bottom:1px solid #000066;

}

ul#menu li a:link, ul#menu li a:visited {

display:block;

height:1%;

text-decoration:none;

font-family: verdana;

font-size:14px;

color:#FFFFFF;

border-left:10px solid #0066FF;

padding-left:5px;

}

ul#menu li a:hover {

background-color: #0033FF;

color:#FFFFFF;

border-left:10px solid #000066;

font-style:italic

} 

-->

</style>

</head>

<body>

<ul id="menu">

<li><a href="#">Home</a></li>

<li><a href="#">Fale Conosco</a></li>

<li><a href="#">Quem Somos</a></li>

<li><a href="#">Mapa do Site</a></li>

<li><a href="http://www.oficinadanet.com.br/">Oficina da NET</a></li> 

</ul>

</body>

</html>