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


Demo Download

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


Demo Download

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


Demo Download

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


Demo Download

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.


  • 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


Demo Download

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


Demo Download

A jQuery, Html5, CSS3 based menu widget that popups an Arc (circle) menu around the toggle button, animated with CSS3 transitions.


7 – Radial Menu


Demo & Download

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


Demo Download

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


Demo Download

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


Demo & Download

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


Demo & Download

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


Demo Download

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


Demo Download

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


Demo Download

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


Demo Download

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


Demo Download

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.


  • 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


Demo Downl0ad

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


Demo Download

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


Demo Download

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


Demo Download

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


Demo Download

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


Demo & Download

The easiest, most delicious, responsive menu.


23 – Super simple off-canvas navigation


Demo & Tutorial


24 – Off Canvas Menu with Animated Links


Demo & Download

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


Demo Download

Some inspiration for transition effects for off-canvas navigations.


26 – Sidr


Demo Download

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


Demo Download

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


Demo & Source

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


Demo & Source

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


Demo Download

A tutorial on how to create a circular navigation using CSS transforms.


31 – Full Page Menu


Demo Download

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


Demo Download

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


Demo Download

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


Demo & Source

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


Demo & Source

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


Demo & Source

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


Demo Download

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


Demo Download

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


Demo Download

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


Demo Download

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


Demo Download

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


Demo Download

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


43 – Full-Screen Pop-Out Navigation


Demo Download

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


Demo Download

The idea is to have some round navigation icons that release a bubble when hovering over them.


45 – Simple youtube menu effect


Demo Download

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


Demo & Source

An experimental CSS transition to create animated random box effect.


47 – CSS Menu from side


Demo & Source

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *