jQuery Menus Plugin & Tutorials with Example

Pure Drawer : Pure CSS Off-Canvas drawers Menu

Pure Drawer : Pure CSS Off-Canvas drawers Menu

You have probably all seen the “drawer menu/off-canvas” navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required.

  • 9 Cool Effects
  • Different Drawer Position
  • Responsive Design
  • Cross browser support
  • Multiple Drawers on single page
  • No javascript

metisMenu : Easy menu jQuery plugin for Bootstrap

metisMenu : Easy menu jQuery plugin for Bootstrap

metisMenu  is a easy menu jQuery plugin for Twitter Bootstrap 3.

Slide in panel with jQuery & CSS3

Slide in panel with jQuery & CSS3

A CSS3 and jQuery powered slide-in panel, to quickly show side content, notifications or profile information.

Off-Canvas Menu Effects with CSS3 & SVG

Off-Canvas Menu Effects with CSS3 & SVG

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.Today we want to show a new set of modern effects for your inspiration. Different layouts and synced transitions of the menu and the page can make everything look more interesting and we can make use of the available space for side-menus and controls. SVG allows us to play with organic shapes and add some unexpected and stylish moves to a design.

Off Canvas infinity push jQuery Mobile Navigation

Off Canvas infinity push jQuery Mobile Navigation

Off Canvas Infinity Push is a jQuery plugin that gives you the ability to make any desktop navigation into a mobile navigation. This plugin offers unlimited sub navigations.

Responsive Off Canvas Menu with CSS3 & jQuery

Responsive Off Canvas Menu with CSS3 & jQuery

In this article, I’ll be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that I believe are at the heart of the Web’s future.

Side Shopping Cart with CSS3 & jQuery

Side Shopping Cart with CSS3 & jQuery

This animated side cart is a smart and not obtrusive way to let users jump in and out from the list of products they want to buy, without having to refresh the page or fire a popup.

Secondary Fixed Navigation with CSS3 & jQuery

Secondary Fixed Navigation with CSS3 & jQuery

A secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other.

A fixed navigation with smooth, jQuery powered scroll. Nothing fancy here, yet a handy snippet for creating a secondary menu to quickly surf through the page content. We see this effect a lot these days, a good example I can think of is Disqus For Websites. A nice touch is to animate the logo and the main call-to-action button to slide in once the navigation becomes fixed.

Drawer : jQuery Drawer Menu plugin using CSS animations

Drawer : jQuery Drawer Menu plugin using CSS animations

Drawer is a jQuery plugin for displaying the drawer menu using CSS animations in the event of a trigger. Setting the position can be selected either the right or left. And also supports Responsive design.

MegaNavbar. Advanced Navbar for Bootstrap 3.0+

MegaNavbar. Advanced Navbar for Bootstrap 3.0+

The MegaNavbar is a Bootstrap 3.0+ based component, that uses the standard navbar markup, and the fluid grid system from Bootstrap 3. Work for fixed and responsive layout, and has the facility to include any Bootstrap component except dropdown. MegaNavbar is compatible with mobile devices and modern web browsers.

Features:

  • 100% Responsive Layout Design
  • Bootstrap Columns Grid based
  • Unlimited Color Schemes
  • Easy integration to any Web Projects
  • Font Awesome Icons Included
  • No additional JavaScript Required


Best jQuery websites design awards