Entrar
Cadastre-se
Ajuda
Responder
já fiz um sistema muito melhor de menus drop down. Sem necessitar de tag script pra definir o hover no IE. Dê uma olhada: Ultimate Micox Menu Drop Down CSS - Feito 05/03/2008
Menu Horizontal, sub-menu Horizontal
mais abaixo, estão postados outros tipos de menu
Testado em: Firefox 1.5 ; Internet Explorer 6.0 ; Opera 8.5.
Postado inicialmente no meu blog: Menu Horizontal, Sub-Menu Horizontal - Menus CSS 1
Mostrarei aqui um código pronto para fazer seu menu drop-down CSS horizontal, com sub-menus horizontais de até 3 níveis.
Não farei tutorial, não explicarei o funcionamento, nem como cheguei até este código.
Para isto existem inúmeros sites. Estude CSS se quiser entender ou poste uma pergunta no fórum iEvolution sobre CSS
Se quiser pular as etapas e já pegar o código pronto, vá até o final deste post.
Uma prévia do menu pode ser vista em um site que eu estou desenvolvendo: www.lgcom.com.br (este tem apenas 2 níveis, mas pode ser expandido para 3)
Etapa 1 - O Código (X)HTML
1.1 - Faça um Menu qualquer baseado em listas UL.
1.2 - Coloque a classe "menu-hh" no seu UL ou em qualquer elemento pai dele que desejar.
Exemplo:
<div class="menu-hh"> <ul> <li><a href="quem-somos.asp">Quem somos</a></li> <li><a href="produtos.asp">Produtos</a> <ul> <li><a href="radios-portateis.asp">Rádios portáteis</a> <ul> <li><a href="2.htm">Sub-menu 3</a></li> <li><a href="2.htm">Sub-menu 3</a></li> <li><a href="2.htm">Sub-menu 3</a></li> <li><a href="2.htm">Sub-menu 3</a></li> </ul> </li> <li><a href="radios-moveis.asp">Rádios móveis</a></li> <li><a href="repetidoras.asp">Repetidoras</a></li> <li><a href="sistemas-hf.asp">Sistemas HF</a></li> <li><a href="acessorios.asp">Acessórios</a></li> </ul> </li> <li><a href="revendas.asp">Revendas</a> <ul> <li><a href="2.htm">Sub-menu 2</a> <ul> <li><a href="2.htm">Sub-menu 3</a></li> <li><a href="2.htm">Sub-menu 3</a></li> <li><a href="2.htm">Sub-menu 3</a></li> </ul> </li> <li><a href="2.htm">Sub-menu 2</a></li> <li><a href="2.htm">Sub-menu 2</a></li> </ul> </li> <li><a href="cotato.asp">Solicite uma cotação</a></li> <li><a href="assistencia-tecnica.asp">Assistência técnica</a></li> <li><a href="locacao.asp">Locação</a></li> <li><a href="contato.asp">Contate-nos </a></li> </ul> </div>
Etapa 2 - O código CSS
2.1 - Adicione as declarações abaixo no seu arquivo CSS.
2.2 - Como o Opera pede width para elementos posicionados com absolute (devidamente), eu usei a técnica do display table para resolver este problema do width no Opera
2.3 - Se for necessário realiza alterações pra melhorar o visual, faça fora destas declarações pra não correr o risco de "estragá-las" (a não ser que você entenda bem de CSS né?). Aguarde, mostrarei como fazer estas alterações na etapa 4.
/* menu horizontal by micox */
.menu-hh { display: table; }
.menu-hh * { margin: 0; padding: 0;}
.menu-hh a { display: block; }
.menu-hh li { list-style: none; float: left; height: 1%; }
.menu-hh li ul { position: absolute; visibility: hidden; white-space: nowrap;}
/* hack para navegadores que exigem width para elementos pos absolute (Opera) */
html:first-child>body .menu-hh li ul { width: 500px; }
.menu-hh li:hover ul, .menu-hh li.over ul { visibility: visible;} /* a class .over eh tecnica pro hover no IE */
.menu-hh li:hover ul li ul, .menu-hh li.over ul li ul{ visibility: hidden;}
.menu-hh li ul li:hover ul, .menu-hh li ul li.over ul{ visibility: visible;}
/* visual */
.menu-hh { background-color: #F60; width: 90%; margin: 0 0 0 12px; height: 31px;}
.menu-hh a { font-weight: bold; text-decoration: none; color: #000; padding: 0 10px; line-height: 20px;}
.menu-hh a:hover { text-decoration: underline; background-color: #DF2800;}
.menu-hh ul li ul { background-color: #DF2800; border: 1px solid #000; }Etapa 3 - Javascript pra ativar o hover (.over) no IE
3.1 - Como já sabe, o IE não interpreta a pseudo-classe ":hover". Por este motivo, você (geralmente) verá nos menus CSS uma declaração contendo também um seletor com a classe ".over" e será necessário adicionar uma solução Javascript pra simular o comportamento do ":hover". Para saber mais sobre isto, leia aqui na explicação do Maujor.
3.2 - Adicione a seguinte chamada ao Javascript no seu código (X)HTML:
<!--[if lte IE 6]> <script type="text/javascript" src="funcoesIE.js"></script> <![endif]-->
3.3 - Crie um arquivo chamado funcoesIE.js
3.4 - Coloque o seguinte código dentro deste arquivo java script:
function DOMgetElementsByClassName($node,$className){
/* Description: retorna um array com todos os elementos dentro
de $node que possuam a classe indicada em $className
Versão: 1.0 - 30/08/2006
Author: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br
Site: http://elmicox.blogspot.com
Não retire estas informações pra não infringir direitos autorais!
*/
var $node, $atual, $className, $retorno = new Array(), $novos = new Array();
$retorno = new Array();
for (var $i=0;$i<$node.childNodes.length;$i++){
$atual = $node.childNodes[$i];
if($atual.nodeType==1){// 1 = XML_ELEMENT_NODE
$classeAtual = $atual.className;
if(new RegExp("\\b"+$className+"\\b").test($classeAtual)){
$retorno[$retorno.length] = $atual;
}
if($atual.childNodes.length>0){
$novos = DOMgetElementsByClassName($atual,$className);
if($novos.length>0){
$retorno = $retorno.concat($novos);
}
}
}
}
return $retorno;
}
function addEvent(obj, evType, fn){
//adiciona evento, versao crossbrowser
//retirado de http://elcio.com.br/crossbrowser/#7
if (obj.addEventListener){
obj.addEventListener(evType, fn, true)}
if (obj.attachEvent){
obj.attachEvent("on"+evType, fn)}
}
function ativaHover(classe) {
//ativa o hover para elementos n?o links, por causa de bug do IE
//retirado de http://www.maujor.com/tutorial/ddownmenu-a.php
var pais = DOMgetElementsByClassName(document.body,classe);
for (var j=0; j<pais.length; j++) {
var sfEls = pais[j].getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
}
}
}
addEvent(window,"load",function () { ativaHover("menu-hh"); });Etapa 4 - Embelezando
Prontinho. Agora você tem um menu cru. Deve estar da seguinte forma:
Um pouco feio não é mesmo? Para estilizá-lo é só você efetuar outras declarações. De preferência em outro local, sem mexer no CSS que passei na etapa 2.
Eu, por exemplo, coloquei as seguintes declarações um pouco mais abaixo no meu código CSS e ficou bonitinho:
.menu-hh { background-color: #F60; width: 520px; margin: 0 0 0 12px; height: 31px;}
.menu-hh a { font-weight: bold; text-decoration: none; color: #000;
padding: 0 10px; line-height: 20px;}
.menu-hh a:hover { text-decoration: underline; background-color: #DF2800;}
.menu-hh ul li ul { background-color: #DF2800; border: 1px solid #000; }Com isto, finalizei meu menu. Simples não?
Como já falei no início, uma prévia do menu pode ser vista em : www.lgcom.com.br
Lembrando que este que está aí é apenas de 2 níveis.
Etapa 5 - Código todo pronto
Abaixo é só copiar, colar e editar.
Bugs corrigidos. Eu havia esquecido o comentário condicional, de zerar as margens e padding aqui no código pronto e de declarar o DOCTYPE. Pode usar tranquilo<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--[if lte IE 6]>
<script>
function DOMgetElementsByClassName($node,$className){
/* Description: retorna um array com todos os elementos dentro
de $node que possuam a classe indicada em $className
Versão: 1.0 - 30/08/2006
Author: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br
Site: http://elmicox.blogspot.com
Não retire estas informações pra não infringir direitos autorais!
*/
var $node, $atual, $className, $retorno = new Array(), $novos = new Array();
$retorno = new Array();
for (var $i=0;$i<$node.childNodes.length;$i++){
$atual = $node.childNodes[$i];
if($atual.nodeType==1){// 1 = XML_ELEMENT_NODE
$classeAtual = $atual.className;
if(new RegExp("\\b"+$className+"\\b").test($classeAtual)){
$retorno[$retorno.length] = $atual;
}
if($atual.childNodes.length>0){
$novos = DOMgetElementsByClassName($atual,$className);
if($novos.length>0){
$retorno = $retorno.concat($novos);
}
}
}
}
return $retorno;
}
function addEvent(obj, evType, fn){
//adiciona evento, versao crossbrowser
//retirado de http://elcio.com.br/crossbrowser/#7
if (obj.addEventListener){
obj.addEventListener(evType, fn, true)}
if (obj.attachEvent){
obj.attachEvent("on"+evType, fn)}
}
function ativaHover(classe) {
//ativa o hover para elementos n?o links, por causa de bug do IE
//retirado de http://www.maujor.com/tutorial/ddownmenu-a.php
var pais = DOMgetElementsByClassName(document.body,classe);
for (var j=0; j<pais.length; j++) {
var sfEls = pais[j].getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
}
}
}
addEvent(window,"load",function () { ativaHover("menu-hh"); });
</script>
<![endif]-->
<style>
/* menu horizontal by micox */
.menu-hh { display: table; }
.menu-hh * { margin: 0; padding: 0;}
.menu-hh a { display: block; }
.menu-hh li { list-style: none; float: left; height: 1%; }
.menu-hh li ul { position: absolute; visibility: hidden; white-space: nowrap;}
/* hack para navegadores que exigem width para elementos pos absolute (Opera) */
html:first-child>body .menu-hh li ul { width: 500px; }
.menu-hh li:hover ul, .menu-hh li.over ul { visibility: visible;} /* a class .over eh tecnica pro hover no IE */
.menu-hh li:hover ul li ul, .menu-hh li.over ul li ul{ visibility: hidden;}
.menu-hh li ul li:hover ul, .menu-hh li ul li.over ul{ visibility: visible;}
/* visual */
.menu-hh { background-color: #F60; width: 90%; margin: 0 0 0 12px; height: 31px;}
.menu-hh a { font-weight: bold; text-decoration: none; color: #000; padding: 0 10px; line-height: 20px;}
.menu-hh a:hover { text-decoration: underline; background-color: #DF2800;}
.menu-hh ul li ul { background-color: #DF2800; border: 1px solid #000; }
</style>
</head>
<body>
<div class="menu-hh">
<ul>
<li><a href="quem-somos.asp">Quem somos</a></li>
<li><a href="produtos.asp">Produtos</a>
<ul>
<li><a href="radios-portateis.asp">Rádios portáteis</a>
<ul>
<li><a href="2.htm">Sub-menu 3</a></li>
<li><a href="2.htm">Sub-menu 3</a></li>
<li><a href="2.htm">Sub-menu 3</a></li>
<li><a href="2.htm">Sub-menu 3</a></li>
</ul>
</li>
<li><a href="radios-moveis.asp">Rádios móveis</a></li>
<li><a href="repetidoras.asp">Repetidoras</a></li>
<li><a href="sistemas-hf.asp">Sistemas HF</a></li>
<li><a href="acessorios.asp">Acessórios</a></li>
</ul>
</li>
<li><a href="revendas.asp">Revendas</a>
<ul>
<li><a href="2.htm">Sub-menu 2</a>
<ul>
<li><a href="2.htm">Sub-menu 3</a></li>
<li><a href="2.htm">Sub-menu 3</a></li>
<li><a href="2.htm">Sub-menu 3</a></li>
</ul>
</li>
<li><a href="2.htm">Sub-menu 2</a></li>
<li><a href="2.htm">Sub-menu 2</a></li>
</ul>
</li>
<li><a href="cotato.asp">Solicite uma cotação</a></li>
<li><a href="assistencia-tecnica.asp">Assistência técnica</a></li>
<li><a href="locacao.asp">Locação</a></li>
<li><a href="contato.asp">Contate-nos </a></li>
</ul>
</div>
</body>
</html>Fim
Aqui acaba este primeiro menu horizontal com submenus horizontais de até 3 níveis.
Caso lhe tenha sido útil, comente aqui e me incentive a continuar escrevendo mais.
Caso tenha encontrado algum bug, comente aqui e me informe para eu tentar corrigir.
Quote
Um pouco feio não é mesmo? Para estilizá-lo é só você efetuar outras declarações. De preferência em outro local, sem mexer no CSS que passei na etapa 2.
