main topics archive podcast connect
  • Have a suggestion?

  • *
  • *
  • *

REQUIRED READING

Notify Ricardo

When you finish something, notify Ricardo (Executive Editor) via a private DM through Twitter.

Okay Geek Traffic Traffic live stats Twitter activity Facebook Page Image compress app Tips & Guidelines Report a problem
← Previous Clean slate Next →
Saturday
Jul042009

20+ Best, High Quality JQuery Menus | Menu Plugins

jQuery menus are different than other plain ol’ CSS and HTML menus, they bring life to your site. They make your site recognizable, memorable and they ad a touch of (god-forbid) fun to your site for your users. Ranging from accordion and horizontal simple menus to dropdown and even Menus with a Lavalamp effect. Here is our giant list of the Top jQuery Menus.

 

1.jQuery Tabbed Interface Tutorial

Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect. Be sure to check out the demo, you definitely will like it.

Preview || Download

 

2.Animated Menus Using jQuery

Learn how to create this amazing animated effect menu just with plain Xhtml,CSS and Javascript help, similar to Dragon Interactive (dragoninteractive.com).

Preview || Download

 

3. Animated Navigation with CSS and jQuery Tutorial

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether.

Preview || Download

 

4. jQuery ListNav Plugin

This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

Preview || Download

 

5. jqDock menu

Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.

Preview || Download

 

6.Sliding Jquery Menu

This tutorial explains and let you download sliding jquery menu and you can see the effect in action over on the PSDtuts webpage in the top right hand corner.

Preview || Download

 

7. 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.

Preview || Download

 

8.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.

7 Examples || Download

 

9.Jquery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

Preview || Download

 

10.Learning jQuery: Fading Menu

Nice tutorial from CSS-tricks explaining how to use CSS with jQuery, this time he teaches how to use jquery fading options on menu.

Preview || Download

 

11. How to Make a Smooth Animated Menu with jQuery

Ever seen some excellent jQuery navigation that left you wanting to make one of your own? This tutorial teaches how to do just that by building a menu and animate it with some smooth effects.

Preview || Download


12.Create Vimeo-like top navigation

Learn how to create navigation just like on Vimeo site, here is only xhtml,css used, but still I wanted to include this.

Preview + Vimeo site || Download

 

13. jQuery (mb)Menu 2.3

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.

Preview || Download


14. jQuery idTabs

idTabs is a plugin for jQuery. It makes adding tabs into a website super simple. But it can also open the door to endless possibilities.

Preview || Download


15. Create a Slick Tabbed Content Area

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. This is great tutorial explaining to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.

Preview

 

16. LavaLamp for jQuery lovers!

Extremely light weighted Lavalamp menu packaged as a plugin for the amazing jQuery javascript library.

Preview || Download

 

17. Animated Drop Down Menu with jQuery

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.

Preview || Download

 

18. Using jQuery for Background Image Animations

Five different ways, how to create background image animations using jquery – very live effect.

Preview

 

19. How To Create ‘Mootools Homepage’ Inspired Navigation

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 this will be done in jQuery!

Preview || Download

 

20. 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.

Preview Vertical || Preview horizontal || Download


21. jQuery convertion: Garagedoor effect using Javascript

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

Preview || Download

 

22. Fisheye Menu

Fisheye Menu is an expanding menu based on the MacOSX doc.

Download

Discussion Threads

Follow and Subscribe to Okay Geek - We always send our latest articles to Twitter, RSS, Facebook and more, as well as other awesome content we find interesting.

Related Posts Plugin for WordPress, Blogger...