45+ Creative Menu With jQuery and CSS3
Menu is the most important part of website to show visitor about your website purpose and also easy for user to find information on the website, it is a key factor in the user experience. A well laid out navigation can mean a first time visitor is able to be successfully guided through the site.
If you want to create navigation menus that really stands out of the crowd, jQuery could be the right choice to choose offering bunch of customizable options. That’s why we present to you 45+ creative jQuery navigation menu examples for every need.
Grab and build a beautiful navigation menu template for your website and impress your visitors. We hope you enjoy this collection and find something handy for your next project.
1 – Slide and push menus
A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”
2 – cbFlyout
cbFlyout is a mobile-first jQuery off-canvas navigation plugin that creates a responsive multi-level sidebar menu using CSS3 transitions and transforms.
3 – jQuery Full Screen Nav
An unique jQuery menu plugin for creating a responsive full screen navigation menu that slides out from the top of the page and covers the main content with CSS3 transition effects.
4 – Pushy
Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
Features
- Uses CSS transforms & transitions.
- Smooth performance on mobile devices.
- jQuery animation fallback for IE 7 – 9.
- Menu closes when a link is selected.
- Menu closes when the site overlay is selected.
- It’s responsive!
5 – Off canvas menu effects
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.
6 – Animated Arc Popup Menu with jQuery and CSS3 Transitions
A jQuery, Html5, CSS3 based menu widget that popups an Arc (circle) menu around the toggle button, animated with CSS3 transitions.
7 – Radial Menu
A cool menu component that pops up an animated circular menu with rotation effects around a trigger button, powered by jQuery and CSS3 transitions & transforms.
8 – Animated border menus
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.
9 – Drawer Menu
Drawer Menu is a jQuery plugin for creating sidebar panels containing multi-level sliding menus that pull out from the left or right side of the webpage, with jQuery animations and easing effects.
10 – Animated Circle Menu
A jQuery plugin that makes uses of CSS3 transitions and transforms to create an animated circle menu around the toggle button.
11 – Animated Sidebar Menu with jQuery and CSS3
A hidden sidebar menu that slides out from the edge of your web page when you click on the toggle button, built on top of jQuery, CSS3 transforms & transitions and a little bit of javascript.
12 – Multi-level push menu
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.
The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.
13 – jquery.rocker
Rocker is a jQuery plugin for creating a responsive, mobile-friendly multi-column navigation menu sliding from the bottom of the web page. The menu column will automatically expand with a CSS3 transition effect when hover over, similar to the accordion.
14 – Google nexus website menu
A tutorial on how to reconstruct the sidebar menu of the Google Nexus 7 page. It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar menu will be shown. The first sidebar menu item is a search input which is styled the same way like the other menu items.
15 – 3D restaurant menu concept
A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items.
16 – PopCircle
jQuery popcircle is a fancy jQuery plugin that allows to create a Circular Popup Gallery with customizable animations and easing functionality. The idea is to turn the Html image element into a Pop Circle that show the pop-circle around the trigger as full circle, half circle or quarter circle.
Features
- Can customize the pop circle limits based on your needs.
- Can Show the Popcircle around the trigger as full circle, half circle or quarter Circle.
- Easy to customize animation time and easing functionality
17 – Slinky.js
Slinky.js is a jQuery plugin to create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times.
18 – Blur menu with css3 transitions
A tutorial on how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.
19 – 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.
20 – Off Canvas Menus
Off Canvas Menus are used primarily with Mobile and touch devices and can provide an extremely useful and beautiful experience for your users. This tutorial will cover an introduction on them, a getting started guide, some improvement tricks, and then finally some awesome demos for you to build off of.
21 – MMENU
The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customizable through a wide range of options, extensions and add-ons and it will always fit your needs.
22 – Hamburgler
The easiest, most delicious, responsive menu.
23 – Super simple off-canvas navigation
24 – Off Canvas Menu with Animated Links
Learn to make a simple off canvas mobile navigation with delayed link animation.
The links have a simple transition effect of fading in from right to left when the navigation is toggled. But the animation occurs in a chained way where the links animate one after the other. This is done by adding a transition-delay to every link.
25 – Transitions for off canvas navigations
Some inspiration for transition effects for off-canvas navigations.
26 – Sidr
Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.
You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too).
27 – 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.
28 – Creative Morphing Menu with jQuery and CSS3
A jQuery, sass/CSS3 based creative menu that pops up a corner navigation with a subtle button morphing effect based on CSS3 transitions & transforms.
29 – Off-canvas Navigation with Fullscreen Overlay
A fixed side off-canvas navigation that transforms into a transparent overlay covering the main content when toggled, powered by CSS3 transforms & transitions and a little jQuery magic.
30 – Circular Navigation
A tutorial on how to create a circular navigation using CSS transforms.
31 – Full Page Menu
Full Page Menu is a jQuery navigation plugin that displays a responsive, animated menu with CSS3 transitions in a fullpage lightbox-style interface.
32 – Simple Off-canvas Sidebar Navigation
Simple Sidebar is a lightweight and highly customizable jQuery plugin for creating an off-canvas sidebar navigation sliding out from the left/right side of your browser window. When you click the toggle icon, the plugin pushes your main content to the left/right and generates a mask laying over the document content with a smooth fade-in animation. This project is licensed under the GPL 2.0.
33 – Smart Fixed Navigation
A jQuery & CSS3 based smart fixed navigation that shows a menu link at the bottom of the web page as you scroll down the page. You can open or close a responsive navigation panel by clicking on the bottom menu link. As you scroll up the page, the bottom menu link will be hidden.
34 – Flexible Fullscreen Navigation Menu
A responsive, flexible navigation built with jQuery and CSS3 that displays an animated menu in a fullscreen modal-like popup window.
35 – Off-canvas Sliding Menu
Just another jQuery and CSS3 transitions & transforms based off-canvas navigation system for your web site/app.When you click a trigger, a sidebar menu slides out from the left hand side of your screen and shrinks the document content with a transparent mask.
36 – Mic.com Style Fullscreen Navigation
A responsive & fullscreen navigation system inspired by Mic.com that allows you to navigate through different categories with a subtle CSS3 transition effect. Built by Html5, CSS/CSS3, and a little Javascript(jQuery) magic.
37 – Wheel Menu
Wheel Menu is a simple and fancy jQuery plugin that allows to popup a path-like wheel menu with smooth animations when hovering over (or clicking) the menu button.
38 – Path Buttons
Path Buttons is a super easy yet cool jQuery menu script that creates Path.com style circle menu buttons with rotation effects using CSS3 transforms. Click the ‘+’ icon button to expand the circle menu.
39 – Full Page Intro & Navigation
This is a simple jQuery script for creating a navigation bar with blurred background that allows you to open a full page animated navigation menu with CSS3 transitions and transforms.
40 – WCircleMenu
Just another jQuery plugin used to create an animated circle menu with fancy CSS3 powered popup animations as seen on Path.com
41 – Square Menu
Square Menu is a lightweight (~3kb) jQuery menu plugin that popups a menu panel with subtle CSS3 animations (transitions and transforms) in the center of the page. Inspired by squareup.com.
42 – Rounded Animated Navigation
An experimental full-screen navigation, animated using CSS and jQuery, that expands within a circle.
43 – 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.
44 – Awesome Bubble Navigation
The idea is to have some round navigation icons that release a bubble when hovering over them.
45 – Simple youtube menu effect
A tutorial on how to recreate the effect of YouTube’s little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath.
46 – Exploding Menu
An experimental CSS transition to create animated random box effect.
47 – CSS Menu from side
Review and analytic your site
Lookup your IP
Reciprocal link checker
List old Pop Disks
List health tools
Frameworks, libraries, softwares and resources Network