1 - O HTML.
Primeiramente, é necessário definirmos a estrutura do menu. Uma das maneiras que uso é por meio de uma lista não ordenada, com cada um dos sub-menus constituída por outra lista não ordenada. Veja o código HTML a seguir:
<ul>
<li><a href="#">Parte 1</a></li>
<li><a href="#">Parte 2</a>
<ul>
<li><a href="#">Parte 2-a</a></li>
<li><a href="#">Parte 2-b</a></li>
<li><a href="#">Parte 2-c</a></li>
</ul>
</li>
<li><a href="#">Parte 3</a></li>
<ul>
<li><a href="#">Parte 3-a</a></li>
<li><a href="#">Parte 3-a</a></li>
<li><a href="#">Parte 3-a</a></li>
</ul>
</li>
<li><a href="#">Parte 4</a></li>
<ul>
<li><a href="#">Parte 4-a</a></li>
<li><a href="#">Parte 4-a</a></li>
<li><a href="#">Parte 4-a</a></li>
</ul>
</li>
</ul>2 - 0 CSS
Para que o menu não contenha uma lista de itens entendiantes, vamos adicionar estilos para que ele se torne atrativo. Removeremos então, primeiramente, as marcas (bullets) e a indentação própria das listas não ordenadas, definindo também uma largura para os itens do menu.
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}É necessário também posicionar os itens da lista. Felizmente, os itens por padrão são renderizados um embaixo do outro. Contudo, vamos definir o posicionamento com o valor relative, pois iremos posicionar os sub-menus de modo absoluto em relação aos itens.
ul li {
position: relative;
}A seguir, iremos trabalhar com os sub-menus, colocando ao lado direito do seu item-pai quando o mouse for passado sobre o item.
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}Usando a propriedade CSS left e top posicionamos de modo absoluto cada sub-menu ao lado de seu item-pai. A propriedade left com o valor de 149px ( 1px menor que a latgura dos itens do menu ). Isso fará com que os sub-menus transpassem o menu e, em consequência, não apareça uma borda dupla. Também foi definida display como none, pois eles não serão visíveis por padrão.
ul li a {
display: block;
text-decoration: none;
color: #bbb;
background: #101010;
padding: 5px;
border: 1px solid #dfdfdf;
border-bottom: 0;
}É importante definir display como block, para garantirmos que cada link ocupará toda a largura definida para o item da lista. Algumas versões do Internet Explorer interpretam as quebras de linha entre os itens de lista como espaços vazios e, assim, os itens do menu não se assentam um sobre o outro. Para corrigir isso, veja o seguinte código:
/* correção \*/
* html ul li {float: left;}
* html ul li a {height: 1%;}Ao utilizar a versão 5.x do Internet Explorer... " se é que alguém ainda usa... ", é possível que o menu salte quando o mouse for passado sobre determinados itens. Para resolver esse probleminha, basta modificar a segunda linha do código mostrado anteriormente, por *html ul li {float: left; height: 1%;}.
Já na versão 6.x, devemos declarar um background para li a, pois pode acontecer de um sub-menu se estender verticalmente além de o menu e os links desaparecerem antes que tenha tempo de clicá-los.
O código mostrado esconderá as regras CSS de todos os navegadores, menos o IE. A declaração height 1% foi em consequência da propriedade float, que traz outra inconsistência no IE, afim de que os links tornem elementos nível de bloco.É necessário fecharmos o menu adicionando uma borda ao fim da lista. A seguir as regras CSS para o elemento ul.
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #dfdfdf;
}O menu ainda não está funcionando de maneira correta. Precisamos fazer os sub-menus aparecerem quando o mouse for passado sobre o item.
li:hover ul {
display: block;
}O IE suporta somente a pseudo-classe :hover aplicada a um link. Dessa forma, li:hover, que faz os sub-menus aparecerem, não funcionará nele. Precisamos então, de um código JavaScript, mostrado a seguir:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;O código CSS para hover é:
li:hover ul, li.over ul {
display: block;
}Adicionalmente, é preciso referenciar o JavaScript com o ul principal.
<ul id="nav">Assim, teremos o código final completo.
<html>
<head>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: 0;
width: 150px;
border-bottom: 1px solid #dfdfdf;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #bbb;
background: #101010;
padding: 5px;
border: 1px solid #dfdfdf;
border-bottom: 0;
}
/* correção \*/
*html ul li {float: left;}
*html ul li a {height: 1%;}
/* fim da correção */
li:hover ul, li.over ul {
display: block;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
startList = function() {
if (document.all&&document.fetElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node;nodeName=="LI") {
node.onmouseover=function() {
this.className+" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
//-->
</script>
</head>
<body>
<ul>
<li><a href="#">Parte 1</a></li>
<li><a href="#">Parte 2</a>
<ul>
<li><a href="#">Parte 2-a</a></li>
<li><a href="#">Parte 2-b</a></li>
<li><a href="#">Parte 2-c</a></li>
</ul>
</li>
<li><a href="#">Parte 3</a>
<ul>
<li><a href="#">Parte 3-a</a></li>
<li><a href="#">Parte 3-b</a></li>
<li><a href="#">Parte 3-c</a></li>
</ul>
</li>
</ul>
</body>
</html>Se adcionarmos o código a seguir ás regras CSS, teremos uma cor de fundo diferente quando passamos com o mouse nos itens:
ul li a:hover {
color: orange;
background: #212121;
}Veja como ficou o menu.
São inúmeras as formas de fazer um menu assim, coloquei aqui a forma mais usada em alguns sites que faço. A modificação ao CSS é também muito extensa, podemos fazer várias modificações e deixarmos nosso menu da melhor forma que achamos. Também podemos colocar sub-categoras aos sub-menus, mas isso ficará para uma próxima vez. Até mais e espero que tenham gostado desta dica.
Nenhum comentário
Postar um comentário