Código Fonte - O melhor conteúdo para programadores

Este código tem nota

Autor

CSS

Compartilhe e guarde

Enquete

O Facebook vai deslanchar no Brasil, assim como o Orkut?

Não
Talvez
Sim
Não sei

Home Código Fonte CSS Diversos

Menu em CSS

Nesta matéria iremos criar um menu que muda de cor ao passar o mouse sobre ele.

Seletores de Links

Nele iremos utilizar quatro seletores de links:

1)a:link define o estilo do link no estado inicial;
2) a:visited define o estilo do link visitado;
3) a:hover define o estilo do link quando passa-se o mouse sobre ele;
4) a:active define o estilo do link ativo (o que foi "clicado").

<html>
<head>
<style type="text/css">
#menubv {
width: 136px; - LARGURA
padding: 0;
margin: 0;
font: 10px Verdana, sans-serif;
}

#menubv ul {
list-style: none;
margin: 0;
padding: 0;
}

#menubv li {
border-bottom: 1px solid #000000;
margin: 0;
}

#menubv li a {
display: block;
padding: 5px 5px 5px 0.5em;
font-weight:bold;
border-top: 1px solid #000000;
border-width: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background-color: red;
color: #FFFFFF;
text-decoration: none;
}

#menubv li a:hover {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background-color: #ff6600;
color: #fff;
}


/* Fix IE. Hide from IE Mac \*/
* html #menubv ul li { float: left; height: 1%; }
* html #menubv ul li a { height: 1%; }
/* End */
</style>
</head>
<body>
<div id="menubv">
<ul id="menuver">
	<li><a href="#" title="Codigos Fontes">Codigo Fonte</a></li>
	<li><a href="#" title="">PHP</a></li>
	<li><a href="#" title="">CSS - Tableless</a></li>
	<li><a href="#" title="">HTML</a></li>
	<li><a href="#" title="">JAVASCRIPT</a></li>
</ul>
</body>
</html>

<html>
<head>
<style type="text/css">
#menubv {
width: 136px; - LARGURA
padding: 0;
margin: 0;
font: 10px Verdana, sans-serif;
}

#menubv ul {
list-style: none;
margin: 0;
padding: 0;
}

#menubv li {
border-bottom: 1px solid #000000;
margin: 0;
}

#menubv li a {
display: block;
padding: 5px 5px 5px 0.5em;
font-weight:bold;
border-top: 1px solid #000000;
border-width: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background-color: red;
color: #FFFFFF;
text-decoration: none;
}

#menubv li a:hover {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background-color: #ff6600;
color: #fff;
}

/* Fix IE. Hide from IE Mac \*/
* html #menubv ul li { float: left; height: 1%; }
* html #menubv ul li a { height: 1%; }
/* End */
</style>
</head>
<body>
<div id="menubv">
<ul id="menuver">
	<li><a href="#" title="Codigos Fontes">Codigo Fonte</a></li>
	<li><a href="#" title="">PHP</a></li>
	<li><a href="#" title="">CSS - Tableless</a></li>
	<li><a href="#" title="">HTML</a></li>
	<li><a href="#" title="">JAVASCRIPT</a></li>
</ul>
</body>
</html>

Este código foi útil para você?

Nota	Comentário
10	denunciar usertop comentou em 7/10/2009 Muito pratico Otimo menu lateral bem bonito e leve
9	denunciar kennyhard comentou em 29/9/2009 Muito legal! Esse vai ser muito útil na minha mão! hehe! Recomendo também o menu simples que tem aqui nos códigos de css. Valeu, Daniel! Kenny Hard - SYOH Blog.
7	denunciar juniorsite comentou em 20/7/2009 Otimo² Cara muito bom mesmo!!!!
9	denunciar netossf comentou em 4/4/2007 Otimo Otimo menu, simples e leve.

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco

Autor

Daniel Cardoso

Tags

CSS

Efeitos

Compartilhe e guarde

Enquete

O Facebook vai deslanchar no Brasil, assim como o Orkut?

Menu em CSS

Muito pratico

Muito legal!

Otimo²

Otimo

Comente