Best jQuery Menus Plugins & Tutorials with Demo

    Navgoco : jQuery Multilevel Slide Menu

    Navgoco : jQuery Multilevel Slide Menu

    Navgoco is a simple JQuery plugin which turns a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded submenus between sessions by using cookies and optionally act as an accordion menu.

    On Scroll Header Effects with jQuery & CSS3

    On Scroll Header Effects with jQuery & CSS3

    You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animations. We’ve also created a Blueprint for an On-Scroll Animated Header to get you started.

    Today we’d like to give you some inspiration for animated headers and show you what kind of effects could be used to spice up your website’s starting element and give it some life.

    Dock Menu : Responsive touch enable jQuery Menu

    Dock Menu : Responsive touch enable jQuery Menu

    This is a beautiful menu like dock with the capability of store a submenu.

    Features:

    1. Touch enabled
    2. Responsive
    3. Infinite dock items
    4. Infinite sub menu items
    5. Animations
    6. Dock properties to change
    7. More than 700 icons

    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!