Drop "box" navigation?

[Susie]

If you wanted to find a tutorial on how to make a navigation like what is on the new whitehouse.gov site, what search terms would you use? I've seen this type of navigation elsewhere but I can't find the examples right now. I've also seen this type of layout used on sitemaps where you click on the sitemap link in the upper right corner of the page and the sitemap eases down (jquery?) and the links are arranged in a large box.

 

Help?

[falkencreative]

I'm not sure about the navigation... but the content easing out when you click a link (see the "clients" button in the upper left corner of my site, for example) isn't that difficult.

 

basically, all you have to do is set up your code, include jquery and include something along the lines of this:

 

$(document).read(function() {

$(".sliderbutton").click(function () {
   $(".slider").slideToggle('1000','');
});

});

 

This has a screencast/tutorial that explains things:

http://nettuts.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/

[falkencreative]

This is useful as well:

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

 

The best dropdown menu script I have found is this:

http://users.tpg.com.au/j_birch/plugins/superfish/

 

it uses nested ordered lists, and will still display if javascript is turned off. jQuery just ensures that it works properly in IE6 and adds some effects. I'm not sure if it could be used to create the same style of menu as the whitehouse.gov site... that may have to be custom jquery. Still, shouldn't be too much work. I imagine I could code it if you really needed it.

[falkencreative]

OK, last link... What exactly is it about the Whitehouse.gov dropdown that you like? The fact that it uses two columns of links, instead of one?

 

This will teach you how to animate a basic menu... you would just have to style it in such a way that it has two columns:

 

http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/

[Susie]

Thanks for the links, Ben. Sorry for not being clear - it's the 2 or 3 column drop down that my client likes. It's a custom home builder and in one section, they will have over 20 items in the drop down. When I designed their first site, the length of the drop down was an issue on short pages, so now we want to try the columns to prevent that.

 

I was kind of hoping there would be a script out there. lol I guess I'll have to study the whitehouse site....