Menu DropDown 3 níveis

F E L I C I T Y - SP · Dezembro 15, 2013

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!

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?

Nosreve · Dezembro 15, 2013

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{
  width: 100px;
}
ul#menu li ul li ul li, ul#menu li ul li ul li a{
  float: none;
}

F E L I C I T Y - SP · Dezembro 16, 2013

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>

Nosreve · Dezembro 16, 2013

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>

F E L I C I T Y - SP · Dezembro 27, 2013

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!

Nosreve · Dezembro 29, 2013

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>

Walter Chilomer · Janeiro 5, 2014

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>

<link rel="stylesheet" href="styles/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>

</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">



<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>



</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.

F E L I C I T Y - SP · Janeiro 7, 2014

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>



<link rel="stylesheet" href="styles/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>



</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">



<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>



</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.

:(

Arquivado

Menu DropDown 3 níveis

Recommended Posts

F E L I C I T Y - SP 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nosreve 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

F E L I C I T Y - SP 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nosreve 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

F E L I C I T Y - SP 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nosreve 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

Walter Chilomer 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

F E L I C I T Y - SP 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante