Divs do not appear with display: block and rollover effect does not work

Asked

Viewed 172 times

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>

I have 2 difficulties with that code:

A) When click in the image img.menuAdmin, she herself hide as expected, but the div.menuAdmin does not appear.

B) When click in some item of menu, their options open as expected, but the effect of open up rolling does not occur.

css css3

  • That B) this opening effect rolling, I did not understand well.

  • So, here’s how it is: When I step the Mose over a menu item it opens a list of options. Right? But it opens instantaneously. I’d like it to open slowly. Kind of a rollover effect.

1 answer

1


I think with CSS you won’t get this effect rollover because it would have to define a height fixed on the element, that is, if the element had a height fixed, would be possible only with CSS using transition. But you can use the methods .slideDown() and .slideUp() jQuery, who does the same thing with the element regardless of his height.

Just use two events, mouseenter and mouseleave, of the method .hover() in the div:

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

About the menu not showing up, it’s because you didn’t show it in your code (just some child elements that aren’t hidden). In this case, just this code and not the huge one that you put:

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

See it working (note the commented part in the CSS that is not required):

RUN IN FULL SCREEN

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

  • Hi, thanks for the lesson. But there’s still a problem. When I move the mouse, the options open up to this beauty menu item. But when you leave (mouseleave and choose another menu item, sometimes the item you left open still your options but lose the style. Check there, and sometimes set the 3 open menus]

  • I made a change in jQuery, now using .hover()... testing here did not detect the menus stay open at the same time. See if now this still happens. When to menu styles, just take the :hover in the CSS that affected <p>.

  • thank you very much!

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.