19 Aug 2011
The 10 BEST jQuery Navigation Bar Tutorials
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
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 Tutorialsbelow.
Of course - if you want to learn jQuery in depth - come along to our next jQuery course.
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:
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!
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.
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
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.
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.
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
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.
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.
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.