Browser gets stuck in media query
I created a script here to illustrate the problem, which is as follows:
I have a menu for desktop and mobile, mobile activates at 480px or lower, if you open the violin, resize the window until the hamburger icon appears, click Run, click hamburger, and then click any link. The menu is crumbling as it should be.
If you resize the window to full width, the menu text is missing because the 480px media query has a display: none of the ul elements so that the menu doesn't show up all the time in mobile mode.
Am I missing something? If the browser doesn't detect it to full width and therefore ignores the media query and revert to the default display: inline for the ul element?
This also happens on small devices between portrait and landscape modes, which is really my problem.
Any help is of course appreciated.
UPDATE
I have a new script here that almost works correctly, the rest of the problem remains on resize back to full width, clicking on the link (ul) causes the menu to move, but this should only happen below 480px. Again any help would be appreciated.
Thanks to Chandra Shekhar for some of the script used in this updated fiddle.
<nav>
<a class="fa fa-bars"></a>
<ul class="menu">
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</nav>
nav {
width:100%;
position:fixed;
top:0;
text-align:center;
z-index:100;
background:grey;
padding:10px 0;
}
nav ul {
list-style:none;
margin:0;
padding:0;
}
nav ul li {
display:inline;
padding:0 12px;
}
.fa-bars {
display:none;
}
@media only screen and (max-width:480px) {
nav ul {
width:100%;
position:absolute;
top:37px;
display:none;
}
nav ul li {
display:block;
border-top:1px solid #868686;
background:grey;
padding:10px;
}
nav ul li a {
padding:12px 18px;
}
nav ul li:first-child {
border-top:none;
}
.fa-bars {
display:inline;
}
$(document).ready(function () {
if ( $(window).width() > 480) {}
else {
$(".fa-bars").click(function (event) {
event.stopPropagation();
$(".menu").slideToggle("slow");
});
$(document).click(function () {
$(".menu").slideUp("slow");
});
}
});
You can only add below js:
you are already using slidetoggle then you don't need to link.
See Screenshot Demo
JS:
$(document).ready(function () {
if ( $(window).width() > 480) {}
else {
$(".fa-bars").click(function (event) {
event.stopPropagation();
$(".menu").slideToggle("slow");
});
}
});
source to share
The method slideToggle()
creates a problem. As per the jQuery docs, the method slideToggle()
animates the element's height property. When it height
reaches 0
after the hide animation, the style property is display
set to none
.
This is why the links are not visible.
Give this script a Try
Js
$(document).ready(function (){
$(".fa-bars").on('click',function(){
$(".menu").slideToggle("slow");
});
//
$(window).resize(function(){
if($(this).width()>480)
{
$(".menu").show();
}
});
});
I used a function here window.resize
to show you. As far as I know, it won't be necessary to use this feature.
Hope it helps
source to share
$(document).ready(function () {
if ( $(window).width() > 480) {}
else {
$(".fa-bars").click(function (event) {
event.stopPropagation();
$(".menu").slideToggle("slow");
});
$(document).click(function () {
$(".menu").toggle("slow");
});
}
});
nav {
width:100%;
position:fixed;
top:0;
text-align:center;
z-index:100;
background:grey;
padding:10px 0;
}
nav ul {
list-style:none;
margin:0;
padding:0;
}
nav ul li {
display:inline;
padding:0 12px;
}
.fa-bars {
display:none;
}
@media only screen and (max-width:480px) {
nav ul {
width:100%;
position:absolute;
top:37px;
display:none;
}
nav ul li {
display:block;
border-top:1px solid #868686;
background:grey;
padding:10px;
}
nav ul li a {
padding:12px 18px;
}
nav ul li:first-child {
border-top:none;
}
.fa-bars {
display:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav>
<a class="fa fa-bars"></a>
<ul class="menu">
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</nav>
source to share