I have a simple jquery menu and I am trying to keep the submenu visible if a user hover overs it. so that I can select it if needed. However, when I get off the hover element the submenu will hide. Obviously, that's what I want as long as it's not also hovering over the submenu.
$(document).ready(function () {
$('.mainBar li a').hover(function(){
$(this).next().show() }, function () {
$(this).next().stop().hide()
});
});
http://jsfiddle.net/azxRX/1/
My opinion is to create this menus with css. Anyway i change a bit to this:
$('.sideBar > ul > li').bind('mouseover', openSubMenu);//This line sets it up so that when the mouse is moved over a li in myMenu, the function openSubMenu is called
$('.sideBar > ul > li').bind('mouseout', closeSubMenu);//This do exacly the same with the above but binds on mouseout instead.
function openSubMenu() {
///when the mouse rolls over the list item,
///the function looks for an unordered list within it.
///If one is found, it sets the style property display to block
$(this).find('ul').css('display', 'block');
};
function closeSubMenu() {
///This one does the oposite of openSubMenu function
$(this).find('ul').css('display', 'none');
};
fiddle
You can do this instead:
$(document).ready(function () {
$('.mainBar li').mouseover(function () {
$(this).find('.subBar').show();
console.log('over');
});
$('.mainBar li').mouseout(function () {
$(this).find('.subBar').hide();
});
});
This is the jsfiddle
Related
My current code is this:
$('.how-we-menu').on('click', function() {
$('.how-we-menu > ul').slideDown();
$('.under').on('click', function() {
$('.under > ul').slideDown();
})
$('.over').on('click', function() {
$('.over > ul').slideDown();
})
$('.ar').on('click', function() {
$('.ar > ul').slideDown();
})
$('.fc').on('click', function() {
$(this).children('ul').slideToggle();
})
});
I am trying to avoid slide toggle because it affects another element and slides both of them up so I want to make each element work individually. So when you click ".fc > ul" once it slides down and when you click again it slides up.
I hope this makes sense thanks!
Use $(this) in the function so it only affects the element you clicked on.
$('.fc').on('click', function() {
$(this).children('ul').slideToggle();
});
And all the event handlers should be at top level, not inside another event handler. Since they all do the same thing, you can bind them all at once.
$('.how-we-menu, .under, .over, .ar, .fc').on('click', function() {
$(this).children('ul').slideToggle();
});
My CMS generates menus as lists without any id's and classes. For submenus, there are nested lists.
I made jquery script for expanding submenus:
$(function () {
$(".wrapper ul li").click(function () {
if ($(this).has("ul").length) {
$("a", this).removeAttr('href');
$("ul", this).slideToggle();
}
});
});
My problem is that this script reacts to clicking whole li area and I want it to react to clicking link inside li. Of course I just have to add "a" to selector making it ".wrapper ul li a" but what about condition checking if there is ul nested inside li? And slidetoggle selector. How should I change these?
This might work with minimal modification to your original code.
$(function () {
$(".wrapper ul li a").click(function ()
{
this = $(this).parent();
if ($(this).has("ul").length) {
$("a", this).removeAttr('href');
$("ul", this).slideToggle();
}
}
);
});
Test and see if it works. I have not tested it. Cheers
Can someone help me adapt the following so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another of the top level menu buttons is hovered on?
jsfiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
});
});
Still getting my feet wet with jQuery/script coding.
NOTE: I'm using divs as part of the structure of the dropdown, as in the instance that "ul" above is replaced by a div.
FYI, I can't take credit for the above, it is the work of Pramod Sankar L (user PSL).
Any help would be appreciated!
Try
.mouseleave()
:has()
$(document).ready(function () {
$("li:has(ul)").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
}).mouseleave(function () {
$('li > ul').hide();
});
});
$("li:has(ul)") select li which contains ul
Fiddle Demo
Updated After Op's Comment
$(document).ready(function () {
$("#dropmenu li:has(div)").click(function () {
$('#dropmenu li.second-level > #dropmenu li.second-level div.drop_6col-bottom').not($(this).children("#dropmenu li.second-level div.drop_6col-bottom").toggle()).hide();
}).mouseleave(function () {
$(this).children('div').hide();
});
});
I have menu with 2 submenus. Using jQuery I want to higlight hovered item. I can't solve how to higlight parent item, when cursor is on the child item. For hovering I used class caled active:
.vertical-active {
background:#0F6;
}
Jquery function looks like this:
$(document).ready(function (e) {
$('.submenu a').hover(
function () {
$(this).addClass('vertical-active');
$(this).parent('vertical-links a').addClass('vertical-active');
},
function () {
$(this).removeClass('vertical-active');
$(this).parent('vertical-links a').removeClass('vertical-active');
});
});
Problem is in parent selector, but I don't know how to select submenu's parent item.
JSFiddle link:http://jsfiddle.net/6g9tZ/4/
$(document).ready(function() {
$('.submenu a').on('mouseenter mouseleave', function() {
$(this).add($(this).closest('ul').closest('li').children('a')).toggleClass('vertical-active');
});
});
FIDDLE
EDIT:
to highlight the parent as well, you'd do
$('.vertical-links > li > a').on('mouseenter mouseleave', function() {
$(this).toggleClass('vertical-active')
});
FIDDLE
Use .siblings in addition to .closest.
FIDDLE
$(document).ready(function (e) {
$(".vertical-links > li > a").on("mouseenter mouseleave", function(){
$(this).toggleClass('vertical-active');
});
$('.submenu a').on("mouseenter mouseleave",function () {
$(this).toggleClass('vertical-active');
$(this).closest("ul").siblings("a").toggleClass('vertical-active');
});
});
Replace the relevant parts of your code with:
$(this).parents('li:eq(1)').find("> a").addClass('vertical-active');
....
$(this).parents('li:eq(1)').find("> a").removeClass('vertical-active');
One problem with your code is that you were looking for a "parent <a>", but there is no such thing; the <a> is a child of your parent. So here we search for a parent <li>, not the immediate, but actually the grandparent, find its direct <a> child and highlight it.
Additionally you had parent('vertical-links') which should be parent('.vertical-links') (not the dot: its a class not an element).
I have a menu that when hovered, shows the subnav of the current hovered item by adding .stick to the submenu and removing it on mouseleave. If not hovering on another menu item I want the last hovered menu item to stay open for another 2 seconds before hiding.
Here's what I have. I know that the mouseleave() called on the container won't work since it's within the handlerOut of the ul#main-nav > li hover function but I left it to show you where I last left off.
$('ul#main-nav > li').hover(function() {
var $this = $(this);
clearTimeout(window.menustick);
$this.find('ul.submenu').addClass('stick');
}, function() {
var $this = $(this);
if($this.siblings().hover()) {
$this.find('ul.submenu').removeClass('stick');
} else if ($('#main-nav').mouseleave()) {
window.menustick = setTimeout(function(){
$this.find('ul.submenu').removeClass('stick');
}, 2000);
}
});
Here's the jsFiddle.
Thanks in advance!
JS:
$("ul#main-nav > li").hover(
function(){
$(this).children('ul').hide().fadeIn(500);
},
function () {
$('ul.submenu', this).fadeOut(2000);
});
Fiddle: http://jsfiddle.net/3F7bJ/3/
You had a couple of issues with your scripts and CSS.
Firstly, your CSS had the following rule:
nav ul#main-nav li:hover > ul.submenu {
display: block;
}
This needs to be modified to:
nav ul#main-nav li > ul.submenu.stick {
display: block;
}
This meant that your CSS was controlling the visibility rather than the class 'stick'.
As you mentioned the use of .hover() and .mouseleave() in the script code is incorrect and not required. As at that point you are already in the mouseleave (handlerOut) of the hover.
The below code appears to perform the desired effect you were looking for:
var menuStickTimeoutId;
$('ul#main-nav > li').hover(function () {
var $this = $(this);
clearTimeout(menuStickTimeoutId);
$('#main-nav ul.submenu').removeClass('stick');
$this.find('ul.submenu').addClass('stick');
}, function () {
var $this = $(this);
clearTimeout(menuStickTimeoutId);
menuStickTimeoutId = setTimeout(function () {
$this.find('ul.submenu').removeClass('stick');
}, 2000);
});
Working demo:
http://jsfiddle.net/3F7bJ/2/