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:
<div id="left_menu"> <ul> <li><a href="#">Sub 1</a></li> <li class="ativo"><a href="#">Sub 2</a></li> <li>Sub 3</li> <li>Sub 4</li> </ul> </div>
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!
Loading ...
Olá companheiros, seria interessante ver esse menu na prática.
fica como sugestão.
abs\!
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.
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
Felipe, vou fazer um Post, colocando exatamente esse menu ok?
Abraços!
[...] 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 [...]