jQuery Menus Plugin & Tutorials with Example

Engaged Social Navigation with jQuery

Engaged Social Navigation with jQuery

Engaged social menu is free to use and is a super simple menu that can be easily integrated into any website including WordPress. Some of the beautiful icons from font awesome has been used to increase the beauty. Menu is meant for sites, that needs to preview their social status prominent and more visible to users.

Fixed Auto-Hiding Nav Bar with JavaScript

Fixed Auto-Hiding Nav Bar with JavaScript

Top navigation bars have always been popular in web design. Since these elements contain such vital information some designers like to keep them fixed on-screen while scrolling down the page. But unfortunately this can get in the way of content if the bar is too large. A popular online blogging platform Medium created an interesting method of hiding the bar when scrolling down and re-showing it when scrolling back up.

Smart Fixed Navigation with CSS3 & jQuery

Smart Fixed Navigation with CSS3 & jQuery

A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It’s smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.

JsMorph : JavaScript Motion framework

JsMorph : JavaScript Motion framework

jsMorph is a morphing – motion – tweening framework that knows what you need to do… get going! It’s a nice ensemble of best timing, fast, smart and resource saving algorithms and convenience.

jsMorph is a completely Cross-Browser, pure javaScript animation framework that can manipulate almost any and multiple stylings of multiple HTML elements. It auto detects start positions, auto converts units, automatically adjusts rendering speed and corrects time leaks for smoother rendering experience.

jQuery Slideout Menu

jQuery Slideout Menu

We’ve created an elegant jQuery-powered animated slideout menu. We were inspired by the simple effect found at Outdated Browser and extended the menu to also work in a variety of places. Try it as a top menu, as well as a right-side menu. Let’s dive into some code and learn how to use this drop.

contextMenu.js : jQuery Context Menu Plugin

contextMenu.js : jQuery Context Menu Plugin

contextMenu.js is a plugin to create windows like context menu with keyboard interaction, different type of inputs ,trigger events and much more.

Features:

  • Use as simple popup or as a context menu. With some twick can be used for multi purpose.
  • Adjust position and size to fit in viewport.
  • Keyboard interaction.
  • Support different type of inputs (json, UL list).
  • Trigger Context menu with right-click, left-click,hover or any other mouse events.
  • Css outside of javascript so you can edit the look of menu.
  • Enable/disable options.
  • Optional icons for commands.
  • Lot of configurable options.
  • Submenus

On-Scroll Animated Header with CSS3 & jQuery

On-Scroll Animated Header with CSS3 & jQuery

We present the very popular fixed, on scroll animated header that changes it’s size and the orientation or visibility of the components within based on the user’s scroll action. As the user begins to scroll and engage with content, the header area is elegantly minimized to leave more of the viewport open for content.

Zetta Menu : jQuery Mega Menu

Zetta Menu : jQuery Mega Menu

Zetta Menu is jQuery mega menu plugin.

Features:

  • Mega menu comes with CSS3 animations.
  • Over 430 Icons (Font Awesome)
  • It is fully responsive and have 3 mobile versions.
  • Different layouts: horizontal top and bottom, vertical right and left.
  • 3 ways of drop down (hover, click, toggle)
  • 12 column grid system.
  • 6 different templates with unlimited color schemes.

Menu Transition In Effects with jQuery

Menu Transition In Effects with jQuery

This one here is something I thought of after seeing the surge in popularity with push in side menus. I’ve seen a couple websites use menu transition to animate the menu items as they appear. Here I will show a simple effect of making the menu links stack upwards. The second effect I created is a Metro inspired menu that stacks upwards but uses random delays to make it look unique every time.

jQuery WikiNav

jQuery WikiNav

WikiNav is a jQuery plugin to create a wiki-style menu from all existing headings on your page. With few lines of JavaScript code you can achieve an elegant menu for your documentation.

Features:

  • Easy Setup
  • Full jQuery & css compatible
  • Responsive Design
  • Animated Scroll To


Best jQuery websites design awards