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