Geek Answers Handbook

JQuery div not showing when switch is closed

I seem to have a weird problem with responsive CSS and jQuery

  • When the window size changes to 600 pixels
  • Press hr (icon) to display Nav
  • After hr is clicked again to hide the navigation and the window is resized, the navigator will not be visible

if nav is visible, then a resized> 600px nav remains visible everywhere.

Is the problem with jquery code?

CODE HERE: https://jsfiddle.net/ag3tdeqe/

HTML:

<div class="container"> <div class="leftmenu"> <div class="logo"> <img src="http://callmenick.com/theme/callmenick/img/logo.svg" alt="" /> </div> <div class="icon"> <hr/> <hr/> <hr/> </div> <div class="social"> <span class="fa fa-facebook"></span> <span class="fa fa-instagram"></span> <span class="fa fa-twitter"></span> <span class="fa fa-youtube"></span> <span class="fa fa-vine"></span> <span class="fa fa-tumblr"></span> <span class="fa fa-google-plus"></span> <span class="fa fa-linkedin"></span> </div> <div class="nav"> <ul class="navigation"> <li> <a class="scroll" href="#home">Home</a> </li> <li> <a class="scroll" href="#videos">Videos</a> </li> <li> <a class="scroll" href="#gallery">Gallery</a> </li> <li> <a class="scroll" href="#about">About</a> </li> <li> <a class="scroll" href="#contact">Contact</a> </li> </ul> </div> </div> </div> </div>

CSS:

 html, body { margin:0 auto; height: 100%; } .container { margin-left: 250px; height: 100%; } .leftmenu { float:left; width:250px; margin-left: -250px; background-color: #28aadc; position: fixed; height: 100%; overflow: auto; } .logo { display: block; width: 60px; text-align: center; margin:0 auto; margin-top: 30px; margin-bottom: 0px; height: 60px; -webkit-transition: .3s; transition: transform .3s; } .leftmenu .nav { position: relative; height: auto; padding-bottom: 60px; margin-top: -30px; } .leftmenu .nav ul { height: auto; width: auto; text-align: center; } .leftmenu .nav ul li { width: 100%; } .leftmenu .nav ul li > a { text-align: center; margin:0 auto; margin-top: 15px; width:80%; display: block; text-decoration: none; color:#00648c; font-family:'arkhip'; font-size: 15px; padding:5px; } .leftmenu .nav ul li > a:hover { color:white; } @media screen and (max-width:767px) { .container { margin-left: 0px; } .leftmenu { width: 100%; margin-left: 0px; float:none; position:relative; height:80px; } .leftmenu > h1 { font-size: 80%; } .leftmenu .nav { display: block; width: 90%; padding:0px; margin-top: -35px; margin-right: 10px; } .leftmenu .logo { margin:0 auto; margin-top: 10px; margin-left: 20px; float:left; } .leftmenu .nav ul li { width:100px; display: inline-block; } .leftmenu .nav ul li > a { width:20px; margin:0 auto; } } @media screen and (max-width:600px) { .leftmenu { max-height: 80px; overflow: visible; margin-top: -10px; } .icon { display: block; width: 30px; float: right; margin:0 auto; padding:5px 10px 5px 10px; margin-right: 30px; margin-top: 20px; } .icon hr { width:40px; border:2px solid white; margin:0 auto; } .icon hr:not(:nth-of-type(1)) { margin-top: 10px; } .icon:hover { cursor: pointer; } .leftmenu .nav { display: none; position: absolute; left:0px; right:0px; float:none; margin:0 auto; width: 95%; margin-bottom: 10px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.6); top:80px; padding-top: 10px; background-color: white; border-bottom: 1px solid #28aadc; border-left: 1px solid #28aadc; border-right: 1px solid #28aadc } .leftmenu .nav ul li { display: block; margin:0 auto; } .leftmenu .nav ul li:hover a { color:black; } }

JQUERY:

 $(".icon").click(function() { $(".leftmenu .nav").toggle(); }); $(".leftmenu .nav ul li > a").click(function() { $(".icon:visible").click(); });
+5
source share
2 answers

Line

 $(".leftmenu .nav").toggle();

adds

 display: none

to your menu after a second click on the icon to hide it.

To remove it, use the following:

 $(window).resize(function() { $(".leftmenu .nav").css("display", ""); });
+3
source

To trigger an event handler remotely, you use trigger() .

$('.icon:visible').trigger('click');

+2
source

More articles:


All Articles