• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

filipegr

[CSS] Menu Vertical e Horizontal com Efeito Hover

1 mensagem neste tópico

Ora muitos bons dias, a partir do que aprendi, criei dois menus, um vertical e outro horizontal, basta alterarem ao vosso gosto (Y)!

Vertical Menu:

Parte HTML:

<ul class="filipegrvmenu">
<li><a href="#">Adiciona</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Comenta</a></li>
<li><a href="#">Scraps</a></li>
<li><a href="#">Fives</a></li>
<li><a href="#">Mensagens</a></li>
</ul>

Parte CSS:

ul.filipegrvmenu {
display: inline;
list-style: none;
}
ul.filipegrvmenu li {
width: 90px;
height:40px;
}
ul.filipegrvmenu li a {
width: 90px;
height:40px;
display:block;
color:#fff;
text-decoration: none;
font-size:7pt;
font-family:arial;
line-height:40px;
text-align:center;
background: #003663;
padding:-1px -5px;
border:1px dashed #FFF;
}
ul.filipegrvmenu li a:hover {
background:#004a80;
font-size:11pt;
font-family:"kristen ITC";
font-weight:bold;
border:1px dotted #FFF
}

Exemplo:

verticalmenu.th.jpg

Horizontal Menu:

Parte HTML:

<ul class="filipegrhmenu">
<li><a href="#">Adiciona</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Comenta</a></li>
<li><a href="#">Scraps</a></li>
<li><a href="#">Fives</a></li>
<li><a href="#">Mensagens</a></li>
</ul>

Parte CSS:

ul.filipegrhmenu {
display: inline;
list-style: none;
}
ul.filipegrhmenu li {
float:left;
width: 90px;
height:40px;
padding-left:10px;
}
ul.filipegrhmenu li a {
width: 90px;
height:40px;
display:block;
color:#fff;
text-decoration: none;
font-size:7pt;
font-family:arial;
line-height:40px;
text-align:center;
background: #003663;
padding:-1px -5px;
border:1px dashed #FFF;
-moz-border-radius: 10px;
}
ul.filipegrhmenu li a:hover {
background:#004a80;
font-size:11pt;
font-family:"kristen ITC";
font-weight:bold;
border:1px dotted #FFF
}

Exemplo:

horizontalmenu.th.jpg

Ler:

-moz-border-radius: 10px;

Este código define, bordas redondas aos menus e só se aplica ao Firefox e/ou Safari3 devido só a estes terem incorporado este "código" nos seus browsers, como sabemos IE é shit por isso não vai funcionar!

Criticas e Sugestões e Dúvidas é só perguntar!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora