1

$(function () {
	$(".menu2").hide();

	$(".open").stop(true, true).mouseover(function() {		
        $(".menu2").fadeIn(100).animate({ top: '-50' }, 400);
    });	
  
    $(".open").mouseleave(function() {
      $(".menu2").stop(true, true).fadeTo('fast').animate({ top: '1' }, 100).hide();
    })
});
#conteudo{
	width:100%;
	height:300px;
	background:#36C;
	}
.menu{
	width:1365px;
	height:30px;
	background:#F00;
	margin:0px auto;
	}
.menu1{
	width:450px;
	height:30px;
	background:#FFF;
	}
.menu1 li{
	width:150px;
	height:30px;
	background:#FF0;
	list-style:none;
	float:left;
	} 
.menu2{
	width:150px;
	height:90px;
	background:;
	margin-top:50px;
	position:relative;
	display:block;
	}
.menu2 li{
	width:150px;
	height:30px;
	background:#C30;
	top:20px;
	position:relative;
}
.menu2 li:hover{
	width:150px;
	height:30px;
	background:#C60;
	top:20px;
	position:relative;
}
menu1 li ul li .open{
	widht:150px;
	height:500px;
	background:#096;
	position:absolute;
	display:block;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="conteudo">
  <nav class="menu">
    <ul class="menu1">
      <li>Teste1</li>
      <li class="open">Teste2
        <ul class="menu2">
          <li>Sub-Teste1</li>
           <li>Sub-Teste2</li>
         </ul>
      </li>
      <li>Teste3</li>
     </ul>
  </nav>    
</div>

Boa noite galera, tudo bem? Estou procurando uma forma de se fazer o menu dropdown, o funcionamento desse menu é exatamente conforme o link abaixo: http://cssmenumaker.com/menu/textured-responsive-drop-down-menu.
Gostaria que quando o cursor estivesse em cima do link, o submenu tivesse o efeito de surgir, conforme o exemplo do link.

7
  • 5
    Coloque o código do que tentou, mesmo que esteja errado. Commented 17/02/2016 às 0:50
  • 2
    Esse seu link é de um gerador de código do menu que você quer. Embaixo do exemplo tem um link para download de um zip com todo o código necessário para gerar esse menu. É isso que você quer?
    – bfavaretto
    Commented 17/02/2016 às 2:07
  • Primeiramente obrigado pela pronta resposta @bfavaretto. Isso mesmo, preciso saber como se faz esse menu, eu analisei o código fonte que está disponível para download, mas fiquei um pouco confuso, existe uma forma mais simples de se fazer esse menu?
    – Israel
    Commented 17/02/2016 às 11:30
  • Olá @renan, tudo bem? Como o resultado final não ficou próximo ao que eu esperava, achei melhor não coloca-lo aqui, até porque acredito que estou fazendo errado! Mas caso prefira posso coloca-lo, oq acha?
    – Israel
    Commented 17/02/2016 às 11:40
  • 1
    Sim Israel, coloque o código. Mas tente isolar o problema, e mostrar somente as partes que não estão funcionando. Dê uma olhada nesta página de ajuda.
    – bfavaretto
    Commented 18/02/2016 às 13:14

2 Respostas 2

2

Não sei se é isto que pretendes. Eu costumo usar o menu do bootstrap e tambem se consegue por este efeito. Se preisares de ajuda é só dizer.

$(function () {
	$(".menu2").hide();

	$(".open").stop(true, true).mouseover(function() {		
        $(".menu2").fadeIn(100).animate({ opacity:'1' }, 400);
    });	
  
    $(".open").mouseleave(function() {
      $(".menu2").stop(true, true).fadeTo('fast').animate({ opacity: '0' }, 100).hide();
    })
});
#conteudo{
	width:100%;
	height:300px;
	background:#36C;
	}
.menu{
	width:1365px;
	height:30px;
	background:#F00;
	margin:0px auto;
	}
.menu1{
	width:450px;
	height:30px;
	background:#FFF;
	}
.menu1 li{
	width:150px;
	height:30px;
	background:#FF0;
	list-style:none;
	float:left;
	} 
.menu2{
	width:150px;
	height:90px;
	background:;
    opacity:0;
	position:relative;
	display:block;
-webkit-animation: KEYFRAME-NAME 5s infinite;
  -moz-animation:    KEYFRAME-NAME 5s infinite;
  -o-animation:      KEYFRAME-NAME 5s infinite;
  animation:         KEYFRAME-NAME 5s infinite;
	}
.menu2 li{
	width:150px;
	height:30px;
	background:#C30;
	top:20px;
	position:relative;
}
.menu2 li:hover{
	width:150px;
	height:30px;
	background:#C60;
	top:20px;
	position:relative;
}
menu1 li ul li .open{
	widht:150px;
	height:500px;
	background:#096;
	position:absolute;
	display:block;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="conteudo">
  <nav class="menu">
    <ul class="menu1">
      <li>Teste1</li>
      <li class="open">Teste2
        <ul class="menu2">
          <li>Sub-Teste1</li>
           <li>Sub-Teste2</li>
         </ul>
      </li>
      <li>Teste3</li>
     </ul>
  </nav>    
</div>

0

Israel, eu não entendi bem qual o propósito do seu menu, se é somente para estudar CSS e jquery ou se vc vai realmente desenvolver uma aplicação.

Se for o segundo caso, eu sugiro usar Bootstarp para economizar seu tempo de desenvolvimento. Se for o primeiro caso, eu sugiro usar Bootstrap para vc usar seu tempo de estudo em uma ferramenta profissional, e que já foi feita para se adptar a dispositivos móveis, celular, tablets etc.

Essa biblioteca é muito fácil e já faz todo o trabalho para vc. Não precisa gastar o seu tempo de desenvolvedor na parte de comportamentos e desenho de objetos pois tudo já está pronto, basta copiar e colar. Existe uma versão do site em português, mas eu não sei se a tradução ja está completa. No próprio site do Bootstrap vc já vai encontrar muita coisa, muitos tipos de menus. Mas se vc não estiver satisfeito, pode ir no site do Bootsnip e procurar pelo objeto que te interessa, nesse caso, menu. Lá vc vai encontrar uma variedade enorme de menus. Se vc quiser aprender Bootstrap e exatamente com o menu da sua questão eu te sugiro o site do W3School.

Fiz 2 exemplos de dropdown:

//HTML
    <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">Nivel 1</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
<br/>
<br/>
<br/>                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li>
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li>
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>


//Js jQuery
$(document).ready(function(){
  $('.dropdown a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

Vc trabalha basicamente com HTML, o mínimo de javascript e praticamente zero de css . Usa os atributos de Bootstrap e pronto. Seu menu estrá fumcionando. Veja o exemplo que criei aqui nesse link.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .