jQuery Menus Plugin & Tutorials with Example

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

Menuzord – jQuery CSS3 Responsive Megamenu

Menuzord - jQuery CSS3 Responsive Megamenu

Menuzord is a responsive megamenu pack to help you to define a modern navigation for your website.

Features:

  • Fully Responsive
  • 16 Skins
  • Bootstrap compatible
  • 8 Color Schemes per Skin
  • Megamenu
  • Grid System
  • CSS animations
  • Right/Left alignment
  • Click or Hover

Closing Door Menu with CSS3 & jQuery

Closing Door Menu with CSS3 & jQuery

This effect is inspired by the Enjoy Aiia menu effect. It’s a closing door menu where 2 sides of the menu come together offscreen to create the final menu. I’ve created 4 variations, 2 vertical and 2 horizontal menus, each with 2 different animations: normal and bounce.

Full-Screen Pop-Out Navigation with jQuery & CSS3

Full-Screen Pop-Out Navigation with jQuery & CSS3

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 with jQuery and CSS3.

Datmenu – Responsive Menu jQuery Plugin

Datmenu - Responsive Menu jQuery Plugin

DatMenu is a premium quality jquery plugin for responsive navigation that is built with love and care.

  • Easy To use
  • Multiple Animations
  • Easy Modifications
  • Top Menu Bar
  • Retina Ready
  • Responsive layout
  • Compatibility (IE, Firefox, Opera, Safari, Chrome)
  • Unlimited Colors
  • Unlimited Styling Options

PgwMenu : Responsive Menu plugin for jQuery

PgwMenu : Responsive Menu plugin for jQuery

Responsive Menu plugin for jQuery and Zepto.

Features:

  • Full customization with the CSS file included
  • Fully responsive navigation menu (desktop and mobile devices)
  • SEO compliant
  • Less than 2 KB (minified and gzipped)


Best jQuery websites design awards