jQuery Menus Plugin & Tutorials with Example

MonoList : jQuery List Grouping & Navigation

MonoList : jQuery List Grouping & Navigation

MonoList – Plugin for creating navigation by list and by pretty much everything else.Do you have a long list of HTML elements? Would you like to group it by item’s first letter and allow users to easily navigate by it? With MonoList you can do it.

  • Easy integration with CSS frameworks
  • Set initial letter selection
  • Dealing with prefixes
  • Multilingual support
  • Data navigation
  • AJAX support

jQuery Multi-level Dropdown Menu

jQuery Multi-level Dropdown Menu

Multi-level dropdown menu for buttons. Tree dropdown menu with native look and feel, user-defined item rendering and unlimited items and depth.Supports any HTML for items, multiple combined sync/async datasources.

Features:

  • Render any HTML content
  • Unlimited items and submenus
  • Styling matches operating system/browser look
  • Optional scrollbar
  • Submenus optionally selectable
  • Regenerate items every time
  • Short and sweet; just over 200 lines of cleanly written code

MenuItems : jQuery Navigation Menu for One Page Site

MenuItems : jQuery Navigation Menu for One Page Site

Dynamic jQuery menu plugin that lets you create beautiful and responsive navigation widgets. Optimal for one-page sites.

Dash : Responsive Bootstrap Dashboard Navbar

Dash : Responsive Bootstrap Dashboard Navbar

Dash is responsive Bootstrap dashboard navbar / menu. This item has two navbars, one for top and the other for left. The mobile swipe feature has been added for mobile devices.

Features:

  • Botstrap 3
  • Responsive
  • Dashboard style
  • Mobile friendly with swipe feature
  • Both default Bootstrap icons and font awesome
  • Coded in HTML5 and LESS for CSS
  • Two effects: push and overlay

Auto-Hide Sticky Header with JavaScript & CSS3

Auto-Hide Sticky Header with JavaScript & CSS3

Auto-hide sticky header is a shot that shoots down two rabbits: makes site navigation easily accessible anywhere on the page and saves content space at the same.

Spark: A WordPress Menu and Info Pane Plugin

Spark: A WordPress Menu and Info Pane Plugin

Spark is also delightfully animated, which makes it a memorable element to add to any WordPress website.Spark can be used as your standard menu, a secondary menu, a nifty mobile-only menu, or even utilized as a promotional tool. You can customize all colors, change positioning options, hide the menu button (in which case the sized-down image will act as the menu activator), add any image you’d like, add multi-level accordion menus and so on.We’ve also included a full-screen info pane that can be used to display any extra content you need.

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.



Best jQuery websites design awards