The following nav I'm building works just fine, however I noticed that when click outside the nav buttons but still inside <nav> container the open dropdown doesn't close as it should however it does close when click outside <nav>.
How can that be? Thank you for your help.
See Demo here
JQuery
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if (menu.hasClass('active')) {
menu.removeClass('active');
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
}
You have to change your container, something like:
var container = $("nav .top-bar-section ul");
Related
$(document).click(function (event) {
if ($("#sidenav").width() != 0) {
$("#sidenav").css({ 'width': '0' });
}
});
$("#sidenav").click(function (e) {
e.stopPropagation();
return false;
});
$("#navHome").click(function () {
$("#navHome").attr("href", "/public/templates/default/index.html");
$("#sidenav").css({ 'width': '0' });
});
1) The $(document).click(function (event) function closes the nav bar if user click anywhere outside the navbar
2) The $("#sidenav").click(function (e) function prevents nav bar from closing if user click anywhere inside the navbar
3) Now because of the e.stopPropagation(); in the second function, when I click on the navHome it did close the navBar but didn't take me to the index page. In other words, $("#navHome").attr("href","/public/templates/default/index.html"); doesn't work.
Is there a work around for this? Thanks!
Do not cancel the click if the target is a link
$("#sidenav").click(function (e) {
if(!$(e.target).closest("a").length) {
e.stopPropagation();
return false;
}
});
I have a sidebar with a few submenu's. I want only one submenu to be active at the time. So if a submenu is active and you select an other submenu the first one needs to close.
this is my jquery so far:
$('.sb-toggle-submenu').off('click').on('click', function () {
$submenu = $(this).parent().children('.sb-submenu');
$(this).add($submenu).toggleClass('sb-submenu-active');
if ($submenu.hasClass('sb-submenu-active')) {
$submenu.slideDown(200);
} else {
$submenu.slideUp(200);
}
});
Also have a JSFiddle
I home someone can fix this for me. I'm new to jquery an javascript but trying to learn.
http://jsfiddle.net/r3fSC/8/
Here you go
$('.sb-toggle-submenu').off('click').on('click', function () {
console.log($('.sb-submenu-active'));
if ($(this).is('.sb-submenu-active')) {
$(this).removeClass('sb-submenu-active').parent().children('.sb-submenu').slideUp(200);
} else {
$('.sb-submenu-active').removeClass('sb-submenu-active').parent().children('.sb-submenu').slideUp(200);
$(this).addClass('sb-submenu-active').parent().children('.sb-submenu').slideDown(200);
}
});
Fiddle: http://jsfiddle.net/s3ag4/
$('.sb-toggle-submenu').off('click').on('click', function () {
var $button = $(this);
var $submenu = $button.next( '.sb-submenu' );
$button.toggleClass('sb-submenu-active');
// Detect and close other menus
$( '.sb-submenu-active' )
.not( $button )
.removeClass('sb-submenu-active')
.next( '.sb-submenu' )
.slideUp(200);
if ( $button.hasClass('sb-submenu-active') ) {
$submenu.slideDown(200);
} else {
$submenu.slideUp(200);
}
});
This is the code and this is the result: you can see test the menu by clicking inside.
$(document).ready(function () {
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next();
$subs.not(submenu).hide()
submenu.toggle(500);
$("#menu-2").slideToggle(300);
});
var $subs = $links.next(); });
The problem is that if I click on the menu it appears the submenu, but if I don't close the submenu that I have open and I open another voice in the menu it doesn't work properly.
If I click another .menu-item a when #menu-2 is open what happens? The script close and open another submenu correctly but my #menu-2 close only close. And then if I close .menu-item a so... #menu-2 open. How can I do to fix?
Try
$(document).ready(function () {
var $menu2 = $("#menu-2");
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next();
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
});
var $subs = $links.next();
});
I think you could simplify what you're trying to do with something along these lines (untested):
$(function () {
var menuItems = $('#menu-menu-1 > li');
var submenus = $('ul', menuItems)
menuItems.click(function () {
submenus.slideUp(); // Hide all menus to their default hidden state
var submenu = $('ul', $(this)); // Show the child menu for the clicked menu
submenu.toggle(500);
});
});
At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});
On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}
My document click function isn't hiding my menu when I click the document outside of my menu. When I click the img it shows the menu and when I click the img again it hides it but when I document click I want it to hide the menu does any one know what I'm doing wrong and how to make it work.
var visible = false;
var id = $(this).attr('id');
$(document).not('#' + id + ' div:eq(1)').click(function () {
if (visible) {
$('.dropdownlist .menu').hide();
visible = false;
}
});
$(this).find('div:eq(1)').click(function (e) {
var menu = $(this).parent().find('.menu');
if (!visible) {
menu.show();
visible = true;
} else if (visible) {
menu.hide();
visible = false;
}
menu.css({ 'left': $(this).position().left + $(this).width() - menu.find('ul').width(),
'top': $(this).position().top + $(this).height() });
})
I had a similar problem and solved it with the following code:
$("body").mouseup(function(){
if (visible) {
$('.dropdownlist .menu').hide();
visible = false;
}
});
instead of your $(document).not(.. code.
//add event.stopPropagation() when the user clicks on a .menu element
$('.menu').on('click', function (event) {
//.stopPropagation() will stop the event from bubbling up to the document
event.stopPropagation();
});
//add the click event handler to the image that will open/close .menu elements
$('img').on('click', function (event) {
//we call .stopPropagation() again here so the document won't receive this event
event.stopPropagation();
//cache .menu element
var $div = $('.menu');
//this if statement determines if the .menu should be shown or hidden, in my example I'm animating its top property
if ($div.css('top') == '-50px') {
$div.stop().animate({top : 0}, 250);
} else {
$div.stop().animate({top : '-50px'}, 150);
}
});
//add click event handler to the document to close the .menu
$(document).on('click', function () {
$('div').stop().animate({top : '-50px'}, 150);
});
jsfiddle: http://jsfiddle.net/jasper/n5C9w/1/