Where am I going wrong?
I have html
below
<script type="text/javascript" src="_global/_funcoes/_js/jquery-2.1.4.min.js"></script>
<button class="menuAbrir"><img src="_img/btn-menu.png" width="50px;" title="Abrir Menu" /></button>
<nav class="menuNav">
<a class="menuFechar"><img src="_img/btn-close.png" width="30px;" title="Abrir Menu" /></a><br>
<ul class="menuUlTopo">
<li class="menuTopo"><a href="principal.php" title="Principal">Principal</a></li>
<li class="menuTopo"><a href="administradoresMenu.php" title="Administradores">Administradores</a></li>
<li class="menuTopo"><a href="clientesMenu.php" title="Clientes">Clientes</a></li>
<li class="menuTopo"><a href="imoveisMenu.php" title="Imóveis">Imóveis</a></li>
<li class="menuTopo"><a href="tiposMenu.php" title="Tipos de Imóveis">Tipos de Imóveis</a></li>
<li class="menuTopo"><a href="emails.php?acao=listar" title="E-mails">E-mails</a></li>
</ul>
</nav>
<script>
$(document).ready(function(e){
$(".menuAbrir").click(function() {
$(".menuNav").show();
$(".menuFechar").show();
});
$(".menuFechar").click(function() {
$(".menuNav").hide();
$(".menuAbrir").show();
});
});
</script>
The idea here is that when you get to the resolution of 320px
x 480px
and only up to it, a button appears. Until then, okay.
The problem now is that there is <button class="menuAbrir">
and <nav class="menuNav">
I am not able to position botão
in top:0
and left:0
and nor <nav class="menuNav">
in top 0
.
But I can design <nav class="menuNav">
as 100% of the screen by width, but heigth does not.
Here is css
:
.menuAbrir {
display:none;
}
.menuNav {
display:block;
}
.menuFechar {
display:none;
}
@media (max-width: 320px) {
.menuAbrir {
display:block;
width:60px;
height:60px;
top:0;
}
.menuNav {
display:none;
position:fixed;
top: 0;
left:0;
width: 100%;
height:100%;
}
ul li.menuTopo a {
width: 320px;
height: 480px;
}
.menuFechar {
float:right;
cursor:pointer;
}
}
Where am I going wrong?