Best jQuery Menus Plugins & Tutorials with Demo

    Easy As Pie – jQuery CSS3 Responsive Navigation

    Easy As Pie - jQuery CSS3 Responsive Navigation

    An easy to use, CSS3/jQuery Responsive Navigation built on the Superfish menu and HTML5. This was developed in part because of the lack of nested responsive menus.

    Included:

    • Modernizr for IE6-8
    • Superfish Menu
    • HoverIntent plugin
    • Data image fallback for lack of png support for IE7
    • Arrow image for IE6 menus

    CSS3 Perspective Page View Navigation

    CSS3 Perspective Page View Navigation

    Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.

    Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are shown with animations. We’ve experimented a bit and we’ve come up with a small set of effects that take the page and move it in 3D to reveal a navigation (or some other content if you like). What’s nice about this is that we literally put the site into perspective, allowing for an interesting view on the content and the navigation possibilities.

    jQuery Bootstrap-style Dropdowns

    jQuery Bootstrap-style Dropdowns

    Bootstrap-style dropdowns in jQuery with some added features and no dependencies.

    One of my favorite Boostrap plugins is dropdowns, but I had a bit of difficulty getting started with them. The docs say you can apply a dropdown to nearly any element, but they really seem to work best with Bootstrap’s navbar, tab, and pill components. Since I was retrofitting an app that was around long before Bootstrap, this wasn’t going to work for me. That and I was hoping to get a scrollable dropdown (with tips!) and a few other features out of the deal. Thus, this plugin was born.

    headroom.js : Hide your header until you need it

    headroom.js : Hide your header until you need it

    Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll. The header on demo site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.

    jQuery CSS3 Slider Timeline Menu

    jQuery CSS3 Slider Timeline Menu

    Learn to create a slider timeline menu with CSS3 animations. It is a fixed navigation that smooth scrolls to new sections with a cool slider effect.You can click on each link as well and it will smooth scroll along with adjusting the dial to the selected section. I liked this idea and took it a step further with giving each section a color. The slider background color will fade to the selected section’s color.

    jQuery Fly Side Menu

    jQuery Fly Side Menu

    Fly Side Menu is a script that will recreate the impressive animation you see on Airbnb’s new iOS7 app using jQuery and CSS3. In additional to that, I’ve also added a few more options for you guys to play around with.

    Wonderful CSS3 Flat Menu

    Wonderful CSS3 Flat Menu
    • Pure CSS3
    • Full responsive
    • Clean flat design
    • Multilevel dropdown menu
    • 17 Preset color schemes
    • Multi-column content
    • Left or right item alignment
    • Fullwidth dropdown
    • Font Awesome icons
    • Well documented

    Jeegoocontext : jQuery ContextMenu plugin

    Jeegoocontext : jQuery ContextMenu plugin

    Jeegoocontext is a jQuery plugin that allows for multiple custom contextmenus (pop-up menus) to exist on a single page. The plugin is able to transform any unordered list appended to the body into a multi-level, intelligently positioned styled contextmenu via a single call.

    jQuery Full Page Navigation

    jQuery Full Page Navigation

    jQuery Full Page Navigation is a simple script that let you create a full page navigation (navigation shown as columns) dynamically with one JS call. You can define how your navigation will be divided, how fast/slow the animation will be and many more features.

    stickUp : jQuery Plugin to “sticks” an Element

    stickUp : jQuery Plugin to "sticks" an Element

    stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.