Best jQuery Menus Plugins & Tutorials with Demo

    Animated Border Menus with CSS3 & JavaScript

    Animated Border Menus with CSS3 & JavaScript

    A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples.

    Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. Safari and Mobile Safari).

    SlickNav : jQuery Responsive Mobile Menu Plugin

    SlickNav : jQuery Responsive Mobile Menu Plugin

    Responsive Mobile Menu jQuery Plugin.

    Features:

    • Supports with multi-level menus
    • Flexible, simple markup
    • Cross-browser compatibility
    • Keyboard Accessible
    • Degrades gracefully if javascript disabled
    • Creates ARIA compliant menu

    jQuery CSS3 Modern Menu 3

    jQuery CSS3 Modern Menu 3

    Modern Menu 3 is a clean, modern and easy to use menu. It has a number of features that make it both useful and compelling:

    • It has a clean and attractive design.
    • It offers both a horizontal and a vertical layout.
    • It comes with 8 different themes to choose from.
    • The look is completely customizable.
    • It supports multilevel dropdowns.
    • It has smooth and attractive animations for the buttons as well as the dropdowns.
    • It uses CSS animations for better performance.
    • It has a jQuery animation fallback for browsers that do not support CSS animations.

    Context.js : jQuery Contextual Menus with Twitters Bootstrap CSS

    Context.js : jQuery Contextual Menus with Twitters Bootstrap CSS

    Context.js is a lightweight solution for contextual menus. Currently, there are two versions.

    The first is to be used with Twitters Bootstrap (bootstrap.css specifically). If you do not use or want to use bootstrap.css, there is a standalone stylesheet to give the menu it’s base styles.

    Features:

    • Linted: Valid JS
    • Can be used with or without Twitters Bootstrap.css
    • Event Based Links
    • Anchor Links
    • Headers
    • Dividers
    • Recursive Menus (infinite depth)
    • Vertical Space Detection (turns into a “dropup”)
    • Horizontal Space Detection (Drops to the left instead of right)
    • Add/Delete menus Dynamically

    Animate to Hide and Slide Content with jQuery

    Animate to Hide and Slide Content with jQuery

    In this tutorial I want to demonstrate how we can build a similar interface using jQuery animation. These codes are fairly basic and should work in any fixed-style website layout. This type of design leaves room for hidden content, along with main content cascading down the page.

    Ideally we will be using jQuery animations powered by jQuery UI easing effects. I have created a live example with the navigation bar fixed onto each corner of the webpage. Check out some of my demos and see if this interface could work well in any upcoming design projects.

    jQuery Wheel Menu

    jQuery Wheel Menu

    Wheel Menu is a small jQuery plugin that will add a fully customisable Path-like wheel menu button to your website.

    jElevator : jQuery Inter-Page Navigation Tool

    jElevator : jQuery Inter-Page Navigation Tool

    jElevator is a jQuery plugin that allows webmasters to enhance the navigation of their blog, news, and other content-rich websites. Providing users with scroll-to-top, scroll-to-bottom, and sections menu functionality, jElevator will increase the usability of any page it is added to. This plugin is a perfect fit for pages that contain lengthy content, such as a news/blog post, detailed documentation, or a robust informational page. jElevator will allow users to jump to the information they’re seeking, check the title or date of a news article, or post a comment at the bottom of the page, all without losing their place or having to tediously scroll up and down in search for specific content.

    Features:

    • Auto-Hide Menu
    • Scroll-To-Top Button
    • Scroll-To-Bottom Button
    • Automatic Sections Menu

    Zig Zag Dropdown menu concept with CSS3

    Zig Zag Dropdown menu concept with CSS3

    I found this two years old Dribbble shot by Ignacio Giri. Don’t ask me how, I just don’t remember how did I stumble upon it but one thing is clear: I bookmarked this dropdown menu concept, stared at it a bit and then I thought about making something similar with CSS.

    jquery.arbitrary-anchor.js : jQuery Smooth Scrolling

    jquery.arbitrary-anchor.js : jQuery Smooth Scrolling

    With jquery.arbitrary-anchor.js , you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.