Jump to content

Recommended Posts

Posted

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:

http://img26.imageshack.us/img26/4093/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:

http://img504.imageshack.us/img504/766/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!

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.