Sexy Drop Down Menu w/ jQuery & CSS

Sexy Drop Down Menu w/ jQuery & CSS
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key × and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

7 in 50 Useful New jQuery Techniques and Tutorials

Slicker Show and Hide

Slicker Show and Hide

110 in 50 Useful New jQuery Techniques and Tutorials

SpriteMenu

SpriteMenu
This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. Instead of trying to manage huge amounts of images, everything is packed into just one file, which means the browser will only have to download one file instead of making multiple requests, and its just a lot easier to manage. The menu is displayed by manipulating the background-position property to display individual sprites in the image. There are no drop-downs attached to the menu, but it shouldn’t be hard to add them in which I may do in the future.

Sprite in 50 Useful New jQuery Techniques and Tutorials

Horizontal Scroll Menu with jQuery Tutorial

Horizontal Scroll Menu with jQuery Tutorial
In this tutorial you will learn how to create a scroll menu. In the final result you will be able to scroll up and down according to mouse-y axis and we’ll use jQuery.color to animate the background-color changes.

83 in 50 Useful New jQuery Techniques and Tutorials

BBC Radio 1 Zoom Tabs

BBC Radio 1 Zoom Tabs
This tutorial explains how to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

Lego in 50 Useful New jQuery Techniques and Tutorials

Make a Mega Drop-Down Menu with jQuery

Make a Mega Drop-Down Menu with jQuery
So how would we go about implementing Mega drop down menus? While it’d be great to do all of this in pure HTML and CSS, it’s impossible at the moment to get those nice half-second delays — and of course there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements. Instead, I’ve whipped up a solution using jQuery and a very nifty plugin called hoverIntent.

Mega in 50 Useful New jQuery Techniques and Tutorials

jQuery Link Nudging

jQuery Link Nudging

jQuery Navigation Menu Tutorial

Create a Floating HTML Menu Using jQuery and CSS

Create a Floating HTML Menu Using jQuery and CSS

jQuery Navigation Menu Tutorial

Build a Tabbed Box with CSS and jQuery

Build a Tabbed Box with CSS and jQuery

jQuery Navigation Menu Tutorial

Animated Menus Using jQuery

Animated Menus Using jQuery

jQuery Navigation Menu Tutorial