Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia Pessoal, preciso de um menu com 3 níveis.
Mas o segundo precisa ser horizontal e o 3º vertical.
Só consigo encontrar tudo vertical.
Tenho um que funciona bem mas é só 2 níveis e não consigo implementar o 3º.
Alguém poderia me ajudar?
Muito obrigada!
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.familysites.com.br/images/menu.jpg&key=5fa6a81f1325f4178710764abed5f77d6a1012815ae8a64774fe147f0c390040" alt="menu.jpg" />
Este é o código do menu acima.
<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Menu - Default functionality</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#menu a").click(function(){ var menu = $(this).parent().children('.submenu'); var submenu = $(this).parent().parent(); if(menu.length > 0 && menu.is(':hidden')){ $("#menu a").removeClass('ativo'); $(this).addClass('ativo'); $('.submenu').slideUp(); menu.slideDown(); } if(!submenu.hasClass('submenu') && menu.length == 0){ $("#menu a").removeClass('ativo'); $(this).addClass('ativo'); $('.submenu').slideUp(); } });}); </script> <style type="text/css"> *{ margin:0; padding:0;} ul{ list-style:none; } ul#menu{ width:500px; margin:0 auto;}ul#menu li{ float:left; position:relative; }ul#menu li a{ display:block; float:left; padding:0 15px; height:25px; line-height:25px; text-decoration:none; color:#333; border:1px solid #ccc;} ul#menu li a:hover, ul#menu li a.ativo{ background:#ccc;}ul#menu li a:hover{ background:#ccc; color:#FF0000; } ul#menu li ul{ display:none; position:absolute; top:25px; left:0; width:460px; background:#ccc;} /*ul#menu li:hover ul{ display:block;}*/ </style> </head><body> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Serviços</a> <ul class="submenu"> <li><a href="#">Serv 1</a> <ul class="submenu"> <li><a href="#">Serv 1.1</a></li> <li><a href="#">Serv 1.1</a></li> </ul> </li> <li><a href="#">Serv 2</a></li> <li><a href="#">Serv 3</a></li> </ul> </li> <li><a href="#">Produtos</a> <ul class="submenu"> <li><a href="#">Prod 1</a></li> <li><a href="#">Prod 2</a></li> <li><a href="#">Prod 2</a></li> </ul> </li> <li><a href="#">Cliente</a></li> <li><a href="#">Contato</a></li> </ul> </body></html>Poderiam ajudar?
:flores:
alguém poderia ajudar?
Super obrigada Nosreve, funcionou!
Só tenho mais um probleminha.
O segundo nível deve abrir com a opção onclick do 1º, mas se defino isso no javascript, ao acessar o 2º ele fecha ao clicar e só atualiza depois de clicar a 2º vez.
Você poderia me ajudar com isso também?
Obrigada. ^^
<script type="text/javascript">
$(function(){
$("#menu a").click(function(){
var menu = $(this).parent().children('.submenu');
var submenu = $(this).parent().parent();
if(menu.length > 0 && menu.is(':hidden')){
$("#menu a").removeClass('ativo');
$(this).addClass('ativo');
$('.submenu').slideUp();
menu.slideDown();
}
if(!submenu.hasClass('submenu') && menu.length == 0){
$("#menu a").removeClass('ativo');
$(this).addClass('ativo');
$('.submenu').slideUp();
}
});
});
</script>Olá,
posso ajudar sim, na verdade não precisa de tudo isso, basta usar o método slideToggle(), que vai fazer o mesmo efeito,
e também, você esta pegando o elemento pai e depois esta pegando o UL que é o filho do pai,
mas esse elemento é irmão do elemento A que você esta clicando, então bastar usar o método next() que pega o próximo elemento do mesmo nível
substitua esse código por esse...
<script type="text/javascript">
$(function(){
$("#menu a").click(function(){
$(this).next().slideToggle();
});
});
</script>Desta forma ele mantêm todos os itens selecionados.
Conforme clico ele não apaga o anterior, fica um submenu sobrepondo o outro.
Você sabe como resolver?
Obrigada!
Você pode usar o metodo slideUp(), que serve para fechar um elemento, basta adicionar antes do slideToogle(),
ficando desta maneira o codigo jquery ...
<script type="text/javascript">
$(function(){
$("#menu a").click(function(){
$("#menu a").next().slideUp();
$(this).next().slideToggle();
});
});
</script>Olá Felicity,
Tenho um menu vertical em CSS3, associado a um menu horizontal gráfico, feito com o Front Page.
Script do menu:
<!doctype html>
<html>
<head lang="pt-br">
<meta charset="UTF-8" >
<title>SISTEMA DE GERENCIAMENTO EMPRESARIAL</title>
<!-- Start css3menu HEAD section -->
<link rel="stylesheet" href="styles/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu HEAD section -->
</head>
<body bgcolor="#EEEEEE">
<div align="center">
<table border="0" width="920" cellspacing="0" cellpadding="0">
<tr>
<?php include "menu.php";?>
</tr>
<table border="0" width="920" cellspacing="0" cellpadding="0" bgcolor="#EEEEEE">
<tr>
<td align="center" height="10"></td>
</tr>
<tr>
<td align="left" background="fundo.jpg" height="320" valign="top">
<!-- Start css3menu BODY section -->
<ul id="css3menu1" class="topmenu">
<li class="topfirst"> <a href="#" style="width:80px;"> PLANILHAS</a></li>
<li class="topmenu"> <a href="#" style="width:80px;"> <span>USUÁRIOS</span></a>
<ul>
<li> <a href="login_cadastrar.php" title="Incluir um usuário no sistema"> INCLUIR</a></li>
<li> <a href="#" title="Excluir um usuário do sistema"> EXCLUIR</a></li>
<li> <a href="login_lista.php" title="Listagem dos usuários cadastrados"> LISTAR</a></li>
</ul>
</li>
<li class="topmenu"> <a href="#" style="width:80px;"> <span>COMPRAS</span></a>
<ul>
<li> <a href="#"> <span>PESQUISAR</span></a>
<ul>
<li> <a href="#"> NOTA FISCAL</a></li>
<li> <a href="#"> CÓDIGO</a></li>
</ul>
</li>
<li> <a href="#"> LISTAR</a></li>
<li> <a href="#"> ATUALIZAR</a></li>
</ul>
</li>
<li class="topmenu"> <a href="#" style="width:80px;"> <span>CONTAS</span></a>
<ul>
<li> <a href="#"> <span>PAGAR</span></a>
<ul>
<li> <a href="#"> ATUALIZAR</a></li>
<li> <a href="#"> <span>LISTAR</span></a>
<ul>
<li> <a href="#"> NOTA FISCAL</a></li>
<li> <a href="#"> EMPRESA</a></li>
<li> <a href="#"> CÒDIGO</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#"> <span>RECEBER</span></a>
<ul>
<li> <a href="#"> LISTAR</a></li>
<li> <a href="#"> ATUALIZAR</a></li>
<li> <a href="#"> INCLUIR</a></li>
</ul>
</li>
</ul>
</li>
<li class="topmenu"> <a href="#" style="width:80px;"> CUSTOS</a></li>
<li class="toplast"> <a href="*menu.php*" style="width:80px;"> SAIR</a></li>
</ul><p class="_css3m"></p>
<!-- End css3menu BODY section -->
</td>
</tr>
</table>
<tr>
</tr>
</table>
</div>
</body>
</html>Script CSS 3:
ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:block;float:left;padding:0;}
ul#css3menu1>li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Arial;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Tahoma;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#00c5f8;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
background-image:url("arrowsub.png");padding-right:12px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#FFFFFF;background-image:none;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-width:0;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.toplast>a{
border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
Lembrar que o style.css está no sub diretorio styles
No menu horizontal gráfico, que é o menu.php, tenhos os vários links para cada menu vertical, por ex. :
ADMIN - LInk menu vertical: admin.php
COMPRAS - Link menu vertical: compras.php
etc.
Boa sorte.
>
Olá Felicity,
Tenho um menu vertical em CSS3, associado a um menu horizontal gráfico, feito com o Front Page.
Script do menu:
<!doctype html>
<html>
<head lang="pt-br">
<meta charset="UTF-8" >
<title>SISTEMA DE GERENCIAMENTO EMPRESARIAL</title>
<!-- Start css3menu HEAD section -->
<link rel="stylesheet" href="styles/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu HEAD section -->
</head>
<body bgcolor="#EEEEEE">
<div align="center">
<table border="0" width="920" cellspacing="0" cellpadding="0">
<tr>
<?php include "menu.php";?>
</tr>
<table border="0" width="920" cellspacing="0" cellpadding="0" bgcolor="#EEEEEE">
<tr>
<td align="center" height="10"></td>
</tr>
<tr>
<td align="left" background="fundo.jpg" height="320" valign="top">
<!-- Start css3menu BODY section -->
<ul id="css3menu1" class="topmenu">
<li class="topfirst"> <a href="#" style="width:80px;"> PLANILHAS</a></li>
<li class="topmenu"> <a href="#" style="width:80px;"> <span>USUÁRIOS</span></a>
<ul>
<li> <a href="login_cadastrar.php" title="Incluir um usuário no sistema"> INCLUIR</a></li>
<li> <a href="#" title="Excluir um usuário do sistema"> EXCLUIR</a></li>
<li> <a href="login_lista.php" title="Listagem dos usuários cadastrados"> LISTAR</a></li>
</ul>
</li>
<li class="topmenu"> <a href="#" style="width:80px;"> <span>COMPRAS</span></a>
<ul>
<li> <a href="#"> <span>PESQUISAR</span></a>
<ul>
<li> <a href="#"> NOTA FISCAL</a></li>
<li> <a href="#"> CÓDIGO</a></li>
</ul>
</li>
<li> <a href="#"> LISTAR</a></li>
<li> <a href="#"> ATUALIZAR</a></li>
</ul>
</li>
<li class="topmenu"> <a href="#" style="width:80px;"> <span>CONTAS</span></a>
<ul>
<li> <a href="#"> <span>PAGAR</span></a>
<ul>
<li> <a href="#"> ATUALIZAR</a></li>
<li> <a href="#"> <span>LISTAR</span></a>
<ul>
<li> <a href="#"> NOTA FISCAL</a></li>
<li> <a href="#"> EMPRESA</a></li>
<li> <a href="#"> CÒDIGO</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#"> <span>RECEBER</span></a>
<ul>
<li> <a href="#"> LISTAR</a></li>
<li> <a href="#"> ATUALIZAR</a></li>
<li> <a href="#"> INCLUIR</a></li>
</ul>
</li>
</ul>
</li>
<li class="topmenu"> <a href="#" style="width:80px;"> CUSTOS</a></li>
<li class="toplast"> <a href="*menu.php*" style="width:80px;"> SAIR</a></li>
</ul><p class="_css3m"></p>
<!-- End css3menu BODY section -->
</td>
</tr>
</table>
<tr>
</tr>
</table>
</div>
</body>
</html>Script CSS 3:
ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:block;float:left;padding:0;}
ul#css3menu1>li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Arial;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Tahoma;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#00c5f8;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
background-image:url("arrowsub.png");padding-right:12px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#FFFFFF;background-image:none;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-width:0;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.toplast>a{
border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
Lembrar que o style.css está no sub diretorio styles
No menu horizontal gráfico, que é o menu.php, tenhos os vários links para cada menu vertical, por ex. :
ADMIN - LInk menu vertical: admin.php
COMPRAS - Link menu vertical: compras.php
etc.
Boa sorte.
Obrigada Walter.
O seu menu funciona bem, pena que para o que eu preciso não dá para eu usar.
Obrigada pela ajuda mesmo assim! ^^
>
Você pode usar o metodo slideUp(), que serve para fechar um elemento, basta adicionar antes do slideToogle(),
ficando desta maneira o codigo jquery ...
<script type="text/javascript">
$(function(){
$("#menu a").click(function(){
$("#menu a").next().slideUp();
$(this).next().slideToggle();
});
});
</script>Bom dia Nosreve.
Não funciona. Ele volta aquele problema que quando vc clica na 2ª linha do menu ele fecha tudo ao invés de abrir.
:(
se você definir um tamanho para o ul do terceiro nivel, e retirar os floats do li e do link do terceiro nivel, ja fica mais ou menos como você deseja, depois muda ao seu gosto,
coloque depois dos outros estilos
ul#menu li ul li ul{
ul#menu li ul li ul li, ul#menu li ul li ul li a{