Responsive menu doesn't close even after browser resize
Question
Here's my code: HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Responsive Menu</title>
<link rel="stylesheet" href="css/colors.css"/>
<link rel="stylesheet" href="css/font-awesome.css"/>
</head>
<body>
<header id="topbar">
<p>Some title</p>
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<div class="nav-trigger">
<span><i class="fa fa-bars fa-2x"></i></span>
</div>
<nav class="mobile-menu-enabler">
<span></span>
</nav>
</header>
<nav class="mobile-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<!-- Begin main sample site content -->
<div id="wrapper">
<p>Lorem ipsum dolor set amet...</p>
</div>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS:
body {
font-family: "Ludica Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}
p {
margin: 0;
padding: 0;
display: inline-block;
}
header {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
top: 0;
left: 0;
background-color: azure;
border: 1px solid black;
width: 100%;
}
/* Begin Menu Code */
.menu {
display: inline-block;
float: right;
}
.menu ul {
list-style: none;
margin: 5px 0;
}
.menu ul:last-child {
margin-right: 10px;
}
.menu ul li {
display: inline-block;
margin: 0 2px;
padding: 0;
border: 1px solid black;
}
.menu ul li a {
text-decoration: none;
color: black;
padding: 3px;
}
.menu ul li>:hover {
background-color:black;
color: white;
}
/* End Menu Code */
/* Mobile Menu Begin */
.mobile-menu-enabler {
display: none;
background-color: aqua;
}
.mobile-menu {
display: none;
position: relative;
top: 38px;
width: 100%;
border-top: 1px solid black;
}
.mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu ul li {
margin: 0;
padding: 0;
border: 1px solid black;
border-top: 1px solid transparent;
text-align: center;
}
.mobile-menu ul li a {
margin: 0;
padding: 0;
text-decoration: none;
color: black;
}
.mobile-menu ul li:hover {
background-color: darkkhaki;
}
/* Mobile Menu End */
/* Mobile Trigger Button */
.nav-trigger {
display: none;
text-transform: uppercase;
color: black;
background-color: transparent;
margin-right: 10px;
padding: 0;
text-align: center;
}
.nav-trigger:hover {
color: red;
background-color: transparent;
}
/* End Mobile Trigger Button */
/* Dummy wrapper stuff */
#wrapper {
clear: both;
display: inline-block;
position: relative;
}
/* End Dummy wrapper stuff */
@media screen and (max-width: 900px) {
.menu {
display: none;
}
.mobile-menu-enabler {
display: block;
}
.nav-trigger {
display: inline-block;
float: right;
}
/*.mobile-menu {*/
/*display: block;*/
/*}*/
}
JavaScript:
$(document).ready(function(){ // Begin document ready function
var headerHeight = $("#topbar").height();
$(".nav-trigger").click(function() {
$(".mobile-menu").slideToggle(400)
});
$(".mobile-menu").css("top", headerHeight);
$("#wrapper").css("top", headerHeight);
}); // End document ready function
When the page loads I have a top header bar which contains dummy links. When the browser width is shrunk below the breakpoint at 900px the responsive menu kicks in, at this point upon clicking on the "3 bars icon" the dropdown menu appears as expected.
However, if I were to resize the screen back to full size without first closing the drop down menu, it continues to stay even after the browser is fully expanded.
How can I make the drop-down menu to automatically "untoggle" at the point of growing wider than the breakpoint of 900px?
Thanks
EDIT: Screenshots:
Here's how I'd like it to behave: callmenick.com/lab-demos/10-simple-responsive-navigation When the mobile navigation is fully expanded, it automatically slides up once the browser window is expanded
3 answers
solution1
1 ACCPTED 2015-02-03 15:43:10
Since you're using Javascript to toggle the display when you click that menu bar icon, it pretty much nullifies the 'display' css for .mobile-menu to some extent (since it is changing the style after the css has already loaded). So you'll need to toggle the UL display value (child), and not the .mobile-menu (parent). That way the responsive .mobile-menu css stays in tact... I believe this is what that example site you mentioned does.
<nav class="mobile-menu">
<ul class="mobile-menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
keep css for .mobile-menu as display: none on large screens, and display:block for smaller. Then for new class ".mobile-menu-items" you can initially set that to display: none, and toggle that with your jQuery:
$('.nav-trigger').click(function(){
$('.mobile-menu-items').slideToggle();
});
Alternatively you could toggle the visibility instead of the display.
$('.nav-trigger').click(function(){
if ( $('.mobile-menu').css('visibility') == 'hidden' )
$('.mobile-menu').css('visibility','visible');
else
$('.mobile-menu').css('visibility','hidden');
});
solution2
0 2015-02-03 14:45:01
updated.extremely crude example. resize
ul{list-style-type:none;} @media screen and (min-width: 500px) { #big li{display:inline-block;width:100px;height:32px;border:1px solid red;} #small{display:none;} } @media screen and (max-width: 500px) { #big{display:none;} #small{display:block;} .smaller{display:none;} #small li:hover~ul{display:block} .smaller:hover{display:block;} }
<ul id="big"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <ul id="small"> <li>home1</li> <ul class="smaller"> <li>3</li> <li>3</li> <li>3</li> <li>3</li> </ul> <li>home2</li><ul class="smaller"> <li>3</li> <li>3</li> <li>3</li> <li>3</li> </ul> </ul>
solution3
0 2015-02-03 14:51:10
If you want to actually retract the mobile menu (and not just hide it in CSS) when the window gets too wide, try this :
var $window = $(window), // caching the objects for performance $mobileMenu = $(".mobile-menu"); $window.resize(function(){ if( $window.width() > 900) $mobileMenu.slideUp(); })
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.