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.


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.

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.

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

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

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

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


Source link

Open chat
Scan the code
Can we help you?