Best jQuery Menus Plugins & Tutorials with Demo

Vertical Responsive Navigation with jQuery & CSS3

Vertical Responsive Navigation with jQuery & CSS3

Vertical Responsive Navigation is a navigation component based in CSS and Javascript code. It’s responsive navigation, collapsible on mobile devices, has two themes and 12 preset colors.

Features:

  • Light and Dark themes
  • 12 preset colors
  • Responsive
  • Collapsible
  • Major Browsers Compatible
  • 361 icons available

visualNav : jQuery navigation menu with smooth scrolls into view

visualNav : jQuery navigation menu with smooth scrolls into view

A jQuery plugin that modifies a navigation menu to highlight / change when the menu’s target smooth scrolls into view.

Features:

  • Smooth scrolling page navigation.
  • Easing can easily be defined for both horizontal and vertical scrolling.
  • Auto-updating menu which highlights both the currently viewed content & other content in view.
  • User can cancel auto-scroll by pressing any key, clicking on the page or scrolling the mousewheel.
  • Can be set up to work with any menu elements. Integrates easily with Bootstrap!

Scroll Activated Fixed Header Animations with jQuery & CSS3

Scroll Activated Fixed Header Animations with jQuery & CSS3

It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.

Smint : jQuery Navigation plugin for One Page website

Smint : jQuery Navigation plugin for One Page website

Smint is a simple jQuery plugin that helps with the navigation on one page style websites.

It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on.

Flexy Menu : jQuery Responsive Horizontal & Vertical Menu with CSS3

Flexy Menu : jQuery Responsive Horizontal & Vertical Menu with CSS3

Flexy is a menu component based in CSS and Javascript code. You can use Flex Menu it as a horizontal or vertical menu. It is a responsive and collapsible menu, suitable for any type of website.

Features:

  • Responsive layout
  • Horizontal and Vertical
  • 8 Styles
  • Javascript/CSS effects
  • Collapsible
  • Major browsers compatible

Creating Swipeable Side Menu in jQuery

Creating Swipeable Side Menu in jQuery

Today, I will be sharing an experiment to replicate the behavior of the side menu, similar to what you’ve seen on smartphone applications, but this tutorial is for the web. I will take you through each step from structuring your layout and adding swipe gestures to open/close the menu, usable on both desktop and smartphones.

Simple Vertical Menu with jQuery and CSS3

Simple Vertical Menu with jQuery and CSS3

In this tutorial I`m going to show you how to create a simple, but very stylish vertical menu using some CSS3, a bit of jQuery, a custom text font and the most impressive icon font you can find at this moment, which is FontAwesome.

Combine all of these with a nice color scheme and you get a beautiful UI element, ready to be used in your projects!

Universal Responsive Mega Menu with jQuery & CSS3

Universal Responsive Mega Menu with jQuery & CSS3

In this a author put together a flexible mega menu system that can hold 12 sizes of drop downs, unlimited fly-out elements combined with a jQuery script to enhance the whole system.It can be used as a sticky footer (with mega “drop-ups”) using the exact same markup as the “standard” mega menu. You can switch between those 2 variants just by changing a single class.

Features:

  • Header and Footer Mega Menus
  • Fully Responsive Menu
  • Retina Ready Graphics
  • Flexible 12-Columns Grid
  • Styled Typography and Elements
  • Simple Working Contact Form
  • Clean and Professional Design
  • Touch-Screen Devices Friendly
  • Cross-Browser Support

SmartMenus : jQuery Advance website menu scripts

SmartMenus : jQuery Advance website menu scripts

SmartMenus jQuery is a successor to one of the oldest website menu scripts which was released back on August 2, 2001. Although the name of the project remains the same, the jQuery plugin is a completely new open-source script designed and developed from scratch. It’s main goal was to create a script that supports equally well widest possible variety of browsers running on all kinds of platforms and devices – desktop computers, tablets, mobile phones.

Features:

  • Optimized for mobile and desktop browsers supporting touch, mouse or both inputs at the same time
  • Section 508 compliant and fully accessible to assistive technology like screen readers
  • List-based (search engine friendly) markup – can be easily generated from any kind of database
  • Completely CSS driven with fully customizable menu styles
  • Unlimited menu trees on the same page and unlimited sub menu levels supported
  • Horizontal or vertical main menu items arrangement
  • Absolute/relative/fixed positioning for the main menus supported
  • Right-to-left and bottom-to-top display of the sub menus is possible
  • Full window size detection – the menus will always be kept inside the window’s boundaries
  • Automatically adjustable width for the sub menus is possible (including min/max settings)
  • Keyboard navigation friendly (Tab key)

jQuery Responsive Megamenu with CSS3

jQuery Responsive Megamenu with CSS3

Responsive Megamenu is a menu component based in CSS and Javascript code. It can be used like a dropdown navigation, megamenu navigation or both. It’s has a responsive and fluid layout.

Features:

  • 11 Styles
  • Javascript/CSS3 effects
  • Grid system
  • Responsive layout
  • Fluid layout
  • Collapsible
  • Major browsers compatible