Best jQuery Menus Plugins & Tutorials with Demo

    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.

    SlideReveal : jQuery Side Panel Plugin

    SlideReveal : jQuery Side Panel Plugin

    Show side panel by sliding from the left or right of the page.

    FooNav.js : jQuery Simple Navigation Plugin

    FooNav.js : jQuery Simple Navigation Plugin

    FooNav.js is a free plugin built on jQuery that let’s you make a simple menu to help users navigate either your site or a single pages content. You can create your own custom menu links or let the plugin crawl your page for headers and build up a simple navigation menu itself. There are multiple themes to choose from to suite your site, or if you are so inclined you can create your own with a little custom CSS.

    Service.Rmlmenu : jQuery Responsive Multi-Level Menu

    Service.Rmlmenu : jQuery Responsive Multi-Level Menu

    Service.rmlmenu.jquery is a jQuery plugin that offers a Responsive Multi-Level Menu. Using appropriate device queries in CSS it presents itself as a traditional multi-level dropdown menu on wide screens and as a popup menu on smaller screens.

    Hubeleke jQuery Circle Rotate Menu

    Hubeleke jQuery Circle Rotate Menu

    Hubeleke jQuery Rotate Menu is a circle shaped menu that rotates and retrives its content on click. The plugin generates circle shape with CSS3 properties.When you click on a menu item, the menu will rotate until the clicked menu item reaches to the bottom. Meanwhile its content will be shown/loaded in the content wrapper with an animation.

    Features:

    • Easy installation
    • Fully customizable
    • jQuery powered
    • Major browsers support
    • Detailed options
    • Ajax support
    • Circle Shaped Navigation
    • Compatible with other plugins
    • Events and Custom Attributes

    Mega-Site Navigation in CSS & jQuery

    Mega-Site Navigation in CSS & jQuery

    A responsive and easy to customize navigation for mega-sites, enriched by subtle CSS animations and support for devices with javascript disabled.