25 Creative jQuery Navigation Menu Examples

Posted on 26. Feb, 2012 by carl in Inspiration

jQuery framework has been a hot topic these few years in web design and development. JQuery is a lightweight, cross-browser compliant, and extremely powerful Javascript framework. Navigation menus have really important role in any website. Among lots of other things, it can help you building gorgeous and usable navigation menus. With jQuery you can bring together both the creative and usable.

That’s why I am present You 25 really good jquery navigation menu examples for every need. I hope you will enjoy this wonderful showcase.

Lavalamp for jQuery Lovers

Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library.

Lavalamp for jQuery Lovers

Animated JQuery menu

Among other things, JQuery is very useful for an easy manipulation of the CSS background-position property. This tutorial is a perfect example to illustrate that possibility. Althought this menu is not, in my opinion, the best looking of this article, it has always be a client’s favorite.

Animated JQuery menu

CSS Mac Dock Menu

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom. This CSS dock menu is perfect to add on to my iTheme.

CSS Mac Dock Menu

Designing the digg Header

The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be.

Designing the digg Header

Apple menu, improved

Who doesn’t like the look and feel of the Apple website? One year ago, we released a nice tutorial to help you recreating Apple’s website menu. This new tutorial, provided by Kriesi.at, will teach you how to recreate Apple’s menu, and even better, how to enhance it it using JQuery.

Apple menu, improved

Kwicks for jQuery

Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.

Kwicks for jQuery

jQuery CSS Drop Down Menu

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit.

jQuery CSS Drop Down Menu

How to Make a Smooth Animated Menu with jQuery

The menu has such a smooth animation because of a thing called “easing”. Adobe’s definition in the Flash Developer Center is a little more complete.

How to Make a Smooth Animated Menu with jQuery

jQuery (mb)Menu

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component will get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

jQuery (mb)Menu

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect … but we’ll do it in jQuery!

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Sliding Jquery Menu

You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

Sliding Jquery Menu

Create a nice looking floating menu with jquery easing

we are about to learn how to create a floating menu. Yes, a floating effect using jquery.easing, animate top value and a png image. What it does is, on mouse over, the menu item will float, and on mouse out, it will sink. Very simple, but it looks really attractive.

Create a nice looking floating menu with jquery easing

Vertical Flyout JavaScript Menu

This animated JavaScript flyout menu is clean and lightweight at only 1.6kb. The script is based on the post a few weeks ago of a horizontal dropdown menu. The markup is the same so visit the horizontal menu post for details.

Vertical Flyout JavaScript Menu

Menumatic Mootools

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

Menumatic Mootools

Create Vimeo-like top navigation

I really like the top navigation implemented on Vimeo.com. First time I saw it I wanted to recreate it. And this is exactly what I am going to do in this tutorial. What I like the most is the menu that drops down when you hover search box. It offers you different search options that you can choose and narrow your search.

Create Vimeo-like top navigation

jQuery Horizontal Tooltips menu tutorials

we have gone through How to make a Lava Lamp Menu Tutorial, now, we’re doing something a little bit similar – Tooltips menu.

jQuery Horizontal Tooltips menu tutorials

Using jQuery for Background Image Animations

I already talked about how great JQuery is for animating background using the background-position CSS property. This article is very great to improve your skills in that domain.

Using jQuery for Background Image Animations

jQuery convertion: Garagedoor effect using Javascript

For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!

jQuery convertion

Multilevel Dropdown Menu with CSS and Improve it via jQuery

Some of you might have noticed, I have a partiality for sleek menus. As I recently had to create a multi level dropdown menu for one of my customers, I wanted to improve it with a little bit of jQuery, but couldn’t find a script that accomplished what I needed.

Multilevel Dropdown Menu with CSS and Improve it via jQuery

jQUery Flipping Menu Tutorial

Sometimes, simplicity is the most beautiful thing. This tutorial uses images and jQuery animate plus backgroundPosition Plugin to make the flipping/rotating effect. This will be a simple tutorial and I believe it has a great potential to become something really creative.

jQUery Flipping Menu Tutorial

Sliding JavaScript Menu Highlight 1kb

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below.

Sliding JavaScript Menu Highlight 1kb

Floating menu jQuery&CSS

For all of us who deal with long web pages and need to scroll to the top for the menu, here’s a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.

Floating menu jQuery&CSS

Create A Keypress Navigation Using jQuery

The key to a succesful website is the ease with which a user finds what they are looking for. Thus, it’s worth spending a lot of time and effort in creating both useful and visually appealing navigation systems. Lately, I have began experimenting with new ways to navigate a website.

Create A Keypress Navigation Using jQuery

Puffer Fish Navigation

We’ve seen countless tutorials and knockoffs for the old Dragon Interactive navigation, but none of them quite get it right and most of them are way off—so we thought we’d set the record straight.

Puffer Fish Navigation

UvumiTools Dropdown Menu

The UvumiTools Dropdown Menu is the menu featured on this website. It is a very simple multi-level menu built from an HTML unorderd list, using Mootools Javascript Framework. We needed a simple and lightweight menu that can be easily updated by simply editing a <ul> HTML element.

UvumiTools Dropdown Menu

Tags: jquery navigation menu