We love jQuery! And one of the things its being used a LOT for at the moment is some lovely animated navigation elements.

We used to see some navigation elements designed in Flash – but now that it isn’t supported on any Apple mobile devices you’d have to be a complete lunatic to develop navigation elements in Flash (we recently started a discussion about this on LinkedIn which ran and ran!)

Adobe has cottoned on to this and has recently launched a preview of a new product – Edge – which animates using HTML5, jQuery and CSS3
Read our thoughts on Adobe Edge

Anyway – just as it looked like we would never be able to animate navigation elements of our sites again – along come HTML5, CSS3 and jQuery to save the day. Hurrah! Check out this lovely sliding jQuery menu on Fresh Egg’s new homepage

So – how’s it done then? There’s LOADS of jQuery navigation bar tutorials out there on the web, with more being added every day. Some of them are great, but there are a lot to sift through.

So – we’ve saved you the job by providing a list of our Top 10 jQuery Navigation Bar Tutorials below.

Of course – if you want to learn jQuery in depth – come along to our next jQuery course here in Brighton.

Top 10 jQuery Navigation Bar Tutorials

1) Apple Style Menu with Added Animation

This menu bar is in the same style as the Apple website and has a nice clean design, but has been improved with a nice sliding jQuery animation:

Demo | Tutorial

2) Fixed Fade Out Menu

This one’s not that much to look at, but has nice functionality. Menus that remain at the top of the page when you scroll down are useful but can be a bit irritating. This one uses jQuery to fade itself out to a transparent menu that you can access by rolling over it again. We like that!

Demo | Tutorial

3) Animated Pop Out Vertical Menus

A stylish design and a nice smooth animated menu that pops out on rollover. A good combination of form and functionality.

Demo | Tutorial

4) Slick Animated Menu with ‘Rubber Band’ Effect

Another nice smooth animation effect here that would have to have been done with Flash in the past

Demo | Tutorial

5) Animated Menu with Changing Background Image

Love this one – its properly slick! The menu itself animates smoothly and the background changes subtly to reflect what you’ve selected.

Demo | Tutorial

6) Slide-out Drawer Effect

Another Apple inspired one here. The style is quite similar to what you find on the Apple store and support pages, but again there’s a smooth animation effect added.

Demo and Tutorial

7) Animated Rollovers

Animated rollover buttons have been part of our Flash course for a while – but are less used now. Here’s how to achieve the same effect with a jQuery menu

Demo | Tutorial

8) Rolling Animated Circles

Just looks like a normal menu to start with, but roll over the circles and they literally roll! Great effect and still a really useable menu.

Demo | Tutorial

9) Animated Menu with Submenus

We like this as an example of how lots of sub-menu items can be condensed in to a smaller menu that’s both usable and looks stylish with a nice animation.

Demo | Tutorial 

10) Sliding Boxes

This ones a bit like one of those sliding square image puzzles we all used to have as kids! All the boxes break out when you click on them to reveal a new menu.

Demo | Tutorial

Similar posts you may like

Tags

best jquery navigation bar tutorials, best jquery tutorials, jquery dropdowns, jquery navigation bar, jquery navigation bar examples, jquery navigation bar tutorials, jquery tutorials

Share This Post