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);
});
});
Related
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");
I have a navigation menu which the style of the elements change if i click on them..they get the class "active".
I have a dropdown Menu in my navigation, how can i make it that the drop down title get the class and not only the elements at the dropdown. Here my page.
Here is the code for the navigation:
$('#content').children('section').not('#home').hide();
$('.active:has(a.anavigation-element)').not('.navbar-brand').not('#home').removeClass('active');
$(".a").click(function(e){
var $this = $(this);
e.preventDefault();
if ($(this).hasClass('navigation-element')){
var $target = $('#' + $(this).attr('href')).stop(true, true);
var $secs = $('#content > section').not($target).stop(true, true).filter(':visible');
if ($secs.length) {
$('.active:has(a.navigation-element)').not('.navbar-brand').removeClass('active');
$this.not('.navbar-brand').parent().addClass('active');
$secs.fadeOut(function () {
$target.fadeIn();
});
} else {
$this.not('.navbar-brand').parent().addClass('active');
$target.fadeIn();
}
} else if ($(this).hasClass('hide')){
$(this).parent().fadeOut();
}
});
Thank you for helping me!
Hello i have created a multi level navigation in magento. Now i have a problem with the opening and closing of my menu. I want my menu to close the "active" Top Menu when the other Top Menu is clicked.
I cant seem to get this part correct.
Javascript:
jQuery(document).ready(function(jQuery) {
jQuery(".sub_category").hide();
jQuery(".sub_sub_category").hide();
jQuery('#product-nav li a').click(function () {
jQuery('#product-nav li a').removeClass('active');
jQuery(this).addClass('active');
});
jQuery('ul li.expanded a').each(function(i){
var subUl = jQuery(this).parent().find('ul'); //Get the sub ul.
jQuery(this).bind('click',function(e){
// Prevent the default action of the link
subUl.toggle();
}) ;
});
jQuery(".head_child").click(function(e) {
e.preventDefault();
});
jQuery('li:has(ul) > a').click(function(e) {
e.preventDefault();
});
var url = window.location.toString();
jQuery('ul li.expanded a').each(function(){
var myHref= jQuery(this).attr('href');
var subUl = jQuery(this).parent().find('ul'); //Get the sub ul.
if( url.match(myHref)) {
jQuery(this).addClass('activeElement')
subUl.toggle();
}
});
});
Please see my jsfiddle for the example of my code.
http://jsfiddle.net/wvEcF/1/
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;
}
Ok i have this drop down menu script. It works fine when all the clicking takes place on the menu itself but when i click off of the menu the drop down does not close. I want the menus to close if the user clicks somewhere on the screen that is not the actual menu.
I have tried adding the code:
document.onclick = ddMenu_close;
But then this makes the menu never open because it is calling "open" through the function but then closing it right away because it then calls the onclick ddMenu_close. My script is below:
<script type="text/javascript">
function ddMenu() {
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function ddMenu_open(e)
{
ddMenu_close();
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
}
}
function ddMenu_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }
function ddMenu_timer()
{ closetimer = window.setTimeout(ddMenu_close, timeout); }
function ddMenu_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#ddMenu > li').bind('click', ddMenu_open);
$('#ddMenu li ul').bind('click', ddMenu_timer);
});
}
</script>
So i need to add something to this script that will close the drop down when the ducument or window is clicked but not interferer with the clicking on the menu or the drop down. Thank you for any help.
In ddMenu_open () for $(document) binding click event trigger ddMenu_close ().
In ddMenu_close () cancel $(document) of the click event.
this is the example:
http://jsfiddle.net/bEPvP/