jQuery Menus Plugins

SecretNav is a small jQuery push menu plugin that slides out an off-canvas navigation from the edge of the screen while pushing the main content away with a fancy CSS3 powered 3D perspective effect.

Demo 1 Demo 2

A jQuery plugin that dynamically generates a table of contents. Tocify can be optionally styled with Twitter Bootstrap or jQueryUI Themeroller, and optionally animated with jQuery show/hide effects. Tocify also optionally provides support for smooth scrolling, scroll highlighting, scroll page extending, and forward and back button support.

The easiest way to develop site with multi level navigation and user-friendly experience it has been optimized for mobile devices using HTML5, CSS3 and jQuery.

Features:

• Easy installation
• Multi level on CSS
• Light-weight
• Multiple menus
• Works in mobiles
• Free licensed under MIT

ScrollMenu is a new interface to replace your old boring scrollbar. It gives a user sense of where they are in a page and how long is that section. With a high customizibility of this jQuery plugin you can have a unique user experience.

A responsive navigation menu that stacks items into a dropdown menu when they overflow.

When the user resizes the window the nav will shrink, any overflowing items will be removed from the visible list and get prepended to a list of vertically stacked items that are hidden. The user is notified of this action by a count badge next to a hamburger icon at the end of the menu, which acts as a dropdown trigger button for the hidden list.

ContextMenu.js is a jQuery plugin for creating highly customizable drop down menus triggerable by various mouse events. Use it to create context menus, drop down lists, navigations, and more.

• 9 customizable options
• 7 transition effects
• 3 action hooks
• 4 menu item types
• Various trigger events
• Dynamic event binding
• Custom positioning
• HIDPI ready

If you???re working on an admin panel, chances are you???ll need to design and develop a vertical menu, with plenty of sub-categories. That???s why we decided to share today???s snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project.

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

Create Beautiful MegaMenu navbar for your site. Using CSS3 Animation & Small Java Script It provides a modern app style navigation look in your website.

• Powerfull Feature: One Code for all devices
• Mobile friendly website menu
• Modern app style navigation
• Bootstrap Navbar
• Bootstrap 3 Slide in menu navbar on mobile

This isYet another megamenu for Bootstrap 3 from Twitter. Lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 3. Work for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.

A bold navigation that slides in when active, replacing the current content in a 3D space.To increase the focus on the menu, we pushed the main content along the z-axis (by using CSS transformations we actually scale down the content size, we don???t use 3D translations, but the result is the same).

Intence is a new UX concept and a JavaScript library which reflects the scrolling state in a simple and intuitive manner. It highlights the scrollable area depending on the scrolling amount, thus efficiently explaining to a user what exactly can be scrolled, and is there much to scroll. Intence is suggested as a scrollbar replacament for a general designation of a scrollable area. The library is written in vanilla JavaScript and has no dependencies.

A small (2KB) jQuery plugin that creates a fixed progress indicator based on your content and allows linking between them.

• Fully Responsive and Bootstrap compatible.
• Collapsible sidebar on toggle click. You can also set your custom breakpoints.
• Awesome looks (Available in 5 skins and colors).
• Wide View support. (Full Screen sidebar)
• Vector Icons (font Awesome 4.3.0 included)
• Show on Hover Mode implemented with a single option.
• Fixed Menu variation (Slimscroll Integrated).
• Content Styles. (Shrink, Push and Overlay mode)
• JQUERY UI Animations (Drop, Pulsate, Clip, Explode etc..)
• OFF-CANVAS Ready (Using options)

The easiest way to create a sliding menu with jQuery.You have a div (probably a nav menu or a side bar) that you want to animate with a sliding effect from outside the viewport to inside the viewport.

A hamburger menu for mobile websites. A demo how to create an up-to-date menu for a mobile website in a typical hamburger style.This Template is using only CSS and javascript (jQuery)

A jQuery plugin for managing various kind of content toggling.This library help you create cross-platform and accessible (in the meaning of the W3C) content that can be shown and hidden with triggers.

Bootstrap already takes care of showing the .navbar-toggle when it is on the x-small window size.

I have styled the .navbar-collapse.collapse to be positioned absolute by default. Only in the other media queries am I switching it to relative. Now when someone toggles the .navbar-toggle we are simply adding the .in class and the left css property is being adjusted

A bootstrap mobile menu jQuery plugin for deeply nested menus. Works with Bootstrap 2.3 ??? 3.+ or any markup that meets minimal, customizable requirements.

Chubby fullscreen menu with nice hamburger toggle.

When we write our long posts in our blogs it is a best practice to separate the different topics and subtopics by using heading elements (h1, h2, h3 and so on).

With jQuery In This Post you can do just that, add a awesome navigational bar that show your readers where they are in your post and what is coming next. It also supports comments block, so they can comment to your post as soon as they finish to read it!

A sliding swipe menu that works with touchSwipe library.This plugin uses CSS3 transform property to move the navigation. That???s why it works smoothly.

A blurry menu for all kind of websites. The blur effect is added dynamically and context sensitive to all displayed web-contents like images, texts and even background-images. This script uses existing scripts like html2canvas and Superfast Blur.

A vertical menu for desktop web apps, using bootstrap.

A simple plugin which opens Bootstrap dropdown menus on mouse hover, the proper way. Compatible with every device.

A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin. It is modeled after the mega menu on adobe.com but has been simplified for use by others. An brief explanation of our interaction design choices can be found in a blog post at Mega menu accessibility on adobe.com.

This is a great radial menu jquery plugin to be used in your website or management system.

• Clean and easy implementation;
• Customize each button functionality;
• Set colors and styles to each button;
• Add how many buttons you want;
• Configure size, distance and colors easily;
• Call it from any element you want;

Priority Navigation is a jQuery plugin for creating arbitrarily-prioritized responsive navigation menus.

The main feature that sets it apart from other examples, is that it allows for prioritization ordering independent from menu ordering. Menu item prioritization is managed by applying data-attributes to the elements.

gizmoMenu gives you full design control over your site???s context menu. Just copy and paste one of the HTML menu styles and modify it to your liking. All HTML is exposed ??? allowing you to expand gizmoMenu however you like.

• Lightweight and easy to use
• Copy and Paste approach ??? no lengthy docs!
• DropDown style contextmenu
• Hamburger style contextmenu
• Horizontal style contextmenu
• Includes 6 color presets
• Use any menu you want ??? including MegaMenus!

PriorityNav is a lightweight pure javascript plugin that will move your menu items if they don???t fit its parent.

• No dependencies
• Smart calculation of available space
• Flexible
• Non obstructive menu dropdown
• Callbacks

HOE Navigation Menu consist of both Horizantal and Vertical navigation menu based on CSS3 and Jquery. Its lightweight and compatible with almost all major browsers and devices. It supports four levels sub menu with shrink, Overlay and push effect.

Features:

• Fully Responsive ready for Desktop, Tablets and Mobile
• Multiple Color options
• Bootstrap based
• Options to choose Sidebar Navigation or horizontal navigation

Menupuncher is simple fullscreen navigation plugin for jquery.

Block scroll is a jQuery plugin that turns a set of elements into a blocks and displays them one screen at a time. The idea is to break up your page into chunks for better presentation and user-flow. Block Scroll automatically turns your page responsive.

Think of it as a full-screen off-screen menu on (a)steroids.It is an HTML5/CSS3 responsive solution for using (and making) animated large off-screen menus. It uses CSS transitions that are hardware accelerated and much faster then jQuey animations.

• 20 responsive presets. (Check the live preview button to test them.)
• Browser based Editor with 30 presets.
• Compatible with all HTML5 browsers INCLUDING MOBILE! (IE10+, Chrome, Safari, Opera, Firefox). Tested on iOS and Android.
• Simple usage, include 2 files (css and js) and add literally 2 lines of code.
• requires almost NO change on existing HTML sites.

The jquery faceted taxonomy browser is a simple and intuitive design pattern for browsing hierarchical facets. It is based on a concept called ???Miller Columns???. If you use the Mac OSX Finder application you can see this feature in action.

jQuery Roulette Wheel allows you to convert a canvas in a random selection roulette.

• Allowing to add any number of options, auto-generating a color for each one.
• A callback function is called when an item is selected.
• The spin button is rendered in the center of the wheel, instead of using a <button> element

A responsive menu with transitions and fallback support for older browsers. This menu works sliding down the content with a background mask that adjusts to screen height.

• Responsive
• Works with a mask
• Supports scrollbar if content size is bigger than screen size
• Primarily uses CSS-Transitions and then jQuery as fallback for older browsers.

Layered navigation allows you to easily implement a new navigation system using the jQuery JavaScript library. It combines the presentation into two sections, you won???t need cutting the images into two, an entire section, and through slides at once. It includes CSS3 animations to show the elements, a side menu to show sections and a progress bar indicates the progress along web site. It allows you to include maps and videos in a fast and easy way.

A responsive and easy to customise mega-dropdown component.One example we can all think of is Amazon: infinite categories, each one with its own sub-categories??? that???s why they currently provide an easy-to-access navigation, in the form of a mega-dropdown element on the top-left corner of the page.

• 5 predefined color styles which can be changed easily
• Fontawesome 430+ vector icons
• Responsive design
• Google web fonts
• jQuery changeable plugin options
• Compatible with mobile devices
• Documentation included
• Clean Design and Code
• Easy to use

Nb2Sb (Navbar to Sidebar) is a Bootstrap-only jQuery plug-in that converts your navbar into a sidebar.

jQuery Offcanvas is the easy way to arrange overloaded websites or to design user-friendly mobile navigations.

Set oversized content as off-canvas and let it flow-in, if needed ??? simple.

A mobile first vertical responsive menu using HTML, CSS & JS

Lateralus is a group of menus, to help you build your next website or app.You can choose between normal side menus (right or left) and top menu or push menus (right or left), that push your page to give room to the menu.
Pure HTML & CSS with only some HTML5 & CSS3 benefits, and with the use of simple jQuery script so you can easily customize at your own taste!

An Animated Dropdown Mega Menu a jquery plugin that uses Animate CSS/HoverIntent with CSS only fallback.

• Javascript Based menu with CSS only fallback
• Uses CSS3 animation when available (fallback to js)
• Works in IE7+

jQuery Responsive Menu is a drop-down menu for responsive websites. It is a jQuery plugin that includes a JavaScript file and CSS file as well as sample HTML.

jQuery Menu Plugin With Cool Gooey Effects

• Cool gooey effects using SVG filters
• Six menu styles (spaced/stacked round, horizontal, vertical menus)
• 15+ easily customizable options
• Easy to use event API
• Fully responsive layout
• Support of all modern browsers

A touch slideout navigation menu for your mobile web apps.

Features:

• Dependency-free.
• Simple markup.
• Native scrolling.
• Easy customization.
• CSS transforms & transitions.
• Just 4 Kb!

A collection of fresh button styles and effects for your inspiration. We use CSS transitions and pseudo-elements for most of the effects.

A bold, secondary menu that slides over the main navigation.

This approach can be an alternative to a standard dropdown menu, in particular if you want to emphasise more the sub navigation. Besides you can easily customize the snippet and use the slide in panel for a search box instead, or a login form ??? just to give you a couple of ideas.

Super simple, easy to use off-canvas navigation menu for Bootstrap.It uses Bootstrap classes and markup to create an off-canvas menu that not only looks good. But works perfectly.

Bootstrap menu with submenu option with jQuery.

A full page menu, that replaces the current content by pushing it off the screen with CSS3 and jQuery.

A full-screen navigation, with floating menu items.There are cases when you want to present the user with a choice, with the focus of the web page being the different options. Whether it is a modal navigation, or a list of categories, todays nugget gets you covered!

We used CSS animations and a pinch of jQuery to animate navigation items, and let them bounce in and out the screen.

OpenFooter jQuery is a small script that is used to create the unique responsive footer with power features. With this plugin you can make a footer with many kinds of content (Text, images/photos, videos/iframes???) and you can add content as much as you want. Additionally, this plugin also allow you expand the footer to fullscreen for easier view.

MonoList ??? Plugin for creating navigation by list and by pretty much everything else.Do you have a long list of HTML elements? Would you like to group it by item???s first letter and allow users to easily navigate by it? With MonoList you can do it.

• Easy integration with CSS frameworks
• Set initial letter selection
• Dealing with prefixes
• Multilingual support
• Data navigation
• AJAX support

Multi-level dropdown menu for buttons. Tree dropdown menu with native look and feel, user-defined item rendering and unlimited items and depth.Supports any HTML for items, multiple combined sync/async datasources.

Features:

• Render any HTML content
• Unlimited items and submenus
• Styling matches operating system/browser look
• Optional scrollbar
• Submenus optionally selectable
• Regenerate items every time
• Short and sweet; just over 200 lines of cleanly written code

Dynamic jQuery menu plugin that lets you create beautiful and responsive navigation widgets. Optimal for one-page sites.

Dash is responsive Bootstrap dashboard navbar / menu. This item has two navbars, one for top and the other for left. The mobile swipe feature has been added for mobile devices.

Features:

Auto-hide sticky header is a shot that shoots down two rabbits: makes site navigation easily accessible anywhere on the page and saves content space at the same.

Spark is also delightfully animated, which makes it a memorable element to add to any WordPress website.Spark can be used as your standard menu, a secondary menu, a nifty mobile-only menu, or even utilized as a promotional tool. You can customize all colors, change positioning options, hide the menu button (in which case the sized-down image will act as the menu activator), add any image you???d like, add multi-level accordion menus and so on.We???ve also included a full-screen info pane that can be used to display any extra content you need.

Fixed headers are a must for long pages and menus that need to be seen all the time. The transition between an inline menu and a fixed menu is an added effect that really makes your navigation stand out. I have made two different transition effects: A flip effect and an arrow ribbon effect.

In this quick tutorial we???re going to use jQuery and make a simple sticky navigation. With that done, we???ll improve on our efforts by using jQuery Waypoints to make the effect smoother.

Nowadays almost every ???fresh??? page looks the (s)hame: One page, very content, much scroll. So even though you really hate usability, enhance your design patters by using customer-orientated plugins like this. It was built using the jQuery library.

Features:

• Using the directory-function upgrades the user???s experience
• Customizable trough settings and CSS
• Highly compatible
• Highly customizable
• Uses CSS3 transitions by default

A very common trend these days is the use of a fixed navigation, which shrinks to become less intrusive as the user scrolls down the page. In this tutorial, I???m going to show you how you can achieve this by using ZURBs Foundation Top Bar, some custom sass and jQuery. To top it off we???ll add a couple of media queries to make our menu responsive.

The scroll up bar plugin (jQuery) hides the top bar when scrolling down, and show it when scrolling up. It???s specially useful on mobile interfaces to save some precious space.

A 3D rotating navigation, powered by CSS transformations. Animated elements are key ingredients of the user experience. In this case a 3D menu can???t just be fun. It has to be efficient.

Show side panel by sliding from the left or right of the page.

FooNav.js is a free plugin built on jQuery that let???s you make a simple menu to help users navigate either your site or a single pages content. You can create your own custom menu links or let the plugin crawl your page for headers and build up a simple navigation menu itself. There are multiple themes to choose from to suite your site, or if you are so inclined you can create your own with a little custom CSS.

Service.rmlmenu.jquery is a jQuery plugin that offers a Responsive Multi-Level Menu. Using appropriate device queries in CSS it presents itself as a traditional multi-level dropdown menu on wide screens and as a popup menu on smaller screens.

Hubeleke jQuery Rotate Menu is a circle shaped menu that rotates and retrives its content on click. The plugin generates circle shape with CSS3 properties.When you click on a menu item, the menu will rotate until the clicked menu item reaches to the bottom. Meanwhile its content will be shown/loaded in the content wrapper with an animation.

Features:

• Easy installation
• Fully customizable
• jQuery powered
• Major browsers support
• Detailed options
• Ajax support
• Circle Shaped Navigation
• Compatible with other plugins
• Events and Custom Attributes

A responsive and easy to customize navigation for mega-sites, enriched by subtle CSS animations and support for devices with javascript disabled.

Dynamic jQuery menu plugin that lets you create beautiful and responsive navigation widgets.

jQuery plugin that creates an responsive Menu on website.

A preview of full webpage or its DOM element with flexible positioning and navigation support.

StickyFooterNav is a unique mega footer solution designed and coded to work and fit on any device. It is fully responsive and comes with a flexible grid system to hold your content within panels.

Features:

• 100% Responsive & powerful mega footer system
• 3 types of drop downs (fixed width, mega and full browser width)
• Unique full browser width panels
• Sticks to the bottom of the browser
• Flexible columns grid
• Left or right alignment for the menu items and the drop downs
• Custom & automatic scrollbars within panels
• Clean and professional design
• Fits into any layout
• Lots of styled elements

Context menu plugin for Twitter???s Bootstrap framework.

A Simple jQuery Plugin extending animateScroll plugin with Single Page Scroll Capabilities.

Features:

• Smooth, continous scroll across sections
• Ability to navigate to each and every section, also programatically
• Possible menu integration, but I didin???t want menu to be included as part of a package
• Each section can have different height
• If section height is less then screen height ??? it can be adjusted
• If section is higher then screen ??? we???re cool
• It would support History API

An experimental full-screen navigation, animated using CSS and jQuery, that expands within a circle.

Are you looking for Facebook UI features, this post will explain you how to create a Facebook style notifications popup using Jquery, HTML and CSS, you will understand how CSS elements will helps to improve better web design. This is the most needed feature for social networking web projects to minimize and enrich the UX elements.

Enhancing functionality of dropdown menus. Added the following improvements:

• Sub-Menus
• Support for radio and checkboxes
• Positioning of menus
• Bullet for menus

jQuery Flyout is a simple plugin for creating a flyout menu button.

Tendina is a simple jQuery plugin that helps you build dynamic, interactive side-menus in seconds.

Features:

• Provides a super easy way to setup sidemenus in a matter of minutes
• Supports infinite levels of nesting
• Hides your nested submenus and manages all interactions
• Handles dinamically added elements (nice to have when building a menu from a JSON)
• Supports multiple menu initializations on the same page
• It???s lightweight ??? 3kb minified!

scotchPanels.js is a jQuery plugin for easily creating off canvas menus, navigations, and other panel types such as images, videos, and iframes. Scotch Panels are featured-packed and have a ton of different options for every skill-level to tweak and implement into almost any project.

Features:

• Uses CSS3 with JavaScript Fallback
• Fully Responsive
• Custom transition styles
• Completely Customizable with tons of optional settings
• Lightweight, easy to use, and only one file
• Cross Browser Support
• Choose either custom HTML, images, iframes, or video panels
• Optionally use HTM5 Data Attributes
• Off Canvas directions from top, Bottom, left, and right
• Works from any container or div
• Extensive Callbacks API
• Click, touch, hover, and keyboard helpers
• CSS Class Helpers

You have probably all seen the ???drawer menu/off-canvas??? navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required.

• 9 Cool Effects
• Different Drawer Position
• Responsive Design
• Cross browser support
• Multiple Drawers on single page
• No javascript

metisMenu  is a easy menu jQuery plugin for Twitter Bootstrap 3.

A CSS3 and jQuery powered slide-in panel, to quickly show side content, notifications or profile information.

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.Today we want to show a new set of modern effects for your inspiration. Different layouts and synced transitions of the menu and the page can make everything look more interesting and we can make use of the available space for side-menus and controls. SVG allows us to play with organic shapes and add some unexpected and stylish moves to a design.

Off Canvas Infinity Push is a jQuery plugin that gives you the ability to make any desktop navigation into a mobile navigation. This plugin offers unlimited sub navigations.

In this article, I???ll be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that I believe are at the heart of the Web???s future.

This animated side cart is a smart and not obtrusive way to let users jump in and out from the list of products they want to buy, without having to refresh the page or fire a popup.

A secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other.

A fixed navigation with smooth, jQuery powered scroll. Nothing fancy here, yet a handy snippet for creating a secondary menu to quickly surf through the page content. We see this effect a lot these days, a good example I can think of is Disqus For Websites. A nice touch is to animate the logo and the main call-to-action button to slide in once the navigation becomes fixed.

Drawer is a jQuery plugin for displaying the drawer menu using CSS animations in the event of a trigger. Setting the position can be selected either the right or left. And also supports Responsive design.

The MegaNavbar is a Bootstrap 3.0+ based component, that uses the standard navbar markup, and the fluid grid system from Bootstrap 3. Work for fixed and responsive layout, and has the facility to include any Bootstrap component except dropdown. MegaNavbar is compatible with mobile devices and modern web browsers.

Features:

• 100% Responsive Layout Design
• Bootstrap Columns Grid based
• Unlimited Color Schemes
• Easy integration to any Web Projects
• Font Awesome Icons Included
• No additional JavaScript Required

Menuzord is a responsive megamenu pack to help you to define a modern navigation for your website.

Features:

• Fully Responsive
• 16 Skins
• Bootstrap compatible
• 8 Color Schemes per Skin
• Megamenu
• Grid System
• CSS animations
• Right/Left alignment
• Click or Hover

This effect is inspired by the Enjoy Aiia menu effect. It???s a closing door menu where 2 sides of the menu come together offscreen to create the final menu. I???ve created 4 variations, 2 vertical and 2 horizontal menus, each with 2 different animations: normal and bounce.

Here is a fixed menu that drives users??? attention to a couple of call-to-action buttons first, then let them explore the full-screen navigation with jQuery and CSS3.

Slidemenu is a jquery menu plugin for side menus with fun slide interactions.

DatMenu is a premium quality jquery plugin for responsive navigation that is built with love and care.

• Easy To use
• Multiple Animations
• Easy Modifications
• Top Menu Bar
• Retina Ready
• Responsive layout
• Compatibility (IE, Firefox, Opera, Safari, Chrome)
• Unlimited Colors
• Unlimited Styling Options

Responsive Menu plugin for jQuery and Zepto.

Features:

• Full customization with the CSS file included
• Fully responsive navigation menu (desktop and mobile devices)
• SEO compliant
• Less than 2 KB (minified and gzipped)

Headhesive.js creates an on-demand sticky header. Specify when you want your header to become fixed and the rest is magic.

Engaged social menu is free to use and is a super simple menu that can be easily integrated into any website including WordPress. Some of the beautiful icons from font awesome has been used to increase the beauty. Menu is meant for sites, that needs to preview their social status prominent and more visible to users.

Top navigation bars have always been popular in web design. Since these elements contain such vital information some designers like to keep them fixed on-screen while scrolling down the page. But unfortunately this can get in the way of content if the bar is too large. A popular online blogging platform Medium created an interesting method of hiding the bar when scrolling down and re-showing it when scrolling back up.

A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It???s smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.

jsMorph is a morphing ??? motion ??? tweening framework that knows what you need to do??? get going! It???s a nice ensemble of best timing, fast, smart and resource saving algorithms and convenience.

jsMorph is a completely Cross-Browser, pure javaScript animation framework that can manipulate almost any and multiple stylings of multiple HTML elements. It auto detects start positions, auto converts units, automatically adjusts rendering speed and corrects time leaks for smoother rendering experience.

We???ve created an elegant jQuery-powered animated slideout menu. We were inspired by the simple effect found at Outdated Browser and extended the menu to also work in a variety of places. Try it as a top menu, as well as a right-side menu. Let???s dive into some code and learn how to use this drop.

contextMenu.js is a plugin to create windows like context menu with keyboard interaction, different type of inputs ,trigger events and much more.

Features:

• Use as simple popup or as a context menu. With some twick can be used for multi purpose.
• Adjust position and size to fit in viewport.
• Keyboard interaction.
• Support different type of inputs (json, UL list).
• Trigger Context menu with right-click, left-click,hover or any other mouse events.
• Css outside of javascript so you can edit the look of menu.
• Enable/disable options.
• Optional icons for commands.
• Lot of configurable options.
• Submenus

We present the very popular fixed, on scroll animated header that changes it???s size and the orientation or visibility of the components within based on the user???s scroll action. As the user begins to scroll and engage with content, the header area is elegantly minimized to leave more of the viewport open for content.

Zetta Menu is jQuery mega menu plugin.

Features:

• Mega menu comes with CSS3 animations.
• Over 430 Icons (Font Awesome)
• It is fully responsive and have 3 mobile versions.
• Different layouts: horizontal top and bottom, vertical right and left.
• 3 ways of drop down (hover, click, toggle)
• 12 column grid system.
• 6 different templates with unlimited color schemes.

This one here is something I thought of after seeing the surge in popularity with push in side menus. I???ve seen a couple websites use menu transition to animate the menu items as they appear. Here I will show a simple effect of making the menu links stack upwards. The second effect I created is a Metro inspired menu that stacks upwards but uses random delays to make it look unique every time.

WikiNav is a jQuery plugin to create a wiki-style menu from all existing headings on your page. With few lines of JavaScript code you can achieve an elegant menu for your documentation.

Features:

• Easy Setup
• Full jQuery & css compatible
• Responsive Design
• Animated Scroll To

jQuery Bootstrap Auto-Hiding Navbar is an extension for Bootstrap???s fixed navbar which hides the navbar while the page is scrolling downwards and shows it the other way. The plugin is able to show/hide the navbar programmatically as well.

NOO Menu is a revolutionary menu plugin that allows you to customize almost everything in a super interactive and intuitive admin interface.

Smart Demo-Bar is plugin made for developers that need Demo-Bar or theme switcher for responsive theme, smart Demo-Bar would be shown on top of page, allow users to preview another theme to test his responsive design.

Smart Demo-Bar can work on smaller screens, and it will work on mobile devices browsers that support jQuery and CSS3.

A jQuery plugin that let you Create a full page, Fully Animated Menu with CSS3 for your Navigation.

Page scroll to id is an easy-to-use jQuery plugin that enables animated page scrolling to specific id within the document. The plugin replaces the default browser behaviour of ???jumping??? to page sections when links with href value containing # are clicked, by smoothly animating the page to those sections.

Features:

• Auto-adjustable animation speed
• Advanced animation easings
• Vertical and/or horizontal scrolling
• Links and targets highlighting via ready-to-use classes
• Auto-adjustable Scroll-to position
• Advanced scroll-to position offset (by pixels, by element selector, link specific offsets etc.)

Demos:

horizontal layout, auto layout, dynamic content example, example with jquery.address, example with jquery-hashchange

An easy to use push menu that has infinite scrolling with jQuery. Designed to be lightweight and easy to customize.

ScrollNaviJs is jquery plugin for fix navigation on top after scroll second section content, actually navigation fix in bottom of browser when we are in first section content.

A menu system for converting a standard menu into a mobile/tablet responsive menu, media query independent.If you are looking for drop down functionality on the desktop, MeanMenu doesn???t do it. Use Superfish as well as MeanMenu.

Slidebars is a jQuery plugin for quickly and easily implementing app-style revealing, overlaying, push menus and sidebars into your website.

jQuery MegaKrill is a compact navigation for mobile devices and responsive layouts!.Resize the browser window in demo page to see the plugin(s) in action.

Navgoco is a simple JQuery plugin which turns a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded sub-menus between sessions by using cookies and optionally act as an accordion menu.

Puerto ??? Responsive Mega menu: is pure HTML5/CSS3 menu. Menu has HTML5 structure and works on all major browsers. Menu is easy to edit and integrate into any website. CSS is separate from HTML and is well commented. Menu has two similar layout and eight colors, each theme can be used separately without any connection with the others. Menu is responsible and adapts to the screen of the device(computer monitor, tablet, mobile phone???). Menu also has five different animation.

I would like to share with you a personal experience I had while trying to build advanced visual animations with CSS keyframes. The topic we???re going to address is animating several HTML elements simultaneously and taking advantage of keyframe flexibility. To explain this subject, we will create a simple fluid menu based on four squares. Clicking on one of them will display an overlay showing related content, closing the overlay will reverse the process showing the default menu. All delays will be managed directly with CSS ??? no javascript timeout() here.

Pikabu is a speedy, flexible framework for off-canvas flyout panels.Momentum scrolling in sidebars and smart fallbacks for browsers that don???t support it.

The jQuery plugin that provides interactive drop-down list box.

Create animated scroll menu with jQuery

Features:

• vertical or horizontal display
• absolute, fixed or inline styles
• left, right, top or bottom aligns
• configurable background color, font sizes, colors also configurable via CSS
• smooth animation during pagescroll
• fade in / fade out effect when user scrolling

jQuery ReSmenu is a very simple and lightweight (~1Kb) jQuery plugin that collapse ul menus into selects on responsive layouts.

Tocible creates a table of contents navigation menu that animates anchoring on click and follows the user scrolling.

A jQuery plugin to fix DOM element to the top when a page scrolls to its position.

There are plenty of reasons for using a sticky header navigation in your website. It provides easy access for top-priority links, plus a way back to the homepage from anywhere on the site. However problems may arise when you have a navigation bar which blocks some of the page content.

In this tutorial I want to demonstrate how we can build a locking header bar which will auto-hide itself after scrolling down the page. Also when scrolling to the very bottom we will display a small footer which includes many of the same nav links.

Wayout Menu is a responsive menu written with Bootstrap 2.3.1, jQuery and CSS3. CSS transitions are used for navigation level openings.

Features:

• Responsive design (Menu items are not responsive, but a sliding sidebar panel is added for devices that use smaller screen sizes
• Full width & Boxed versions
• Sliding Sidebar (with 6 different opening effects)
• 9 different color swatches
• Descriptive Theme Customizer
• Login Box, Shopping Cart Box, Search Box

Shifter is a  jQuery plugin for simple slide-out mobile navigation.Shifter works by checking for target elements in the DOM and binding events to them. This allows you to markup and style pages anyway you???d like, but at a minimum you need three specifically classed elements.

Square menu, as you can see from the name, is a plugin that let you add a similar animated menu that you see on the new Square website. I???ve also added additional animations, add various browsers support and provide options for you to play around with.

jQuery plugin that turns a jQueryUI menu widget into a context menu.

• Define menus from <ul> element or definition list (i.e. [{title: "Paste", cmd: "paste"}, ...]).
• Themable using jQuery ThemeRoller.
• Supports delegation (i.e. can be bound to elements that don???t exist at the time the context menu is initialized).
• Exposes events from jQueryUI menu: blur, create, focus, select.
• Optional support for touch devices.

Everyone knows that Mashable is the world???s largest independent website dedicated to news, information, technology and resources for the connected generation. Now I am going to explain you about how to create mashable style dynamic drop down menu using Php, Mysql & jQuery Ajax.In mashable, you can able to see all posts from the category from their header drop down menu.

An easy to use, CSS3/jQuery Responsive Navigation built on the Superfish menu and HTML5. This was developed in part because of the lack of nested responsive menus.

Included:

• Modernizr for IE6-8
• Superfish Menu
• HoverIntent plugin
• Data image fallback for lack of png support for IE7
• Arrow image for IE6 menus

Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.

Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where ???views??? are shown with animations. We???ve experimented a bit and we???ve come up with a small set of effects that take the page and move it in 3D to reveal a navigation (or some other content if you like). What???s nice about this is that we literally put the site into perspective, allowing for an interesting view on the content and the navigation possibilities.

Bootstrap-style dropdowns in jQuery with some added features and no dependencies.

One of my favorite Boostrap plugins is dropdowns, but I had a bit of difficulty getting started with them. The docs say you can apply a dropdown to nearly any element, but they really seem to work best with Bootstrap???s navbar, tab, and pill components. Since I was retrofitting an app that was around long before Bootstrap, this wasn???t going to work for me. That and I was hoping to get a scrollable dropdown (with tips!) and a few other features out of the deal. Thus, this plugin was born.

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user???s scroll. The header on demo site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.

Learn to create a slider timeline menu with CSS3 animations. It is a fixed navigation that smooth scrolls to new sections with a cool slider effect.You can click on each link as well and it will smooth scroll along with adjusting the dial to the selected section. I liked this idea and took it a step further with giving each section a color. The slider background color will fade to the selected section???s color.

Fly Side Menu is a script that will recreate the impressive animation you see on Airbnb???s new iOS7 app using jQuery and CSS3. In additional to that, I???ve also added a few more options for you guys to play around with.

• Pure CSS3
• Full responsive
• Clean flat design
• Multilevel dropdown menu
• 17 Preset color schemes
• Multi-column content
• Left or right item alignment
• Fullwidth dropdown
• Font Awesome icons
• Well documented

Jeegoocontext is a jQuery plugin that allows for multiple custom contextmenus (pop-up menus) to exist on a single page. The plugin is able to transform any unordered list appended to the body into a multi-level, intelligently positioned styled contextmenu via a single call.

jQuery Full Page Navigation is a simple script that let you create a full page navigation (navigation shown as columns) dynamically with one JS call. You can define how your navigation will be divided, how fast/slow the animation will be and many more features.

stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.

One of my favorite Boostrap plugins is dropdowns, but I had a bit of difficulty getting started with them. The docs say you can apply a dropdown to nearly any element, but they really seem to work best with Bootstrap???s navbar, tab, and pill components. Since I was retrofitting an app that was around long before Bootstrap, this wasn???t going to work for me. That and I was hoping to get a scrollable dropdown (with tips!) and a few other features out of the deal. Thus, this plugin was born.

While the appearance of these dropdowns is almost identical to those of Bootstrap???s, it???s important to note that JavaScript for this plugin was developed entirely from scratch. Some CSS was borrowed, however, especially for generating those gorgeous tips.

MetNav 2 is jEffectBox???s 2nd jQuery navigation menu plugin based on Window 8 Metro theme. It???s very lightweight and looks good on almost all major browsers and devices. It???s a Windows 8 Tile base navigation menu which supports unlimited sub menus. It supports responsive design and works well on touch devices.This plugin is dedicated to all Metro lover in the world.

Features:

• Supports unlimited number of sub-menus.
• Supports responsive design.
• Looks good in almost all major browsers and devices.
• Very easy to integrate to any website.
• Full documentation included.
• Very lightweight, only 3kb of JavaScript (minified version is 2kb).
• Control appearance through CSS, so it can be restyled.
• Supports touch devices.

A jQuery plugin that let you create a smooth jump to sub navigational menu in one JS call.The menu can be used to assist your navigation for pages with a lot of content.

Naver is an easy way to turn any navigation system into a responsive-ready, mobile-friendly toggle.

Single page layouts are taking off in a big way. It seems as if every product page nowadays is single paged, so I thought I???d have a little spin at it with this jQuery plugin. This allows you to create single paged layouts with a few optional custom UI elements such as fold up menus.

I???ve tested this on most major platforms and browsers and it seems to work fine on all of them. The idea is simple, it lets you make a quick single page layout and gives you the option of some UI effects, such as disappearing pieces of image to reveal menus. I???ve also added some options to disable all that if it???s not for you. How does it work? Well let???s have a look.

Multi-level dropdown menu for buttons. Supports any HTML for items, multiple combined sync/async datasources.

Jet Responsive Megamenu is a menu component based in CSS and Javascript code. It can be used like a dropdown navigation, megamenu navigation or both. It???s has a responsive and fluid layout.

Features:

• 14 Styles
• Responsive
• Collapsible
• Javascript/CSS effects
• Grid system
• Cross browser
• Easy to use

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash???s bounce menu for mobile apps.The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples.

Please note that we???ll be using transitions and animation on pseudo-elements which won???t work in some browsers (e.g. Safari and Mobile Safari).

Responsive Mobile Menu jQuery Plugin.

Features:

• Supports with multi-level menus
• Flexible, simple markup
• Cross-browser compatibility
• Keyboard Accessible
• Degrades gracefully if javascript disabled
• Creates ARIA compliant menu

Modern Menu 3 is a clean, modern and easy to use menu. It has a number of features that make it both useful and compelling:

• It has a clean and attractive design.
• It offers both a horizontal and a vertical layout.
• It comes with 8 different themes to choose from.
• The look is completely customizable.
• It supports multilevel dropdowns.
• It has smooth and attractive animations for the buttons as well as the dropdowns.
• It uses CSS animations for better performance.
• It has a jQuery animation fallback for browsers that do not support CSS animations.

Context.js is a lightweight solution for contextual menus. Currently, there are two versions.

The first is to be used with Twitters Bootstrap (bootstrap.css specifically). If you do not use or want to use bootstrap.css, there is a standalone stylesheet to give the menu it???s base styles.

Features:

• Linted: Valid JS
• Can be used with or without Twitters Bootstrap.css
• Event Based Links
• Anchor Links
• Headers
• Dividers
• Recursive Menus (infinite depth)
• Vertical Space Detection (turns into a ???dropup???)
• Horizontal Space Detection (Drops to the left instead of right)
• Add/Delete menus Dynamically

In this tutorial I want to demonstrate how we can build a similar interface using jQuery animation. These codes are fairly basic and should work in any fixed-style website layout. This type of design leaves room for hidden content, along with main content cascading down the page.

Ideally we will be using jQuery animations powered by jQuery UI easing effects. I have created a live example with the navigation bar fixed onto each corner of the webpage. Check out some of my demos and see if this interface could work well in any upcoming design projects.

Wheel Menu is a small jQuery plugin that will add a fully customisable Path-like wheel menu button to your website.

Features:

• Easy to use.
• Works on any page.
• Perfect for Ipad navigation.
• Docking main menu ??? push/show sub-menu.
• Sub-menu fully scrollable.
• Custom scrollbars on sub-menu containers.
• Accent selected and tooltip colors.
• One level media sub-menu items.
• Dock menu on page load to give the user more page room.
• Social media icons.
• 230+ Entypo Icons used for menu icons.
• Submenu header and descriptions.
• Custom menu logo area that resizes on window resize.