Best jQuery Menus Plugins & Tutorials with Demo

    scrollIt.js : jQuery plugin to Vertically Scrolling Pages

    scrollIt.js : jQuery plugin to Vertically Scrolling Pages

    A jQuery plugin that makes it easy to create paginated, feature vertically scrolling pages.

    Features:

    • Easy to implement: One JS call, just put data- attributes on the DOM
    • Lightweight: ~1kb minified
    • Active Class: Your navigation is updated automatically
    • Configurable: Set the animation easing, duration, callbacks and more
    • Keyboard Navigation: Press the up and down keys to move…

    Google Play’s Multi-Level Navigation with jQuery & CSS3

    Google Play’s Multi-Level Navigation with jQuery & CSS3

    Google have recently released a new Google Play website complete with a new redesign and what caught my attention was the way they implemented their navigation bar. With the smooth animation and how they let users peek at the root-level menu by simply hovering a back button, I decided to build a similar navigation menu from scratch using HTML, CSS and jQuery.

    jQuery Scroll Sections Plugin

    jQuery Scroll Sections Plugin

    A plugin that allows you to define (full page) sections and scroll between them with mousewheel, keyboard, scrollbar and/or touch moves.

    menuSlider.js : Simple jQuery Menu Slider

    menuSlider.js : Simple jQuery Menu Slider

    Simple jQuery menu slider.Call the menuSlider on the container ({Border Thickness, Border Style, Border Color, Sides of Border, Background Color, Background Border Radius, Transition Speed, Transition Type}).The item the slider returns to has an class of “selectedMenuItem”. To switch which item is the current item, change which item has the selectedMenuItem class. I achieved it above by adding a click function in the script .

    Multi-Level Push Menu in JavaScript

    Multi-Level Push Menu in JavaScript

    Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.

    Nav-bar : jQuery Navigation bar plugin

    Nav-bar : jQuery Navigation bar plugin

    A navigation bar plugin to follow background with cursor.

    Building a Circular Navigation with CSS Transforms & JavaScript

    Building a Circular Navigation with CSS Transforms & JavaScript

    In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique.

    Like I mentioned, there’s going to be some basic math involved, along with CSS transforms to create these styles. But don’t worry, the math is really very simple and I’ll be going through it step by step.

    CSS3 Creative Link Effects

    CSS3 Creative Link Effects

    Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation.

    SimpleSlideView : jQuery plugin for the simplest of sliding views

    SimpleSlideView : jQuery plugin for the simplest of sliding views

    SimpleSlideView is a nifty little jQuery or Zepto plugin for the simplest of sliding views.This plugin was designed to work well with non-fixed layouts, which means it can be helpful to scroll to the top of the window or container prior to a view changing. If a $.scrollTo plugin is available, SimpleSlideView will attempt to use it by default. It has been tested with jquery.scrollTo and ZeptoScroll.

    Box Lid Menu : jQuery Navigation Menus Plugin

    Box Lid Menu : jQuery Navigation Menus Plugin

    This jQuery plugin creates the box lid effect for navigation menus, and is inspired by Toybox. You can see it in action by hovering your mouse over the menu bar on the left.