How to Build and Enhance a 3-Level Navigation Menu

Great tutorial! :P I was going over your lava lamp tut and I was wondering how would I be able to add the lava effect to this drop menu or vica versa. Ive tried everything but cant seem to make the drop-downs follow the buttons I hover over.

Any help would be appreciated. Thanx

How can i make the navigation bar hight lower, its too high for my web site design.

Thanks!

damn…i’m speechless…:(

HI, i would like to make the top tier link to stay active when i select it or any of the sub links.
If anyone can help it would be great. I separated the top and subs with classes.

I am sure all i need is to target the class, but i am not sure what line of code i need to add.
Any help would be appreciated.

Thanks for the tutorial btw :)

Hi Jeffrey, could you please answer my question?

This was a really great tutorial, first video from Jeff that I’ve watched and it was superb – I learned a lot, thanks!

Question:

I extended the bar to fit right across the screen by setting the width of #nav to 100%, but this leaves me with the nav buttons on the left and the rest of the screen taken up by the ‘bar’, as expected.

Question is, how do I set the nav buttons (the ul list) to be centered on the bar?

Thanks if anyone can help.

Does not work in ie6 when javascript is disabled

Hi Jeffrey, thanks a lot for another great tutorial. I took a similar tutorial from soh-tanaka at one point, but he did things differently than you as I can recall. This approach was very insightful for me.

As with most jquery tutorials I take, I experiment with some of the code to try different things, and so I changed the slide effect to fadeIn and fadeOut.

When I did this and rolled over the bottom li in the initial drop down, it would fade in and then quickly out, the submenu that was hidden.

Everything would still work fine, just that that would happen when hitting the bottom list item. I found it odd to say the least. Any ideas?

Something strange happens with the demo menu [http://nettuts.s3.amazonaws.com/590_menu/menu/index.html], try this and see if you face it too.

In the demo menu navigate to contact -> international, then drag international a bit down. The entire submenu expands one more level repeating ‘American Offices’.

Looks like it needs a bit of fix.

Regards,
~Swathi

Great tutorial, but i think you should explain it with a more variable height and width.

And i just don’t get how to change the colors for each link.

Love the tutorial. One issue. The slidedown function only works once and then in order to get it again I have to refresh. Any Idea how I can fix it. Here’s the js I am using.

var site = function() {
this.navLi = $(‘#nav > li’).children(‘ul’).css(‘display’, ‘none’).end();
this.init();
};

site.prototype = {

init : function() {
this.setMenu();
},

// Enables the slidedown menu, and adds support for IE6

setMenu : function() {

this.navLi.hover(function() {
// mouseover
$(this).find(‘> ul’).stop(true, true).slideDown(500);
}, function() {
// mouseout
$(this).find(‘> ul’).stop(true, true).fadeout(300);
});

}

}

new site();

I followed it from the tutorial. I will take any suggestions which may help this issue. Thanks a million.

Excellent !

This tutorial was awesome!
One problem though. I tried animating the mouseout but I’m having troubles when the page runs. The mouseout works half the time, its very strange.

Anybody run into this or have a fix?