Webly

Internet + Humana

Ir para o Conteúdo
Ir para o Menu
Ir para a Busca
Ir para o Login

Assine:

Navegação

Menu Dropdown Horizontal Jquery

Menu 3 niveis com jquery

Escrito por Lucasbr em JavaScript e Ajax. Data: 02/07/2008

Ver tópico original no fórum.

Esses dias tava precisando de um menu dropdonw e desenvolvi esse esquema usando jquery.

Eu testei ele no ie6, ie7, ff2, ff3 e no opera.. esta funcionando em ambos.

O menu tb pode ser usado com 1,2 ou 3 subniveis.

Segue o codigo.

Nao se esqueça de colocar dentro da mesma pasta o arquivo jquery.js

QUOTE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu dropdown </title>
<script type='text/javascript' src='jquery.js'></script>
<script>
function mainmenu(){
$(" #nav ul ").css({display: "none"});
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(200);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}

$(document).ready(function(){
mainmenu();
});
</script>
<style>

#nav, #nav ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;line-height:1.5em;}
#nav a{display:block;padding:0px 5px;color:#333;text-decoration:none;}
#nav a:hover{background-color:#eaeaea;color:#333;}
#nav li{float:left;position:relative; border:1px solid #999999;}
#nav ul {position:absolute;display:none;width:12em;top:2.4em;font-size:10px;}
#nav li ul a{width:16em;height:auto;float:left;background-color:#CCCCCC; color:#666666;}
#nav ul ul{top:auto; background-color:#CCCCCC;}
#nav li ul ul {left:16em;margin:0px 0 0 10px;background-color:#CCCCCC;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block;}
</style>
</head>
<body>

<ul id="nav">
<li><a href="#">Empresa</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Produtos</a>
<ul>
<li><a href="#">Cd's</a>
<ul>
<li><a href="#">Rock</a></li>
<li><a href="#">Pop</a></li>
</ul>
</li>
<li><a href="#">Dvd</a></li>
<li><a href="#">Vhs</a></li>
</ul>
</li>
</ul>
</body>
</html>

Você gostou? Comente no fórum!