if i make a hover over my menulinks currently all submenues which are on the first level will be shown
i dont know whats wrong, see my code:
$('#menu li').hover(function () {
//show its submenu
$('ul', this).slideDown(100);
}, function () {
//hide its submenu
$('ul', this).slideUp(100);
});
so in my opinion it must work very well because a hover over a link should only display this first submenu. But also the submenu of this first link will show directly by a hover and i dont know how to fix it better than yet.
need some help please.
For a better understanging i hve created a fiddle here.
Your selector in your hover functions are finding all ul elements that are descendants of the li element. You want to show only direct children. Try this instead:
$('#menu li').hover(function() {
//show its submenu
$(this).children('ul').slideDown(100);
}, function() {
//hide its submenu
$(this).children('ul').slideUp(100);
});
The <ul> which is holding your submenus also contains the sub-submenus. So if you display the first list, it automatically also shows all elements contained in that list.
you should separate the ul for different levels of submenu using different class for different levels of menus.
if you want to just change your code you might want to try this change:
//show its submenu
$('ul', this).eq(0).slideDown(100);
You need to specify the list you want to show. Use $(this) as context to find the <ul> inside, and then filter the result with the :first pseudo-selector.
Try something like this for both hoverIn and hoverOut events:
$("#menu").on('hover', 'li', function(e){
// $(this) refers to the <li> being hovered
$(this).find('ul:first').slideToggle(100);
});
See the docs for on() and slideToggle() methods.
Related
I am creating a menu with two dropdowns. I need the dropdowns to open when the menu item is hovered over, but close if the other menu item is hovered over.
The problem I am having is getting the first dropdown to close if I hover over the second menu item.
Please see my fiddle here: http://www.bootply.com/uEKWCdNj4C
I've looked through other questions, and this one seems to possibly be of use, but I'm having trouble applying it to my situation: Vertical Menu to stay open on hover then close when another is hovered
So I apologize if this is a duplicate...any help would be appreciated. Thanks!
You can call slideup on the open ul before calling slidedown on the current one. like below
$(document).ready(function () {
$(".nav-basic").hover(function () {
$('ul.menu-applied').slideUp('medium');
$('ul.menu-basic').slideDown('medium');
});
$('ul.menu-basic').bind('mouseleave', function(){
$('ul.menu-basic').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
$('ul.menu-applied').bind('mouseleave', function(){
$('ul.menu-applied').slideUp('medium');
});
});
You just needed to update your script to call the slideUp function:
$(".nav-basic").hover(function () {
$('ul.menu-basic').slideDown('medium');
$('ul.menu-applied').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
Your code could use some optimization, but you could basically call slideUp() on all other $(.menu-interior') elements that are not of the target class:
Example: $('.menu-interior:not(.menu-basic)').slideUp();
See forked fiddle here: http://www.bootply.com/DZxktgUtjh
Note: This will close ANY other open menu, rather than having to hard-code all other classes when the menu grows.
So set an class="isHovered" on the element that is hovered.
Set the boxes class="isHovered" aswell ..
If hover is called again , or lets say mouseenter, you check if isHovered is set on the current box and on the other box ... or iterate over any boxes there might be ...
You could aswell store the currently hovered element id in a variable and the box id. Then use these values. As JS is not multithreaded you can rely on the order of execution ...
$(document).ready(function() {
$(".nav-basic").hover(function() {
$('ul.menu-basic').slideToggle('medium');
});
$(".nav-applied").hover(function() {
$('ul.menu-applied').slideToggle('medium');
});
});
I have a little problem here, and if someone could help me, I will truly appreciate.
I have a menu that opens when I click on a div, and once open, I want to close the menu clicking again on te same div. The problem is that I can open the menu but I can't close it.
Here is my code:
<script>
$(document).ready(function () {
$("#menuResp").click(function () {
$('#profile_menu').css('margin-left','0px');
$('#menuResp').css('margin-left','315px');
$('#menuResp').attr('id', 'menuResp2')
});
$("#menuResp2").click(function () {
$('#profile_menu').css('margin-left','-300px');
$('#menuResp2').css('margin-left','0px');
$('#menuResp2').attr('id', 'menuResp')
});
});
</script>
<div id="menuResp">
<ul id="menuRespCss">
<li class="icon-css">
<a>Menu</a>
</li>
</ul>
</div>
Anyone have an idea of why this doesn't work?
What your code is doing is setting callbacks at the moment, when the initial DOM is being built. Of course, there is no #menuResp2 yet. Insdead, set the callback on the document element (or body, or some other parent element), specifying the selector of your menu - this element will fire the event. This will work:
$(document).ready(function () {
$(document).on('click', "#menuResp", function () {
$('#profile_menu').css('margin-left','0px');
$('#menuResp').css('margin-left','315px');
$('#menuResp').attr('id', 'menuResp2')
}).on('click', "#menuResp2", function () {
$('#profile_menu').css('margin-left','-300px');
$('#menuResp2').css('margin-left','0px');
$('#menuResp2').attr('id', 'menuResp')
});
});
But. I would stroungly recommend not to change the ID attribute, but to work with classes instead.
you need to add the click handler like this
$(document).on('click', '#menuResp', function(){
$('#profile_menu').css('margin-left','0px');
$('#menuResp').css('margin-left','315px');
$('#menuResp').attr('id', 'menuResp2');
});
.click() only works for elements that are already created, using .on() will cover elements that will be created later.
you should really be identifying the element by class though , and using .addClass() and .removeClass() like the comment suggest
just use toggle. if the item is closed, it will open, if its open, it will close. all the answers above do not check to see if the item is open already or not.
$(document).on("click", function(e){
e.preventDefault();
$('#menuResp').toggle();
$("##menuResp2").toggle();
})
easier would be to give element a single class and just toggle once on class name, rather than changing the ID of the item, this second item would not have an avent binding added to it. But at the same time. You dont need the ID when you can just toggle with class. like so:
$(".clasname").toggle();
this will open any element that is closed with the class of clasname. this will also, at the same time, close all elements that have that class name, and are also open
I'm using the following JS to show and hive a responsive-specific menu. Basically, when an h4 is clicked, a list with my my within #secondary-navigation slides down. I'm using this menu on a page with page anchors, so I'd like the menu to slideUp when one of the menu items is clicked. How would I go about accomplishing this with my code below? Thanks for any help.
<script>
(function($) {
$(function() {
var header = $('h4', '#secondary-navigation');
header.click(function() {
if($(this).next().is(':hidden')) {
$(this).next().slideDown('fast');
} else {
$(this).next().slideUp('fast');
}
});
});
})(jQuery);
</script><!-- end mobile nav -->
Edit: I misread your question at first. You need to add a second function that triggers when one of the menu children is clicked. That's a separate event.
Assuming your menu items are wrapped in a div or ul with an id of #menu:
$('#menu a').click(function() {
$('#menu').slideUp('fast');
});
Add this as a separate function, outside of the one you posted above.
Does anyone know how I can expand on the function at the moment, so that when one navigation is open, when the user clicks to open the other navigation, the navigation which is open presently collapses?
Please find the code below;
http://jsfiddle.net/N7xgC/
What you're currently doing is toggling the display of all elements with the sub class, so clicking on any link will display all of the sub menus. Instead, you want to hide all of the elements with the class sub that aren't a sibling of the link being clicked on, and then toggle only the element with the class sub that is a sibling of the link being clicked on.
$(document).ready(function() {
$('.main > li > a').click(function() {
var sibling = $(this).siblings('.sub'); // select the <ul> to exclude
$('.sub').not(sibling).hide(); // hide everything except that element
sibling.toggle(); // toggle that element
});
});
Updated jsFiddle
Updated your jsFiddle http://jsfiddle.net/N7xgC/6/
$(document).ready(function()
{
$('.main > li > a').click(function(event)
{
$('.main > li > ul').hide();
$(this).next().show();
});
});
Like this?
http://jsfiddle.net/foxbunny/N7xgC/10/
EDIT: A bit of a cleanup, with single click handler:
http://jsfiddle.net/foxbunny/N7xgC/11/
I'm having trouble creating a tab navigation menu. When I hover a navigation item I want to drop down a list with sub-links. I'm using the jquery child() function to display the sub-links of the tab I hover.
Demo: http://jsfiddle.net/GeKv2/5/
When you hover a sub-link it appears to add a class active to it. What am I doing wrong here?..
$('ul.user_menu li').hover(function() {
//show active tab
$(this).addClass("active");
$("ul", $(this)).show();
}, function() {
$(this).removeClass("active");
$("ul", $(this)).hide();
});
You can achieve the same effect using only CSS and the :hover selector.
Take a look here: http://jsfiddle.net/xfBcn/1/