How to close responsive menu, click outside of nav - javascript

Hello my problem is that i have a menu a responsive menu with bootstrap i want to close menu on responsive view on desktop its fine but on responsive view i want that when i click outside the nav menu on any area it should be close, my nav code is following
<!-- Navigation -->
<nav id="navigation-sticky" class="white-nav b-shadow">
<!-- Navigation Inner -->
<div class="nav-inner">
<div class="logo">
<!-- Navigation Logo Link -->
<a href="#home" class="scroll">
<!-- Your Logo -->
<img src="" class="site_logo" alt=""/><br>
</a>
</div>
<!-- Mobile Menu Button -->
<a class="mobile-nav-button colored"><i class="fa fa-bars"></i></a>
<!-- Navigation Menu -->
<div class="nav-menu clearfix ">
<ul class="nav uppercase oswald">
<li>home</li>
<li class="dropdown-toggle nav-toggle" ><span href="#about" class="scroll">About App<b data-toggle="dropdown"></b></span>
<!-- DropDown Menu -->
<ul class="dropdown-menu uppercase gray-border clearfix">
<li>HOW DOES IT WORK?</li>
<li>Features</li>
<li>APP FLOW</li>
<li>F.A.Q</li>
</ul>
<!-- End DropDown Menu -->
</li>
<li>Service Types</li>
<li>Cities</li>
<li>Rates
</li>
<li>Download</li>
<li class="dropdown-toggle nav-toggle" ><span aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle scroll">Become a Driver</span>
<!-- DropDown Menu -->
<ul class="dropdown-menu uppercase gray-border clearfix">
<li>Signup</li>
<li>Flyer</li>
</ul>
<!-- End DropDown Menu -->
</li>
<li>login</li>
<li>contact</li>
</ul>
</div><!-- End Navigation Menu -->
</div><!-- End Navigation Inner -->
</nav><!-- End Navigation -->
i use this script to close menu it close menu but menu open by double click not on single click
$('html').click(function() {
$('#menu').hide();
});

I think this might work for you:
$(document).mouseup(function (e)
{
var container = $(".nav-menu");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.css("display","none");
}
});
Updated: Try this
var container = $(".nav-inner div.nav-menu, .mobile-nav-button");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$(".nav-inner div.nav-menu").slideUp();
}

I think this is what you are looking for:
$('html').click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});

Try this:
$( "#menu" ).toggle( "slide" );

Related

How to reveal hidden div on click

I've got a hidden div that successfully slides out on click. However the content inside that div is dependent on which link is clicked and I'm trying to get it to show/hide depending on which link is clicked.
JS Fiddle Here.
All help is greatly appreciated
HTML
<div id="main-nav">
<ul class="list-unstyled">
<li class="sub director-sub">Directors</li>
<li>News</li>
<li class="sub contact-sub">Contact</li>
<li>
<ul class="list-inline social">
<li class="fb"><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-envelope-o" aria-hidden="true"></i></li>
</ul><!-- /.list-inline social -->
</li>
<li class="sparks">
lorem ipsum
</li>
</ul><!-- /.list-unstyled -->
</div><!-- /#main-nav -->
<div id="sub-nav">
<div class="sub-content">
<!--begin directors-->
<div class="directors-subnav">
<h2 style="background:orange;">Directors Sub Nav</h2>
<ul class="list-unstyled">
<li>Lorem ipsum.</li>
<li>Atque, neque.</li>
<li>Omnis, inventore!</li>
<li>Fugit, atque.</li>
<li>Nisi, temporibus.</li>
</ul><!-- /.list-unstyled -->
</div><!-- /.directors-subnav -->
<!--end directors-->
<!--begin Contact-->
<div class="contact-subnav">
<h2 style="background:green;">Contact Sub Nav</h2>
<ul class="list-unstyled">
<li>Lorem ipsum.</li>
<li>Atque, neque.</li>
<li>Omnis, inventore!</li>
<li>Fugit, atque.</li>
<li>Nisi, temporibus.</li>
</ul><!-- /.list-unstyled -->
</div><!-- /.directors-subnav -->
<!--end directors-->
</div><!-- /.sub-content -->
</div><!-- /#subnav -->
JS Here:
$(document).ready(function(){
//get nav container width
var boxWidth = $('#sub-nav').width();
// hide subnav
$('#sub-nav').width(0);
$('.directors-subnav, .contact-subnav').hide();
//set nav width to zero
$('#main-nav li.sub a').click(function(e){
// remove opened class from other links not clicked
$("#main-nav li.sub a").not(this).removeClass('opened');
e.preventDefault();
if($(this).hasClass('opened')){
// slide the box closed
$("#sub-nav").animate({
width: '0' + 'px'
});
} else {
$("#sub-nav").animate({
width: boxWidth + 'px'
});
}
// toggle class so we can animate box based on class
$(this).toggleClass('opened');
/****** show/hide of page specific content******/
if($(this).parent().hasClass('.director-sub')){
// show/hide directors subnav
$('.directors-subnav').toggle();
$console.log('directors clicked');
} else if($(this).parent().hasClass('.contact-sub')) {
// show/hide contaxct sub nav
$('.contact-subnav').toggle();
$console.log('contact clicked');
}
/****** end show/hide of page specific content******/
})
})
You don't need dot in hasClass in lines 34 and 40. It's supposed to be hasClass('director-sub') not hasClass('.director-sub')
This is what you need.
couple of things needed changing.
In both the hasClass function arguments, the class name can not be preceded by a ".".
In the console.log statement, you cant have a $ preceding console.
There was an error in the html as well. in one location (line 14) you need to have target="blank" and not target="blank".
These changes makes the above piece of code work in the fiddle.
Thanks
Paras
/****** show/hide of page specific content******/
if($(this).parent().hasClass('director-sub')){
// show/hide directors subnav
$('.directors-subnav').toggle();
console.log('directors clicked');
} else if($(this).parent().hasClass('contact-sub')) {
// show/hide contaxct sub nav
$('.contact-subnav').toggle();
console.log('contact clicked');
}
/****** end show/hide of page specific content******/
just change it to hasClass('className') from hasClass('.className')

Close responsive menu after click on menu item

I have this custom js code for basic (open/close) menu movement that was great when I used it on multi page websites, but it only closes the menu when you click the menu symbol. Now I need to implement it into a one page website and I need it to close after a user clicks on a menu item. I have very little experience in javascript so I need help solving this problem.
The js:
$(document).ready(function() {
var n = '#nav', no = 'nav-open';
$('#nav-menu').click(function() {
if ($(n).hasClass(no)) {
$(n).animate({height:0},300);
setTimeout(function() {
$(n).removeClass(no).removeAttr('style');
},320);
}
else {
var newH = $(n).css('height','auto').height();
$(n).height(0).animate({height:newH},300);
setTimeout(function() {
$(n).addClass(no).removeAttr('style');
},320);
}
});
});
The HTML:
<!-- Navigation Bar -->
<div class="nav-hold">
<div class="nav-bar">
<img src="images/logo.png" alt="logo" />
Company name
<a id="nav-menu" class="nav-menu-symbol">☰<!-- menu symbol --></a>
<a class="nav-menu">Menu</a>
<ul class="nav-list" id="nav">
<li>Top</li>
<li>About us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
change
$('#nav-menu').click(function() {
if you want that your menu close only by clicking on the li element
$('#nav li').click(function() {
or if you want to close menu with both li and menu icon
$('#nav-menu, #nav li').click(function() {
That's because you only bind the click function to the menu symbol. I'm not sure why you separate the symbol and text, but I would prefer to wrap it in single element. Also you can use jQuery slideToggle() to slide down or up on click. Example:
$(document).ready(function() {
$('#nav-menu').click(function() {
$('#nav').slideToggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-hold">
<div class="nav-bar">
<img src="images/logo.png" alt="logo" />
Company name
<a id="nav-menu" class="nav-menu-symbol">
<span>☰</span>
<span>Menu</span>
</a>
<ul class="nav-list" id="nav">
<li>Top</li>
<li>About us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>

Anchor Point Jumps Instead Of Smooth Scroll

For some reason when i click my logo image which is the same anchor point link as 'Home' on my Nav Menu it jumps instead of smooth scrolling like 'Home' does when it's clicked.
Does anyone know why this is happening & how do i go about correcting this? Thanks in advance :)
<!-- LOGO -->
<div class="logo pull-left">
<img src="images/logo.png" class="logo" alt="">
</div>
<!-- //LOGO -->
<!-- MENU -->
<div class="pull-right">
<nav class="navmenu center">
<ul>
<li class="first active scroll_btn">Home</li>
<li class="scroll_btn">About Us</li>
<li class="scroll_btn">Products</li>
<li class="scroll_btn">Team</li>
<li class="scroll_btn">News</li>
<li class="scroll_btn last">Contact</li>
</ul>
</nav>
</div>
<!-- //MENU -->
Add this to your existing ready function:
$(document).ready(function () {
$(".logo a").click(function (e) {
e.preventDefault();
$('body, html').animate({
scrollTop: 0,
scrollLeft: 0
}, 500);
});
});

Prevent Sub-menu from collapsing after clicking on link (Bootstrap 3.1.1)

My bootstrap menu is as follows (this is the code snippet for one menu-item out of many):
<!-- Code for Navigable menu (mobile) -->
<nav class="navbar navbar-default" role="navigation">
<div class="container commonWidth">
<button type="button" style="width: 100%" class="navbar-toggle" data-toggle="collapse" data-target="#led-collapse">
LED & Lighting <b class="caret"></b>
</button>
<!-- Collect the nav links for toggling -->
<div class="collapse navbar-collapse hidden-sm" id="led-collapse">
<ul class="nav navbar-nav">
<li class="dropdown visible-xs">
LED Lights<b class="caret visible-xs"></b>
<ul class="dropdown-menu">
<li>LED Lamps & Tubes</li>
<li>Downlights, Spotlights & COB</li>
<li>LED Panels</li>
<li>LED Surface</li>
<li>Commercial & Industrial</li>
<li>LED GU10 Fittings</li>
<li>LED Strips</li>
</ul>
</li>
<li class="dropdown visible-xs">
Luminaires (Fittings)<b class="caret visible-xs"></b>
<ul class="dropdown-menu">
<li>Domestic Tube Fittings</li>
<li>Floodlights</li>
</ul>
</li>
</div> <!-- End LED Menu -->
</div> <!-- End commonWidth -->
</nav>
The issue is that immediately after clicking a 3rd level link (.dropdown-menu > li > a), entire 2nd level menu (li class="dropdown visible-xs") collapses. However, I want this to stay open after the 3rd level link is clicked.
Here is the fiddle: http://jsfiddle.net/dk49/ugzwmhm6/
Any Suggestions?
Thanks.
Once the economy link is clicked the click event is getting propagated to its parent, from there it goes to the next parent and so on . when it reaches the third parent, the third parent element is reacting to it by toggling the open class. So if you stop the propagation it will stay as it is.
Try the code below.
$('.dropdown-menu a').click(function(e){
e.stopPropagation();
})
This code will stop the propagation of the anchor tag to its parent
In case if you want to prevent the default click action use
$('.dropdown-menu a').click(function(e){
if($(this).attr('href') == "#" || $(this).attr('href') == "") // New code
e.preventDefault();
e.stopPropagation();
})
Update
I have updated the code to prevent scrolling if the URL is # or if there is no URL. this should serve the purpose

How to repeat fadeItem function?

I have side bar menu with the list of items, when it opened it shows the list of the menu with the fade effect. My question is how can I repeat the effect every time when I click "opener" by the way the fadein works for the first time only.
Here is my code for the effect...
<body>
<div id="st-container" class="st-container">
<div id="main" >
<div class="st-pusher">
<!-- nav menu start -->
<nav class="st-menu st-effect-8" id="menu-8">
<ul>
<li><a class="icon icon-data" href="profile.html"> <div class="icon-menu"><img src="img/user-demo.png" alt="user-picture"></div> Nathen Scott</a></li>
<li><a class="icon icon-data" href="index.html"> <div class="icon-menu"><img src="img/icon-library.png" alt="user-picture"></div> Library</a></li>
<li><a class="icon icon-location" href="#"><div class="icon-menu"> <img src="img/icon-bookstore.png" alt="user-picture"></div> Bookstore</a></li>
<li><a class="icon icon-study" href="#"><div class="icon-menu"> <img src="img/icon-camera.png" alt="user-picture"> </div>Text Capture</a></li>
<li><a class="icon icon-photo" href="#"> <div class="icon-menu"><img src="img/icon-setting.png" alt="user-picture"></div> Setting</a></li>
</ul>
</nav>
<div class="st-content"><!-- this is the wrapper for the content -->
<div id="main"><!-- extra div for emulating position:fixed of the menu -->
<div id="st-trigger-effects" class="tab_bar_index">
<button data-effect="st-effect-8" class="opner"><img src="img/icon-menu.png" alt="icon"></button>
<button class="table_content"><img src="img/icon_setting_small.png" alt="icon"></button>
<div id="titlebar">
<img src="img/logo_text.png" alt-"logo">
<span >Library</span>
</div>
</div>
</div>
</div>
</div>
</div><!-- /main -->
</div>
<!-- fade effect for the nav menu -->
<script type="text/javascript">
function fadeItem() {
$('ul li:hidden:first').stop().hide().delay(50).fadeIn();
$(".st-menu ul li ") .addClass("animate");
}
$('.opner').click(fadeItem);
$('li').hide();
</script>
</body>
Initially hide all the items on click and than use .each to loop through and apply the delay and fade in effect.
function fadeItem() {
// hide menu items
$('.st-menu ul li')stop().hide();
// go through and set each element to fade in
$('.st-menu ul li:hidden').each(function (index, elem) {
$(elem).delay((index + 1) * 50).fadeIn();
});
$(".st-menu ul li").addClass("animate");
}
$('.opner').click(fadeItem);
$('li').hide();

Categories

Resources