45+ Creative Menu With jQuery and CSS3

Click Here 

1 – Slide and push menus

BlueprintSlidePushMenus-jquery-plugin

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

cbFlyout-menu-jquery-plugin

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

Full-Screen-Nav-menu-jquery-plugin

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

Pushy-menu-jquery-plugin

Demo Download

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

OffCanvasMenuEffects-jquery-plugin

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

Animated-Arc-Popup-Menu-with-jQuery-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

Radial-Menu-jquery-plugin

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

animated-border-menus-jquery-plugin

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

Drawer-Menu-jquery-plugin

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

Animated-Circle-Menu-jquery-plugin

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

Animated-Sidebar-Menu-jquery-plugin

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

multi-level-push-menu-jquery-plugin

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

rocker-menu-jquery-plugin

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

GoogleNexusWebsiteMenu-jquery-plugin

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

3D-Restaurant-Menu-Concept-jquery-plugin

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

PopCircle-menu-jquery-plugin

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.

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-menu-jquery-plugin

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

BlurMenuwithCss3-jquery-plugin

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

PerspectiveNavigation-jquery-plugin

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

offcanvas-menu-jquery-plugin

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

mmenu-jquery-plugin

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

hamburgler-menu-jquery-plugin

Demo & Download

The easiest, most delicious, responsive menu.

 

23 – Super simple off-canvas navigation

off-canvas-navigation-jquery-plugin

Demo & Tutorial

 

24 – Off Canvas Menu with Animated Links

Off-Canvas-Menu-with-Animated-Links-jquery-plugin

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

sidebartransitions-jquery-plugin

Demo Download

Some inspiration for transition effects for off-canvas navigations.

 

26 – Sidr

sidr-menu-jquery-plugin

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

MultiLevelMenu-jquery-plugin

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

Morphing-Menu-jquery-plugin

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

Off-canvas-Navigation-with-Fullscreen-Overlay-jquery-plugin

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

Circular-Navigation-jquery-plugin

Demo Download

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

 

31 – Full Page Menu

fullpage-menu-jquery-plugin

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

simple-sidebar-jquery-plugin

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

smart-fixed-navigation-jquery-plugin

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

Flexible-Fullscreen-Navigation-Menu-jquery-plugin

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

Off-canvas-Sliding-Menu-jquery-plugin

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

MIC-Fullscreen-Navigation-jquery-plugin

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

wheel-menu-jquery-plugin

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

Path-Buttons-jquery-plugin

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

intro-page-full-width-navigation-jquery-plugin

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

WCircleMenu-jquery-plugin

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

square-menu-jquery-plugin

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

rounded-animated-navigation-jquery-plugin

Demo Download

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

 

43 – Full-Screen Pop-Out Navigation

full-screen-pop-out-nav-jquery-plugin

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

bubblenav-jquery-plugin

Demo Download

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

 

45 – Simple youtube menu effect

YouTubeLeftSideMenu-jquery-plugin

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

Exploding-Menu-jquery-plugin

Demo & Source

An experimental CSS transition to create animated random box effect.

 

47 – CSS Menu from side

Menu-from-side-jquery-plugin

Demo & Source

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s