Forums

kgscott284

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...

mbilalawan

Hi,

From my prespective the html structure of the menu should be as follow:

<ul>
	 <li><a href="#">home</a></li>
	 <li><a href="#">about</a>
	 	 <ul class="sub">
	 	 	 <li>Sub nav 01</li>
	 	 	 <li>Sub nav 01</li>
	 	 </ul>
	 </li>
	 <li><a href="#">products</a>
	 	 <ul class="sub">
	 	 	 <li>Sub nav 01</li>
	 	 	 <li>Sub nav 01</li>
	 	 </ul>
	 </li>
</ul>

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.com

kgscott284

omg, hahaha i totally didnt even catch that...I completely forgot to nest to list..lmao, thanks so much man...i actually learned a lot from the updated jquery as well.

mattgoucher

If 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
    }
);

kgscott284

Nice thanks a lot, how would i go about keeping it clean but fading out when the mouse leaves either the parent menu item or the subnav itself without having the stacking issue?

mattgoucher

I 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.


<nav id="nav">
	<ul>
		<li id="home">
			<span>Home</span>
			<ul id="subnav-home">
				<li><a href="#">About Item 1</a></li>
				<li><a href="#">About Item 2</a></li>
				<li><a href="#">About Item 3</a></li>
			</ul>
		</li>
		<li id="about">
			<a href="#" class="about-us menu-item">
				<span>About Us</span>
			</a>
		</li>
		<li id="products">
			<a href="#" class="menu-item">
				<span>Products &amp; Services</span>
			</a>
		</li>
	</ul>
</nav>

treehouse : what would you like to learn today?

Forums

[Solved] Desperate for some simple jQuery help :(