Best jQuery Menus Plugins & Tutorials with Demo

    Facebook Style Slide Out Menu in jQuery Mobile

    Facebook Style Slide Out Menu in jQuery Mobile

    I wanted to recreate the slide out menu in the Facebook iPhone app. I also wanted implement it in a jQuery mobile layout. This is what I came up with.

    UIKit – modern ui components for the modern web

    UIKit - modern ui components for the modern web

    UIKit is a small (4kb minified / gzipped) collection of flexible, cohesive, decoupled components for the modern web. With an emphasis on structure-only styling making it simple to apply application specific styling. UIKit is not a replacement for larger UI frameworks, nor is it a CSS framework such as Bootstrap.

    Styling Dark Select Dropdown With Dropkick.js

    Styling Dark Select Dropdown With Dropkick.js

    HTML select elements with their option tags cannot be completely customized using CSS, but what if we want to style a dropdown just as easily as <div>, <a>, <ul>, and <li> elements can be styled? Today, we’ll style the Premium Pixels Dark Select Dropdown using DropKick.js to help us do just that.

    Meny : A CSS 3D fold-in menu concept

    Meny : A CSS 3D fold-in menu concept

    Meny is a three dimensional and space efficient menu concept. CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement.Move your mouse to the left edge of this page — or swipe in from the left edge if you’re on a touch device — to expand the menu.

    jQuery Fubar – How To Create A Website Toolbar in jQuery

    jQuery Fubar – How To Create A Website Toolbar in jQuery

    Over the past year, we’ve seen website toolbar’s become an increasingly popular way for site-owners to offer users a consistent set of powerful social features, regardless of what page they’re on – Share, Subscribe, Tweet, Talk – you name it and chances are there’s a toolbar out there that offers some variation of these features.

    In today’s post, I’m going to show you how to create your very own jQuery-powered website toolbar and then we’re going to pack it full of lots of useful widget features such as those found in the Wibiya-toolbar – I call it jQuery Fubar.

    hoverFlow Plugin : A Solution to Animation Queue Buildup in jQuery

    hoverFlow Plugin : A Solution to Animation Queue Buildup in jQuery

    hoverFlow  is a another Solution to Animation Queue Buildup in jQuery.Brandon Aaron published a quick tipon how to prevent animation queue buildup in hover animations. Since I was not satisfied with his solution, I tried to find another.After taking some wrong paths and learning a lot about jQuery’s animation (queue) system, I think I finally found a good solution.

    The last locigal step was to wrap it up into a nice jQuery plugin – and so hoverFlow was born.

    jQuery SideBar Plugin

    jQuery SideBar Plugin

    jQuery SideBar Plugin is display sidebar menu.We can show tabbed sidebar menu from anyside of the screen with this plugin.

    jQuery Dashboard Vertical Navigation

    jQuery Dashboard Vertical Navigation

    Looking to give your next web app or custom cms dashboard that edge? If so then this accordion style jQuery dashboard menu will do just that.Impress your users with the modern dark design whilst giving them the best possible experience.

    This script comes with the choice if 6 different colours and is very simple and easy to implement.

    Simple, Yet Usable jQuery Based Dropdown Menu

    Simple, Yet Usable jQuery Based Dropdown Menu

    Based on the amount of requests i’ve received lately on this post, on creating a simple, yet extendable dropdown menu, i believe easiest way to achieve this would be through simple jquery, so here it is.

    Build a User Settings Dropdown Menu with jQuery

    Build a User Settings Dropdown Menu with jQuery

    There are many social networking websites designed with a specific layout in mind. User profile pages are some of the more complex designs included with a community-based network. You’ll often have access to edit user profile settings, subscriptions, and e-mail options. I want to create such a simple menu for a minimalist Digg-style layout.

    In this tutorial I have actually built two working demo pages. The first runs on jQuery to fade the menu in and out as you hover. The 2nd demo is built using just CSS effects which display the submenu using the :hover selector. It’s even easier to combine both methods for legacy support – however at that point I’d recommend the CSS-only methodology. But you can see for yourself in the live demo examples and build this yourself by following my code below.