Develop Reference

Navigation menu dropdown close on click

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.

Removing active state when toggling between divs

I have created multiple top down menu items. When the links are clicked a div slides down to show some content.
What I am trying to do with these links is toggle between them. When one div is opened an active state is added to the link, when it is closed the active state is removed and the div hidden. When you click between the links I have managed to get them to toggle between each other and the active state is added to the div that is opened.
What I cannot achieve is removing the active state and resetting some css.
Here is my Javascript:
//menu toggle
$(".trigger").click(function() {
var divToToggle = $( $(this).data('target') );
$(".toggle:visible").not(divToToggle).hide();
$(".trigger").not(divToToggle).removeClass('active');
$('.top-nav').css('margin-top', '20px');
divToToggle.slideToggle("fast", "linear");
$(this).toggleClass('active');
$('.top-nav').css('margin-top', '0px');
return false;
});
The .toggle class is on all the divs that are toggled:
<div class="account-container toggle hide"></div>
<div class="collections-container toggle hide"></div>
<div class="search-container toggle hide"></div>
The .trigger class is on all my links:
<ul class="top-nav">
<li><a class="hidden-tablet" href="">home </a></li>
<li><a class="hidden-tablet" href="">about us </a></li>
<li><a class="hidden-tablet" href="">where to buy </a></li>
<li><a class="hidden-tablet" href="">contact us </a></li>
<li class="tablet-menu visible-tablet"><a class="tablet-menu trigger" href="" data-target=".tablet-menu-container">tablet menu</a></li>
<li class="account"><a class="account trigger" href="" data-target=".account-container">account</a></li>
<li class="collection"><a class="collection trigger" href="" data-target=".collections-container">collections</a></li>
<li class="search"><a class="search trigger" href="" data-target=".search-container">search</a></li>
<li class="basket"><a class="basket trigger" href="" data-target=".home-basket-container">basket</a></li>
</ul>

It's hard to say where exactly your code is going wrong, but I've re-written it so it works slightly differently. Your click handler has to handle two possibilities: either we're clicking to hide an existing section, or we're clicking to switch to a new section. But we can also think of this as being two steps, with the second one optional: either we hide an existing section, or we hide an existing section and show a new one.
I've also switched to using ev.preventDefault() to stop the link from firing, named the jQuery variables so they start with $ (which makes them easier to differentiate). You can try it out on jsfiddle here.
$(document).ready(function () {
$(".trigger").click(function (ev) {
ev.preventDefault();
var $clickedLink = $(this);
var $divToToggle = $($(this).data('target'));
var isHideOnly = $clickedLink.hasClass('active');
// Hide the existing div and remove 'active' class.
$(".toggle:visible").hide();
$(".trigger").removeClass('active');
$('.top-nav').css('margin-top', '20px');
// If we're showing a new one, reveal it and set the active class on the link.
if (!isHideOnly) {
$divToToggle.slideToggle("fast", "linear");
$('.top-nav').css('margin-top', '0');
$clickedLink.addClass('active');
}
});
});

Special Drop-Down Menu

I am trying to achieve a simple drop-down menu with the following HTML structure. This structure is mandatory (I think) as explained in the illustrations below.
<nav role="navigation">
<ul id="main-menu" class="nav top-nav clearfix">
<li id="menu-item-1" class="menu-item">Menu 1</li>
<li id="menu-item-2" class="menu-item">Menu 2</li>
<li id="menu-item-3" class="menu-item">Menu 3</li>
</ul>
<ul id="sub-menu-1" class="sub-menu nav clearfix">
<li class="menu-item">Sub Menu 1.1</li>
<li class="menu-item">Sub Menu 1.2</li>
<li class="menu-item"><a href="#">Sub Menu 1.3/a></li>
</ul>
<ul id="sub-menu-2" class="sub-menu nav clearfix">
<li class="menu-item">Sub Menu 2.1</li>
<li class="menu-item">Sub Menu 2.2</li>
<li class="menu-item"><a href="#">Sub Menu 2.3/a></li>
</ul>
</nav>
To get a better idea of what I am trying to achieve I've made the following illustrations:
Simple menu with items arranged with inline blocks. As you can see, the menu scales to 100% of the container and has all the items arranged in center.
When hovering over a menu item which has a submenu. In the illustration that's Menu 1 which has Sub Menu 1 and it needs to display it on mouse hover, like a simple <ul><li><ul></ul></li></ul> would do. As you can see the submenu has to scale to 100% of the container and has all the items arranged in center.
I think the best approach is with javascript (not sure you can do this with only CSS), but I am kind off stuck. The sub menu appears on main menu item hover, but as soon as I hover out into the sub menu in order to navigate, the sub menu disappears. Anyway, this is the javascript:
$('nav #main-menu .menu-item a').hover(
function() {
var id = $(this).parent().attr('id');
id = id.substr(id.length - 1);
submenu = $('#sub-menu-' + id);
submenu.show();
},
function() {
var id = $(this).parent().attr('id');
id = id.substr(id.length - 1);
submenu = $('#sub-menu-' + id);
submenu.hide();
}
);
I am pretty sure that there is a better way to do this.
I've also set up a FIDDLE for better understanding.

//show sub menu when we hover over an item
$('nav #main-menu > .menu-item')
.on('mouseenter', function() {
$('.sub-menu').hide();
var id = $(this).attr('id');
id = id.substr(id.length - 1);
$('#sub-menu-' + id).show();
});
//hide submenu when the mouse goes away
$('nav').on('mouseleave', function() { $('.sub-menu').hide(); });
Modified your fiddle here: http://jsfiddle.net/3z8MR/10/
Edit
Add this line to conform to your specs in the comments
$('.sub-menu').on('mouseleave', function() { $(this).hide(); });

Stopping a SlideUp When link is clicked

So I have this vertical menu that slides down when you click on the parent item to display the children elements and when you click on a child element it takes you to the link.
My problem is that when you click on the link the whole submenu slides up because of the slideToggle function on it - how can I stop the slide up from happening only if a link is clicked?
My Menu:
<ul id="menu-top" class="menu">
<li class="has-submenu">
Portfolio
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Book I
</li>
</ul>
</li>
<li class="has-submenu">
Headshots
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Men
</li>
</ul>
</li>
<li class="regular-link">
Personal Work
</li>
</ul>
JS:
jQuery('#menu-top').children().click(function(e){
var $next = jQuery(this).find('.sub-menu');
var $child =('.active-menu');
$next.stop().slideToggle('slow').toggleClass('active-menu');
jQuery(".sub-menu").not($next, $child).slideUp('slow').removeClass('active-menu');
});
jQuery('.has-submenu > a').click(function(e){
e.preventDefault();
});

Use stopPropagation to prevent the event from bubbling.
jQuery('.submenu a').click(function(e){
e.stopPropagation();
});

To stop the slideToggle menu from sliding up when clicking the ul's children links, you can use the jquery function stopPropogation() on the click event of the link itself.
$(".shop-by-dept ul li a").click(function(e){
e.stopPropagation();
});
This will prevent the slideToggle() action from sliding the menu up, while the browser loads the next page.

Is there a way to simplify this jquery?

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();
});