Best jQuery Menus Plugins & Tutorials with Demo

Fixed Navigation Transition with CSS3 & jQuery

Fixed Navigation Transition with CSS3 & jQuery

Fixed headers are a must for long pages and menus that need to be seen all the time. The transition between an inline menu and a fixed menu is an added effect that really makes your navigation stand out. I have made two different transition effects: A flip effect and an arrow ribbon effect.

jQuery Sticky Navigation with Smooth Effect

jQuery Sticky Navigation with Smooth Effect

In this quick tutorial we’re going to use jQuery and make a simple sticky navigation. With that done, we’ll improve on our efforts by using jQuery Waypoints to make the effect smoother.

jQuery FancyIndex Plugin

jQuery FancyIndex Plugin

Nowadays almost every “fresh” page looks the (s)hame: One page, very content, much scroll. So even though you really hate usability, enhance your design patters by using customer-orientated plugins like this. It was built using the jQuery library.

Features:

  • Using the directory-function upgrades the user’s experience
  • Customizable trough settings and CSS
  • Highly compatible
  • Highly customizable
  • Uses CSS3 transitions by default

Shrinking Fixed Top Bar with jQuery & CSS3

Shrinking Fixed Top Bar

A very common trend these days is the use of a fixed navigation, which shrinks to become less intrusive as the user scrolls down the page. In this tutorial, I’m going to show you how you can achieve this by using ZURBs Foundation Top Bar, some custom sass and jQuery. To top it off we’ll add a couple of media queries to make our menu responsive.

jQuery ScrollUpBar Plugin

jQuery ScrollUpBar Plugin

The scroll up bar plugin (jQuery) hides the top bar when scrolling down, and show it when scrolling up. It’s specially useful on mobile interfaces to save some precious space.

3D Rotating Navigation with CSS3

3D Rotating Navigation with CSS3

A 3D rotating navigation, powered by CSS transformations. Animated elements are key ingredients of the user experience. In this case a 3D menu can’t just be fun. It has to be efficient.

SlideReveal : jQuery Side Panel Plugin

SlideReveal : jQuery Side Panel Plugin

Show side panel by sliding from the left or right of the page.

FooNav.js : jQuery Simple Navigation Plugin

FooNav.js : jQuery Simple Navigation Plugin

FooNav.js is a free plugin built on jQuery that let’s you make a simple menu to help users navigate either your site or a single pages content. You can create your own custom menu links or let the plugin crawl your page for headers and build up a simple navigation menu itself. There are multiple themes to choose from to suite your site, or if you are so inclined you can create your own with a little custom CSS.

Service.Rmlmenu : jQuery Responsive Multi-Level Menu

Service.Rmlmenu : jQuery Responsive Multi-Level Menu

Service.rmlmenu.jquery is a jQuery plugin that offers a Responsive Multi-Level Menu. Using appropriate device queries in CSS it presents itself as a traditional multi-level dropdown menu on wide screens and as a popup menu on smaller screens.

Hubeleke jQuery Circle Rotate Menu

Hubeleke jQuery Circle Rotate Menu

Hubeleke jQuery Rotate Menu is a circle shaped menu that rotates and retrives its content on click. The plugin generates circle shape with CSS3 properties.When you click on a menu item, the menu will rotate until the clicked menu item reaches to the bottom. Meanwhile its content will be shown/loaded in the content wrapper with an animation.

Features:

  • Easy installation
  • Fully customizable
  • jQuery powered
  • Major browsers support
  • Detailed options
  • Ajax support
  • Circle Shaped Navigation
  • Compatible with other plugins
  • Events and Custom Attributes