filipegr Posted May 2, 2009 at 01:05 PM Report #260747 Posted May 2, 2009 at 01:05 PM 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!
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now