1

	$(document).ready(function(){
		
		$("img.menuAdmin").click(function(){
			$(this).css("display","none");
			$("div.menuAdmin div.dropdown").css("display","block");
			$("div.menuAdmin div.dropdown span").css("display","block");
			$("div.menuAdmin div.dropdown div.dropdown-content").css("display","block");
			$("div.menuAdmin div.dropdown div.dropdown-content span").css("display","block");
		});
								 
	});
	@import url('http://fonts.googleapis.com/css?family=Open+Sans');
	* {
		margin: 0;
		padding: 0;
		border: 0;
		outline: none;
	}
	html {
		font-family: 'Open Sans';
	}
	img.menuAdmin {
		display: block;
	}
	
	div.menuAdmin {
		display: none;
		width: 1000px;
		margin: 0 auto;
	}
	
	div.menuAdmin div.dropdown {
		position: relative;
		display: inline-block;
		background-color: #CCC;
		vertical-align: middle;
	}
	
	div.menuAdmin div.dropdown:hover {
		background-color: #A9A9A9;
	}
	
	div.menuAdmin div.dropdown span {
		display: block;
		width: 190px;
		height: 60px;
		line-height: 60px;
		cursor: pointer;
		text-align: center;
		vertical-align: middle;
	}
	
	div.menuAdmin div.dropdown span.last-child {
		line-height: 30px;
	}
	
	div.menuAdmin div.dropdown-content {
		display: none;
		position: absolute;
		width: 200px;
		z-index: 1;
		background-color: #F9F9F9;
	}
	
	div.menuAdmin div.dropdown:hover div.dropdown-content {
		display: block;
        transition: transform .4s ease;
	}
	
	div.menuAdmin div.dropdown:hover div.dropdown-content p {
		width: 195px;
		height: 40px;
		line-height: 40px;
		padding-left: 5px;
		border: 1px rgba(0,0,0,.1) solid;
	}
	
	div.menuAdmin div.dropdown:hover div.dropdown-content p:hover {
		background-color: #CCC;
		cursor: pointer;
	}
	
	@media screen and (min-width: 0px) and (max-width:620px) {
		img.menuAdmin {
			display: block;
		}
		div.menuAdmin,
		div.menuAdmin div.dropdown,
		div.menuAdmin div.dropdown span,
		div.menuAdmin div.dropdown div.dropdown-content,
		div.menuAdmin div.dropdown div.dropdown-content p {
			display: none;
			width: 100% !important;
		}
	}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class=menuAdmin src='http://www.wesleyanagceu.com.br/_imgs/btn-menu.png' >

<div class=menuAdmin>
	<img class=menuAdmin src='http://www.wesleyanagceu.com.br/_imgs/btn-close.png' >
	<div class=dropdown>
		<span id=home>Home</span>
	</div><!--
	--><div class=dropdown>
		<span id=celulaVolta>Célula</span>
	</div><!--
	--><div class=dropdown>
		<span>Cadastros</span>
		<div class="dropdown-content">
			<p id='cadastrarMembro'>Membro</p>
			<p id='cadastrarAdministrador'>Administrador</p>
			<p id='cadastrarCeldiva'>Gcéu</p>
			<p id='cadastrarCeldivaMembro'>Membro no Gcéu</p>
			<p id='cadastrarMensagem'>Mensagem</p>
			<p id='cadastrarEstudo'>Estudo</p>
		</div>
	</div><!--
	--><div class=dropdown>
		<span>Edições</span>
		<div class="dropdown-content">
			<p id='alterarMembro'>Membro</p>
			<p id='alterarAdministrador'>Administrador</p>
			<p id='alterarCeldiva'>Gcéu</p>
			<p id='alterarCeldivaMembro'>Membro em Gcéu</p>
			<p id='alterarMensagem'>Mensagem</p>
			<p id='alterarEstudo'>Estudo</p>
		</div>
	</div><!--
	--><div class=dropdown>
		<span class=last-child>Lançamentos e Relatórios</span>
		<div class="dropdown-content">
			<p id='lancarReuniaoCeldiva'>Reunião no Gcéu</p>
			<p id='relatorio'>Relatórios</p>
			<p id='email'>E-mails</p>
		</div>
	</div>
</div>

Tenho 2 dificuldades com esse código:

A) Quando clico no imagem img.menuAdmin, ela se esconde como era de se esperar, mas o div.menuAdmin não aparece.

B) Quando clico em algum ítem do menu, suas opções abrem como era de se esperar, mas o efeito de abrir rolando não ocorre.

2
  • Esse B) esse efeito de abrir rolando, eu não entendi bem.
    – Bulfaitelo
    28/03/2019 às 19:02
  • então, é assim: Quando passo o mose sobre um ítem de menu ele abre uma lista com as opções. Certo? Mas isso abre instantãneo. Gostaria que abrisse lentamente. Tipo um efeito de rollover. 28/03/2019 às 19:13

1 Resposta 1

1

Creio que com CSS você não consiga esse efeito rollover porque teria que definir um height fixo no elemento, ou seja, se o elemento tivesse um height fixo, seria possível apenas com CSS usando transition. Mas você pode usar os métodos .slideDown() e .slideUp() do jQuery, que faz a mesma coisa com o elemento independentemente do seu height.

É só usar dois eventos, mouseenter e mouseleave, do método .hover() na div:

$("div.menuAdmin div.dropdown").hover(
   function(){ // mouseenter
      $("div.dropdown-content", this).slideDown();
   }
   ,function(){ // mouseleave
      $("div.dropdown-content", this).slideUp();
});

Sobre o menu não estar aparecendo, é porque você não mostrou ele no seu código (apenas alguns elementos filhos que não estão ocultos). Neste caso, basta este código e não aquele enorme que você colocou:

$("img.menuAdmin").click(function(){
   $(this).hide();
   $("div.menuAdmin").show(); // mostra o menu
});

Veja funcionando (note a parte comentada no CSS que não é necessária):

EXECUTE EM TELA CHEIA

$(document).ready(function(){
		
   $("img.menuAdmin").click(function(){
      $(this).hide();
      $("div.menuAdmin").show();
   });
      
   $("div.menuAdmin div.dropdown").hover(
      function(){
         $("div.dropdown-content", this).slideDown();
      }
      ,function(){
         $("div.dropdown-content", this).slideUp();
   });
   							 
});
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
	* {
		margin: 0;
		padding: 0;
		border: 0;
		outline: none;
	}
	html {
		font-family: 'Open Sans';
	}
	img.menuAdmin {
		display: block;
	}
	
	div.menuAdmin {
		display: none;
		width: 1000px;
		margin: 0 auto;
	}
	
	div.menuAdmin div.dropdown {
		position: relative;
		display: inline-block;
		background-color: #CCC;
		vertical-align: middle;
	}
	
	div.menuAdmin div.dropdown:hover {
		background-color: #A9A9A9;
	}
	
	div.menuAdmin div.dropdown span {
		display: block;
		width: 190px;
		height: 60px;
		line-height: 60px;
		cursor: pointer;
		text-align: center;
		vertical-align: middle;
	}
	
	div.menuAdmin div.dropdown span.last-child {
		line-height: 30px;
	}
	
	div.menuAdmin div.dropdown-content {
		display: none;
		position: absolute;
		width: 200px;
		z-index: 1;
		background-color: #F9F9F9;
	}
	
	/*div.menuAdmin div.dropdown:hover div.dropdown-content {
		display: block;
     transition: all 1s ease;
	}*/
	
	div.dropdown-content p {
		width: 195px;
		height: 40px;
		line-height: 40px;
		padding-left: 5px;
		border: 1px rgba(0,0,0,.1) solid;
	}
	
	div.menuAdmin div.dropdown:hover div.dropdown-content p:hover {
		background-color: #CCC;
		cursor: pointer;
	}
	
	@media screen and (min-width: 0px) and (max-width:620px) {
		img.menuAdmin {
			display: block;
		}
		div.menuAdmin,
		div.menuAdmin div.dropdown,
		div.menuAdmin div.dropdown span,
		div.menuAdmin div.dropdown div.dropdown-content,
		div.menuAdmin div.dropdown div.dropdown-content p {
			display: none;
			width: 100% !important;
		}
	}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class=menuAdmin src='http://www.wesleyanagceu.com.br/_imgs/btn-menu.png' >

<div class=menuAdmin>
	<img class=menuAdmin src='http://www.wesleyanagceu.com.br/_imgs/btn-close.png' >
	<div class=dropdown>
		<span id=home>Home</span>
	</div><!--
	--><div class=dropdown>
		<span id=celulaVolta>Célula</span>
	</div><!--
	--><div class=dropdown>
		<span>Cadastros</span>
		<div class="dropdown-content">
			<p id='cadastrarMembro'>Membro</p>
			<p id='cadastrarAdministrador'>Administrador</p>
			<p id='cadastrarCeldiva'>Gcéu</p>
			<p id='cadastrarCeldivaMembro'>Membro no Gcéu</p>
			<p id='cadastrarMensagem'>Mensagem</p>
			<p id='cadastrarEstudo'>Estudo</p>
		</div>
	</div><!--
	--><div class=dropdown>
		<span>Edições</span>
		<div class="dropdown-content">
			<p id='alterarMembro'>Membro</p>
			<p id='alterarAdministrador'>Administrador</p>
			<p id='alterarCeldiva'>Gcéu</p>
			<p id='alterarCeldivaMembro'>Membro em Gcéu</p>
			<p id='alterarMensagem'>Mensagem</p>
			<p id='alterarEstudo'>Estudo</p>
		</div>
	</div><!--
	--><div class=dropdown>
		<span class=last-child>Lançamentos e Relatórios</span>
		<div class="dropdown-content">
			<p id='lancarReuniaoCeldiva'>Reunião no Gcéu</p>
			<p id='relatorio'>Relatórios</p>
			<p id='email'>E-mails</p>
		</div>
	</div>
</div>

3
  • Oi, obrigado pela aula. Mas ainda tem um problema. Quando passo o mouse, as opçoes se abrem para aqule item de menu beleza. Mas quando você deixa (mouseleave e escolhe outro ítem de menu, às vezes, o item que voce deixou continua abertas as suas opços porem perde o style. Verifica aí, e às vezes fixam os 3 menus abertos] 28/03/2019 às 20:13
  • Fiz uma alteração no jQuery, agora usando .hover()... testando aqui não detectei os menus ficarem abertos ao mesmo tempo. Veja se agora isso ainda acontece. Quando aos estilos do menu, era só tirar o :hover no CSS que afetava os <p>.
    – Meu ovo
    28/03/2019 às 20:23
  • muito obrigado! 28/03/2019 às 21:25

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 .