Best jQuery Menus Plugins & Tutorials with Demo

    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.

    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.