Menu vertical utilizando CSS -
Muitas vezes nos preocupamos tanto em como fazer um menu horizontal com CSS que quando vamos fazer um menu vertical temos aquele branco!
Segue abaixo um exemplo:
CSS:
#left_menu {
width: 173px;
margin-left: 5px;
}
#left_menu ul li{
height: 23px;
line-height: 23px;
background: url(/images/menu_left_item.jpg) no-repeat;
width: 163px;
font-size: 11px;
padding-left: 10px;
color: #505050;
}
#left_menu ul li a{
text-decoration: none;
color: #505050;
}
#left_menu ul li a:hover{
text-decoration: underline;
color: #505050;
}
#left_menu ul li.ativo {
background: url(/images/menu_left_item_active.jpg) no-repeat;
font-weight: bold;
text-decoration: underline;
color: #86b801;
}
XHTML:
Pontos importantes que todos sempre esquecem:
- Sempre quando setarmos uma altura para o item temos que fazer o mesmo com a altura da linha: line-height
- “#left_menu ul li.ativo” sempre quando formos indicar uma classe ao “li” o “.” deve ser concatenado como nesse exemplo
Qualquer dúvida, comentem!
Olá companheiros, seria interessante ver esse menu na prática.
fica como sugestão.
abs\!
Comentário by felipe alencar — 30/07/2008 @ 13:27
Na verdade nem sempre… risos
O line-height igual ao height do elemento, é pra posicioná-lo ao meio em relação a altura. Porém isso implica em alguns problemas, por exemplo.
Se o elemtno tiver duas linhas vai ficar bem feinho, vc vai ver se fizer o teste.
Um bom lugar pra aprender isso nos detalhes é nesse link.
http://www.brunodulcetti.com/blog/2007/01/17/vertical-align-no-css-como-quando-e-por-que-usar.html
Sobre o “.” pra concatenar, na verdade o “li” é dispensável, só é necessário usar se tiver mais elementos, por exemplo uma div, com o mesmo class do li, ai vc tem que indicar, que é um li com aquele class.
Comentário by Ronildo Costa — 30/07/2008 @ 13:57
Na realidade em relação sobre a concatenação tudo que vem e herda um elemento quando se cria a classe é necessário concatenar:
ex:
form fieldset input.btnenviar {
padding: 3px;
border: 1px solid #d1d4da;
background-color: #f2f4f6;
color: #86b801;
margin: 10px 10px;
float: right;
}
Nesse caso o btnenviar irá ter essas propriedades quando estiver dentro de um form que tem um fieldset e ainda se o botão for um input
Comentário by Wesley — 30/07/2008 @ 14:29
Felipe, vou fazer um Post, colocando exatamente esse menu ok?
Abraços!
Comentário by Wesley — 30/07/2008 @ 14:33
[...] quando fizemos o post sobre Menu vertical utilizando CSS, o Ronildo fez um comentário, mas mais importante de que seu comentário foi a referência [...]
Pingback by Quando utilizar valign, vertical-align e line-height | Blog: School of Net — 31/07/2008 @ 10:53
Boa dica Wesley, adorei, teria como vc passar para nos uma forma de como criar um menu dropdown, estou loko para poder aprender ele de uma forma mais simples… desde ja agradeço a atenção,
Obrigado
Comentário by arlington — 18/07/2009 @ 0:38