I am using bootstrap navigation menu with drop downs.On clicking one menu option its sub menus should open-thats done.Now on clicking the other menu dropdown,the previous one should close-thats done too.Now if the Home drop down is open with its sub menus and if i click on the Home dropdown again,it should close.THats what i want.
My code goes as:
<nav class="navbar easy-sidebar" >
<div class="sample">
<ul class="list-unstyled main-menu" ng-repeat="menu5 in indController.newArray">
<li class="dropdown">
<label class="navbar-collapse-btn" data-toggle="collapse" data-target=".{{menu5.mainMenu}}" id="nav-main">
{{menu5.mainMenu}}
<b class="menu-caret"></b>
</label>
<div class="{{menu5.mainMenu}} collapse" ng-repeat="menu1 in menu5.subMenus" >
{{menu1.sub_menu_title}}
</div>
</li>
</ul>
</div>
</nav>
//on clicking one dropdown,the other dd autocloses.
$('.sample').click(function () {
var $target = $($(this).data('target'));
if (!$target.hasClass('in')){
$('.sample .in').removeClass('in').height(0);
}
else{
$('.sample .in').addClass('in').height(0);
}
});
On click remove all classes 'in' or which one makes your menu opened. something like this:
$('.dropdown').on('click', function(){
$('.in').removeClass('in');
// other things..
});
Don't use height in jquery to do this work, better to use classes.
Related
I need a help with mobile menu. I try to find/add some script which close menu after click on menu item. Can anybody help with.
My page is https://www.institut-vz.si/
So When you click on the menu link it's going to the section but the menu is still open. So I need some script it should close after clicking the menu link.
When you click on burger menu, "style" change from display:none to display:block, and menu item get class "inView current_page_item".
Any help please.
<nav id="main-menu" class="menu-header-menu-container">
<ul class="menu menu-toggle-open" style="display: block; overflow: visible;">
<li id="menu-item-16670" class="menu-item">Home</li>
<li id="menu-item-16673" class="menu-item inView current_page_item">Service</li>
<li id="menu-item-16676" class="menu-item">About us</li>
<li id="menu-item-16677" class="menu-item">Contact</li>
</ul>
Also mobile menu have this active JS code:
//Mobile Menu
$("#dt-menu-toggle").click(function( event ){
event.preventDefault();
var $menu = $("nav#main-menu").find("ul.menu:first");
$menu.slideToggle(function(){
$menu.css('overflow' , 'visible');
$menu.toggleClass('menu-toggle-open');
});
var $right = $("nav#main-menu").find("ul.menu-right");
if( $right.length ) {
$right.slideToggle(function(){
$right.css('overflow' , 'visible');
$right.toggleClass('menu-toggle-open');
});
}
});
Add this script in footer.php
jQuery(document).on("click",".menu-item", function(){
jQuery(".menu-item").closest(".menu").removeClass("menu-toggle-open").hide();
});
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
The problem I am running into is that I have this responsive navigation built. I only want it to dropdown when the hamburger icon is clicked, but it will not work if I try targeting it. It only works if I target the entire navbar it is nested in.
Here is a link to a local jsFiddle here
HTML Code
<div class="toggleMenu">
<button type="button" class="navbar-toggle" id="toggle-btn"></button>
</div>
<nav class="level-nav hidden-md">
<ul>
<li>About Me</li>
<li>Pulses</li>
<li>Kudos</li>
<li>Blogs</li>
<li>
Resources <b class="caret"></b>
<div class="level-inner">
<span class="split"></span>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</li>
</ul>
</nav>
JQuery Code
$(document).ready(function(){
var mobileMenu = $(".level-nav li a");
$(mobileMenu).each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
/* Defined variables for main and sub multi-level navigations */
var subNav = $("#toggle-btn");
/* Function that activates the sub-navigation bar to toggle the sibiling which is the .level-nav */
$(subNav).click(function (e){
e.preventDefault();
$(this).siblings(".level-nav").toggle(175, "easeInQuad");
});
});
The button is not a sibling of the navigation, it's wrapped in a DIV that is a sibling of the navigation
$(this).closest('.toggleMenu').siblings(".level-nav").toggle(175, "easeInQuad");
And to use toggle() like that, you'll have to include jQuery UI as well
FIDDLE
I'm trying to figure out one thing, I have a one page website and want hide sub-menus under portfolio when other menu links cliked http://jsfiddle.net/kuuwj/15/
HTML
<ul id="navbar">
<li>Home</li>
<li>Portfolio
<div class="portfolio-apps">
<section id="website">
<span class="button">AAAAAAAAAAAAAAAAAAAAAA</span>
</section>
<section id="gterminal">
<span class="button">BBBBBBBBBBBBBBBBBBBBBB</span>
</section>
<section>
<span class="button">CCCCCCCCCCCCCCCCCCCCCC</span>
</section>
</div>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
JS
$(document).ready(function () {
var portf_apps = $('.portfolio-apps');
portf_apps.hide();
$('#nav-portfolio').click(function() {
portf_apps.show();
});
});
Change your Javascript to this:
$('#navbar > li > a').click(function(){
portf_apps.hide();
});
$('#nav-portfolio').unbind('click').click(function() {
portf_apps.show();
});
Bind another click event to the other navbar elements before the portfolio showing one:
$("#navbar a").on('click', function () {
$(".portfolio-apps").hide();
});
var portf_apps = $('.portfolio-apps');
...
This will cause the portf_apps method to trigger afterwards which will show its children even if it's clicked. I suggest updating this to work with parent-child relationships generally, though.
http://jsfiddle.net/jWujm/
I wrote a dropdown menu with the following structure. It is supposed to drop down on click, and close on click.
Here's the HTML
<ul id="nav" class="nav">
<li>
<a id="menu1" class="menu">MENU 1</a> <!-- top menu -->
<div id="submenu1" class="submenu"> <!-- hidden by default -->
SUBMENU ITEM 1 <!-- submenu item -->
SUBMENU ITEM 2
</div>
</li>
<li>
<a id="menu2" class="menu">MENU 2</a>
<div id="submenu2" class="submenu">
SUBMENU ITEM 1
SUBMENU ITEM 2
SUBMENU ITEM 2
</div>
</li>
</ul>
And that's the JavaScript (using jQuery)
$("#menu1").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu1").toggle(); // open this menu
});
$("#menu2").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu2").toggle(); // open this menu
});
$("#menu3").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu3").toggle(); // open this menu
});
$("#menu4").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu4").toggle(); // open this menu
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("nav"))
$("div.submenu").hide();
});
There is a lot of repetition in the first part of the JS, is there a way to make this shorter, nicer, better?
You should be able to reduce the script to:
$(".nav .menu").click(function() {
$("div.submenu").hide(); // hide all menus
$(this).next().toggle(); // open this menu
});
$(document).click(function(e) {
if (! $(e.target).parents().hasClass("nav"))
$("div.submenu").hide();
});
Yes:
var $submenus = $('.submenu');
$(".menu").click(function(e){
var $menu = $(this).next('.submenu').toggle();
$submenus.not('#' + $menu[0].id).hide();
e.preventDefault();
});
$(document).click(function(e){
if( !$(e.target).closest('.nav').length ) $submenus.hide();
});