85 Ultimate jQuery Navigation and Menu Plugins for Web Developers
jQuery Navigation and Plugins are the most important tools in the web designing and website navigation. These tools helps you to make your website look better, it also helps you to keep you webpage neat, usable and creative. These free plugins bring a new look to your webpage and you can perform many wanted tasks and this also makes your website look fantastic.
Think of your website/webpage extremely user-friendly and usable, this enhances user’s preference of your over other websites over the web. These different jQuery navigation and plugins that are completely free improve your navigation in the website. The user can navigate to their desired page in just single click and this thus impresses the user and leaves a positive impact on him. This also makes him visit your website over and over to fetch all the requirements he has that are available on your website.
These free plugins available can provide you with drop down lists to slide out menus. Think of which plugins might improve your website view and go for it. We are completely assured you will add a new taste to your website with just few clicks. Try something new and experience the change. Look for all you want because we have 85 free options for you, choose the best pick what you need.
These 85 Ultimate jQuery Navigation and Menu Plugins for Web Developers have been posted for your use. Hope they might come in handy and help you with your Web-Development.
Following are some more related articles that you may like to browse through:
- 50 jQuery Plugins for a Beautiful Website
- 27 jQuery slideshow and gallery plugins
- 30 Handy jQuery Plugins for Drag And Drop
- 10 Useful AutoComplete Search Scripts
It’s our pleasure that we have a platform to share our collections with you. We promise you that we will try our best to deliver the best possible resources.
Use them and comment if you like the post and Likes/Tweets are always welcome.
jquery.mb.verticalSlider let you show long list of elements managing pagination, it can work with elements already in the DOM of your page or loading them via ajax when needed. And it works with mouse wheel of course.
Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It’s a good “space-saver” and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure for this tabbed interface.
3). Drop Menu
With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview. Or you can create a login panel in your drop down like I did in the live preview.
- Create dropdown menus
- Horizontal and vertical menus
- Supports div dropdown
- 3 examples dropdown menus included
- 3 dropdown animations
- use different anim for open and close
- Graceful degradation
- Customizable through css
- Works in all browsers
- Custom animations
- Show on top of flash content
4). Fly Slideshow
Fly SlideShow is a jQuery Slideshow script to present images as an automatic slideshow with nice “FLY” effect. Images fly from left to right with fade.
- direct navigation (you can jump to any slide by clicking dots at top-right corner)
- prev/next controls
- image decriptions (it gets them from alt tag)
- 0nly 5kb size
jQuery extension to mimic OSX Finder column view (loading via ajax).
This is a jQuery (1.4 as of writing) extension for mimicing the OSX Finder column behavior.
Blast Slider is a jQuery plugin to create sliders, carousels, rotators with crazy animation effect – slide explodes into particles and then collapses to a new slide!
- Driven by xml or arrays
- 3D Transition Effects (support in Safari)
- Easy to setup
- Slide show controls
- Easy customization
- Compatible with IOS mobile safari
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.
12). jQuery Gestures
13). 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.
14). jQuery Menu Selector
This plugin makes menu items active by location path.
FloatMenu is a simple menu with customizable movement directions. It requires no external libraries and works with all major browsers.
- JS and CSS files
- Preview page
- 14 icons
17). Sliding Jquery Menu
Hi there welcome to another tutorial, in this tutorial il show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.
This lightweight and easy to use jQuery Pageswitch Plugin allows you to easily add site-animations to your navigation.
A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate.
21). CSS Mac Dock Menu
If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page.
22). Slide Down Menu
we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.
23). Kwicks for jQuery
Welcome to the Kwicks for jQuery home page. 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. Please check out the examples to see it in action. Thank you for visiting!
Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques.
Smart Cart 2 is a flexible and feature rich jQuery plug-in for shopping cart. It makes the add-to-cart section of online shopping much easy and user friendly. It is compact in design, very easy to implement and only minimal HTML required.
Latest Version: 2.0
Previous Version: 0.95
The more I learn about jQuery, the more natural it feels. Probably because of how closely tied to CSS it is. From a design perspective, the syntax for jQuery is:
Recently, I created a Flyout Ribbon using jQuery and CSS3 that I would like to share with you today. My original idea for this came from the desire have a web administration panel for every page on my site, so i could edit content, change menu’s, etc directly on the page I was working on. I really wanted something unobtrusive to the flow of my page and something with a bit of sex appeal, so naturally I turned to jQuery and CSS3. I also wanted something that I show and hide easily.
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:
This is a synchronous and an asynchronous library to communicate with a server application with almost zero configuration
Source : Download : Visit Site
The base for this tutorial is simple CSS drop down menu based on unordered list. The structure is visually described in the image below:
31). TN34 Facets
- Clean & Valid Markup
- (before open, after open, before close, after close)
Demo1 : Demo2 : Demo3 : Demo4 : Free Download v1.1 and v1.2
32). 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!
33). Keyboard Links
I’ve been knocking around the idea of this plugin for a while, its not revolutionary or anything, but it was a fun little project to work on, so when I got a few hours spare I decided to have a look into it.
34). Context Menu Class
ContextMenu.js is a very easy to use utility that lets you add custom right click menus to any HTML element on your website!
- The menu will never overflow the viewport
- Allows multiple elements to use the same menu
- Adding/Removing items
- Disabling/Enabling items
- Allows showing small icons to the left of each item
This widget-esq script is at once both a news ticker and a mini accordion. It takes a config file of data (headlines, image SRCs, URLs etc) and paginates your headlines into folds. It will optionally auto-rotate through these folds, though you can navigate between them with the numeric tabs at the top right. If an item has ‘more info’ data set in the config, then clicking the headline will reveal that data in an accordion fashion. See below for an example.
I have always been fascinated by the visual clarity of the London Underground map. Given the number of cities that have adopted this mapping approach for their own subway systems, clearly this is a popular opinion. At a conference some years back, I saw a poster for the Yahoo! Developer Services. They had taken the concept of a subway map and applied it to create a YDN Metro Map.
37). Coda Slider ( all version avlaible )
Makes headers for sections in lists sticky. Known from the iPhone OS tables views.
I created a jQuery plugin for practice and because I thought it would be a fairly good idea. Headerlinks dynamically and automatically (and quickly) creates an organized table-of-contents list anywhere you want on the page in any style.The headerlinks plugin (if you are using JS) is what is making the nice table-of-contents block at the top of this page. I have no doubt that it is the greatest thing ever made.
40). 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 possiblities.
Sliding Tabs is a jQuery plugin for creating horizontal and/or vertical animated tabs for your website. You can have multiple instances of the tabs on a single page and customize them in any way with CSS . The plugin comes with many customization options, making it very flexible and easy to customize to your needs.
All WZ widgets act as jQuery Plugins. They work on the principle similar to ‘Early Designing and Late Binding’. The content inside the widgets can be rendered using HTML & text, so they are SEO-Friendly. Please follow the steps below to see how the splitter works.
Demo1 : Demo2 : Demo3 : Visit Site
In a recent web project, I needed to build an automatic pagination for end-users, which automatically fetches more content when the user scrolls the page. Examples of this are the Facebook log and the shoe browsing on http://www.mirapodo.de/herrenschuhe/ (not affiliated with us). When the user gets to the end of the page, it fetches more content. This way, you don’t have to load more than neccesary on the first page load, and the user benefits, since she doesn’t have to click numbers in a pagination widget. The result is the jquery.esn.autobrowse.js jQuery plugin which does that for any page.
The Panoscoper plugin is made to take any object (including embedded video objects) and wrap them as though they were 360° virtual environments. It has extensive options and can be customized to suit most applications, but is still being heavily developed.
This Mega Drop Down Menu Complete Set is perfect for creating unique menus by using one of the 10+ jQuery effects and one of the 13 color variants.
Based on a custom grid, this menu allows you to organize your content into columns (from 1 up to 12) with a lot of typography examples such as headings, lists, images styling, tables, form elements, etc.
jCrumb is a JQuery plugin for instantly adding breadcrumbs to any webpage without the need to worry about sitemaps, or server side languages. Just add the plugin to every page you want breadcrumbs on initialize and your done. Can be also be styled with JQuery UI.
Demo : Download : Source : Visit Plugin Page
Five different ways, how to create background image animations using jquery – very live effect.
50). Facebook Menu System
This menu it’s based on the same idea used on facebook web site. The menu system work only with the UL html tag, no other tags are used, you have only to create a simple menu like this:
- Technology: jQuery, HTML, CSS
- Difficulty: Intermediate
- Completion Time: 1-2 hours
53). Menumatic Mootools
jQuery plugin (2KB) that allows you to create an unordered list as an animated circle.
Super menu pack is a collection of 10 cool menus, 5 in pure css and 5 using jQuery framework for customize or layout with your websites or applications and projects.
56). Ninja UI
Today I finally found the courage to go and try jQuery. After getting some people say: “You should use jQuery instead of scriptaculous.” I began thinking. What is the reason I choose script.aculo.us again? Must have been something I read in that time.
58). jQuery Scroller
With jQuery Scroller you can create easily smart scrolling text, news ticker, or image animations with few lines of code in jQuery!
59). Fisheye Menu
Fisheye Menu is an expanding menu based on the MacOSX doc.
- Image swaps between small/large image to avoid the browser just squishing a big image.
- Image type and size is customizable on the top of the .js file.
jOrbital is a solution for building circular menus. It’s purpose is to group elements with similar functionality ( like social buttons ) into one hoverable button.
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.
62). Image Hover Move
Image Hover Move- simple and practical navigation or featured image jQuery plugin.
63). Mootools Demo Redux
Learning jQuery 1.3 Book CoverI recently finished reading Learning jQuery 1.3 written by Jonathan Chaffer and Karl Swedberg, and while this version is merely a rewrite of an earlier edition, my review will be based on the book as a whole and will not compare differences. If you’re looking looking for that, try this review.
Dynamic menu with scrolling color glide followed, appropriate for personal entertainment blog and website which requires newfashioned style and personalization.
This is yet another accordion script, except you don’t have to click to open one item, you just move your mouse over it.
68). Slider Menu
Slider menu was inspired by the so many flash menus out there that were smooth and nice looking. The menu colors and styles come from CSS for the reason of reusability and simplicities sake. It can be used as the main navigation, or as what I originally made it for a sub page menu system.
I have written a jQuery plugin that supports infinite level of unordered lists. It is easy to implement, and has been tested in Internet Explorer 6+, Firefox, Safari, and Chrome.
This is a jQuery plugin that makes a beautiful sliding menu with pictures.
- Set default menu item open.
- Leave active menu item open.
- Remember active menu item using cookies.
- Use debug function.
This plugin generate a dice like a rubik cube. You can use it for navigation, categorize or want you want.
I wrote a new, small, JQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery (if you dont want any js on your page, just get the css).
Dropp is a jQuery plugin which replaces regular droprown menus ( <select> elements ) with stylable alternatives.
74). Pretty Pie Menu
Should work with Firefox and Chrome at least. Requires jQuery 1.4.x and jQueryUI 1.8.x
jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus. Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown). The markup of the menu is pretty clean as it makes use of nested lists. The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.
This is an unobtrusive jQuery plugin to put those cool little Google Gmail type ‘Select All/Select None’ action menus at the top of a list of check boxes.
77). Hyjack Select
This jQuery plugin replaces the traditional html select control with an improved or “hijacked” version. To begin, try exploring the various Hyjack HTML select examples. Notice, you may now type to search for available drop down items! Please feel free to discover the demos, expand on current ideas, or just drop us a note! Documenation can be found in code behind and through google code or at our jQuery plugin page!
This is a configurable context menu, it works in three ways: right click, hold down, hover.Callback is executed with parameter e, the menu action event object normalized by jQuery, and el, the element associated with the menu. Menu is an ul with position absolute, menu element are li with .hover class added on mouse over.
The jQuery Content Panel Switcher is a simple, very lightweight jQuery plugin that allows smooth transitioning of content in and out of panels located anywhere on the page. You can have single or multiple content switching panels on a single page Content panels can be either span or div elements, and the buttons used to switch the content can be just about anything, so long as they have the right clases assigned.
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.
jQCloud is a jQuery plugin that builds neat and pure HTML + CSS word clouds and tag clouds that are actually shaped like a cloud (otherwise, why should we call them ‘word clouds’?).
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. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.