The problem:
I have the following website:
In Resize the browser of 1024x768 the menu works fine.
Now for resolution below 320px , clicking on the retractable menu, ie the figure with the 3 horizontal bars, will open the menu obviously. But if you return to normal size by using the clicar
feature on the browser menu , you should open the normal large page menu to resolutions .
I'm not able to make the common menu appear again.
Only give refresh
on the page.
I have the following jquery for the menu when you change the size of the screens:
// JavaScript Document
$(document).ready(function(e) {
$("div.menuMin img").click(function(){
$("div.menuMin").css("display","none");
$("div.menu")
.css("position","absolute")
.css("display","block")
.css("width","100vw")
.css("height","100%", "!important")
.css("top","0")
.css("left","0")
.css("z-index",100000);
$("div.menu img.mnClose")
.css("position","absolute")
.css("display","block")
.css("top","5px")
.css("right","5px");
$("div.menu ul.menu")
.css("width","100%")
.css("height","100%")
.css("backgroud-color","red")
.css("z-index",100000);
$("div.menu ul.menu li")
.css("width","100%")
.css("display","block","!important");
$("div.menu ul.menu li a")
.css("font-size","12px");
});
$("div.menu img.mnClose").click(function() {
$("div.menu img.mnClose").css("display","none")
$("div.menu").css("display","none")
$("div.menuMin").css("display","block");
});
});
menu.php
<img class="mnClose" src="_img/btn-close.png" />
<ul class="menu">
<li><a href="contato.php">Contatos</a></li>
<li><a href="falecimentos.php">Falecimentos</a></li>
<li><a href="funerplan.php">Funerplan</a></li>
<li><a href="servicos.php">Serviços</a></li>
<li><a href="showroom.php">Show Room</a></li>
<li><a href="sobre.php">Sobre</a></li>
</ul>
<div class="menuMin">
<img src="_img/btn-menu.png" title="Menu"/>
</div>
What to do?