34 Free jQuery CSS3 Navigation Menu Plugins/Tutorials

Navigation is one of the most important element of a website design. Building a professional website menu is essential to give your visitors a good user experience. Navigation menu organize the main categories of the website so that the users can easily find what they are looking for. In this compilation we have collected 34 Free jQuery CSS3 Navigation Menu Plugins/Tutorials to give your website a unique and professional menu. These plugins include some of the most amazing vertical push / slide navigation menus as they are very popular these days. Go ahead and have a look.

December 2015 Update:

Page Stack Navigation  View Demo
Page Stack Navigation
The idea is to show a navigation when clicking on the menu button and transform all pages in 3D and move them to the bottom of the viewport. The next two pages are shown in the back of the current page as a stack.
Stretchy Navigation  View Demo
Stretchy Navigation
A rounded navigation trigger that stretches on click/tap to reveal the navigation items.
Vertical Layout with Navigation  View Demo
Vertical Layout with Navigation
Vertically scrolling sections of content with a slick mobile hamburger navigation.
Multi-Level Menu  View Demo
Multi-Level Menu
A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.
Learning Material Design Lite: Navigation  
Learning Material Design Lite: Navigation
Blurry Menu  
Blurry Menu
3D Bold Navigation  View Demo
3D Bold Navigation
A bold navigation that slides in when active, replacing the current content in a 3D space.
Responsive Sidebar Navigation  View Demo
Responsive Sidebar Navigation
An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.
Full-Screen Pushing Navigation  View Demo
Full-Screen Pushing Navigation
A full page menu, that replaces the current content by pushing it off the screen.
Bouncy Navigation  View Demo
Bouncy Navigation
CSS animations and a pinch of jQuery to animate navigation items, and let them bounce in and out the screen.
MenuItems
MenuItems
Dynamic jQuery menu plugin that lets you create beautiful and responsive navigation widgets.
3D Rotating Navigation
3D Rotating Navigation
Shifter jQuery Plugin
Shifter jQuery Plugin
A jQuery plugin for simple slide-out mobile navigation.
FooNav.js
FooNav.js
Mega-Site Navigation  View Demo
Mega-Site Navigation
Multi-level Push Menu jQuery Plugin   View Demo
Multi-level Push Menu jQuery Plugin
Multi-level push menu is cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.
Slicknav
Slicknav
Rounded Animated Navigation  View Demo
Rounded Animated Navigation
A full-screen navigation, animated using CSS and jQuery, that expands within a circle.
ScotchPanels.js : jQuery Off Canvas Menus
ScotchPanels.js : jQuery Off Canvas Menus
Slidebars
Slidebars
Slidebars is a jQuery plugin for quickly and easily implementing app style off-canvas menus and sidebars into your website.
Slide In Panel Navigation Plugin  View Demo
Slide In Panel Navigation Plugin
A CSS3 and jQuery powered slide-in panel, to quickly show side content, notifications or profile information.
mmenu
mmenu
Closing Door Menu Plugin  View Demo
Closing Door Menu Plugin
It’s a closing door menu where 2 sides of the menu come together offscreen to create the final menu.
jPanelMenu
jPanelMenu
jPanelMenu is a jQuery plugin for easily creating and managing off-canvas content.
Smart Fixed Navigation  View Demo
Smart Fixed Navigation
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.
Animated Slideout Menu  View Demo
Animated Slideout Menu
Full-Screen Pop-Out Navigation  View Demo
Full-Screen Pop-Out Navigation
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.
JQuery Square Menu  View Demo
JQuery Square Menu
Create a Square-like Menu Animation for Website using jQuery and CSS3
FLEXNAV  View Demo
FLEXNAV
FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility.
Menu Transition In Effects  View Demo
Menu Transition In Effects
Perspective Page View Navigation  View Demo
Perspective Page View Navigation
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.
Responsive Multi-Level Menu  View Demo
Responsive Multi-Level Menu
A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.
Flaunt.js  View Demo
Flaunt.js
Flaunt.js is a jQuery script that allows you to create a responsive, nested navigation out the box. Flaunt was built to overcome responsive design challenges which faced a huge percentage of websites.
Responsive Retina-Ready Menu  View Demo
Responsive Retina-Ready Menu
The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens.