Categorias:

Criando submenu com CSS e jQuery

Imagem do avatar de
Publicado por David CHC

Salve Amigos do VAB, nesse vídeo aulas mostrarei a como criar um menu com submenu na horizontal. Essa aula será dividia em duas a partes: A primeira criaremos a estrutura com HTML e a estilização com CSS; na segunda parte utilizaremos o jQuery para aplicar um efeito para mostrar o submenu. Espero que gostem, e boa aula.

Nessa segunda vídeo-aula iremos aplicar o efeito com jQuery no submenu, utilizando slideDown e slideUp. e ainda deixado o item selecionado ao passar o mouse. Espero que gostem, e boa Aula.

Código:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <title>Exemplo Menu</title>
   <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
   <script type="text/javascript" src="js/menu.js"></script>

</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></li>
               <li><a href="#">Serv 2</a></li>
               <li><a href="#">Serv 2</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>


style.css


*{
   margin:0;
   padding:0;
}

ul{
   list-style:none;
}

ul#menu{
   width:500px;
   margin:0 auto;
   position:relative;
}
ul#menu li{
   float:left;

}
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 ul{
   display:none;
   position:absolute;
   top:25px;
   left:0;
   width:460px;
   background:#ccc;
}

/*
ul#menu li:hover ul{
   display:block;
}
*/




menu.js


[javascript]

$(function(){

   $("#menu a").mouseover(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();

      }


   });

});[/javascript]


	
				
				Tags:

31 comentários em “Criando submenu com CSS e jQuery”

  2. Fala David bele?

    seguinte, eu estou utilizando esse codigo num trabalho que fiz..
    eu so queria tirar uma duvida… quando voce passa o mouse em um link que tenha um submenu, como faço para o submenu esconder quando voce tira o mouse?

    é que no seu codigo o submenu se esconde apenas quando passa o mouse em outro link, e eu queria que ele escondece também quando o mouse ja nao estiver mais sobre ele…

    Agradeço desde já

    Responder

    1. Luiz, fazer dessa maneira é mais facil, do da maneira q fiz, seria algo + ou – assim :

      $(“#menu li”).hover(function(){
      $(this).find(‘ul’).slideDown();
      }, function(){
      $(this).find(‘ul’).slideUp();

      });

      Responder

  4. David também tive o problema para do Luiz mais não sei acrescentar esse código da sua resposta ao arquivo js. Me ajuda ae cara.

    Valeu.

    Responder

  5. David consegui resolver o problema, mas agora me surgiu uma dúvida. Queria que não ficasse marcado o link do meu qndo não estivesse com o mouse por cima. Aguardo. Abraço.

    Responder

  7. Como faz para centralizar todo o menu dentro do width de 500px que você escolheu, tentei algumas coisas mas nada parece funcionar.
    obg pela video aula.

    Responder

  9. Cara…! VIREI TEU FÃ. Sensacional as tuas vídeo aulas. O que mais me impressiona e a facilidade com que você explica as coisas e a sua humildade. Deus te projeta (com toda sinseridade).

    Responder

  11. Parabéns pelas vídeo aulas! Como faço para que o comportamento dos ítens do submenu sejam iguais ao do menu? Ou seja ao clicar em um ítem do submenu ele fique com efeito marcado e os demais ítens do submenu desmarcados? Obrigado!

    Responder

  14. Show de bola seu material, quero tirar uma dúvida.

    Se eu tiver um menu com submenu na vertical, com faço para que após eu selecionar um item seja no meu ou no submenu após ele carregar a nova página este menu e submenu fique aberto e selecionado o item que foi clicado?

    Exemplo

    Clico no SUBMENU” Meus dados” dentro do MENU Gerenciamento, fazer com que:

    MENU: Gerenciamento fique com classe css marcada e o SUBMENU permaneça aberto
    SUBMENU: Meus dados fique com a classe css marcada.

    Obrigado pela ajuda.

    Responder

  15. David, tentei colocar isso no blogger (menu.js) mais é reportado esse problema:

    Erro ao analisar XML, linha 736, coluna 27: The entity name must immediately follow the ‘&’ in the entity reference.

    referente as linhas:

    if(menu.length > 0 && menu.is(‘:hidden’)){

    e

    if(!submenu.hasClass(‘submenu’) && menu.length == 0){

    como resolver esse problema, agradeço desde já pela ajuda.

    Responder

    1. Swellington, na hora de colocar o código, utilize o CDATA, assim:

      [javascript]
      &lt;![CDATA[
      $(function(){
      $(&quot;#menu a&quot;).mouseover(function(){
      var menu = $(this).parent().children(‘.submenu’);
      var submenu = $(this).parent().parent();

      if(menu.length &gt; 0 &amp;&amp; menu.is(‘:hidden’)){
      $(&quot;#menu a&quot;).removeClass(‘ativo’);
      $(this).addClass(‘ativo’);
      $(‘.submenu’).slideUp();
      menu.slideDown();
      }
      if(!submenu.hasClass(‘submenu’) &amp;&amp; menu.length == 0){
      $(&quot;#menu a&quot;).removeClass(‘ativo’);
      $(this).addClass(‘ativo’);

      $(‘.submenu’).slideUp();
      }

      });
      });
      ]]&gt;
      [/javascript]

      Responder

  17. David… boa noite…
    Vi que este exemplo e eu queria fazer algo assim de le ficar aberto e com a escolha no submenu com o texto em outra cor….

    eu ja tenho isso feito, mas sem o JS entao qdo tira o mouse ele recolhe o submenu…
    tentei de diversas formas adaptar o seu JS ao meu menu… mas nao consegui…se que voce poderia dar uma olhada ou orientar o que devo fazer… nao conheço nada de JS..

    desde já agradeço…

    Responder

  18. David boa noite…

    tenho um menu com sub menu de forma classica onde qdo tira o mouse ele recolhe o submenu..
    hoje quando passo o mouse ele abre o submenu e descendo ao submenu ele muda a cor do texto do item escolhido…

    gostei muito do seu exemplo e queria aplicar no meu programa de deixar o sub menu aberto e com o texto do item escolhido em outra cor…

    Ja tentei diversas modificações tanto no css como no js mas nao consegui..nao tenho muita experiencia..e nada de js…
    voce poderia me ajudar..me orientar posso enviar o codigo tambem… pra vc com certeza é um menu bem simples…

    te agradeço muito…

    Responder

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *