Home › Forums › JavaScript › Desperate for some simple jQuery help :(
- This topic is empty.
-
AuthorPosts
-
November 22, 2011 at 1:33 pm #35286kgscott284Participant
I’ve been messing with jQuery for a couple weeks and am trying to make a simple menu with a horizontal sub navigation that fades in and out…I ran into a couple issues:
1. I can’t get the sub menus to hide at the appropriate time.
a. Either they hide when i mouse over the subnav links, or they dont hide unless i call fadeOut/hide for the element in question in an event on another element.2. I am getting some stacking issues if i move from one item to another to quickly.
I guess what i need is some direction, i tried reading some literature on the subject to no avail…
so, i decided to restart with some help from the pros, here is the fiddle: http://jsfiddle.net/W9mKZ/11/thanks in advance guys/girls!
edit: i am on my 11th revision…still no real progress…
November 23, 2011 at 1:38 am #91156mbilalawanMemberHi,
From my prespective the html structure of the menu should be as follow:
using above markup would have made your life easy. so only having hover() for the li would have done the trick but as per your current structure I have updated the fiddle. see if it works for your.
http://jsfiddle.net/createlogic/W9mKZ/17/
Regards,
Bilal Awan
w: http://uipress.comNovember 26, 2011 at 7:10 am #91333mattgoucherMemberIf you wanted to make your navigation menu more dynamic, you could do something like this. In my example, I’m grabbing the subnav ID by connecting it with the parent element’s ID. If you do something like this, your code will be alot leaner, and you will be able to add new navigation menu items without having to write anymore javascript.
I forked your gist as an example too.
http://jsfiddle.net/mattgoucher/eFmc4/
$('#nav li').hover(
function(){
var subMenu = $('#subnav-' + $(this).attr('id'));
subMenu
.fadeIn(500)
.siblings('div')
.hide();
},
function(){
// Nothing To Do
}
);
November 27, 2011 at 12:39 pm #91373mattgoucherMemberI would personally nest the drop down’s inside the parent. If you did it that way, you can check to see if the user is hover on the nav element at all. Once their off the nav element, you obviously would fade accordingly.
-Matt.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.