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.
Best jQuery Menus Plugins & Tutorials with Demo
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
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 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
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 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 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.
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.
- Accordion (46)
- Ajax (346)
- Animation (1,127)
- Articles (56)
- Bootstrap (259)
- Calendar (61)
- Carousel (105)
- Chart & Graph (126)
- Core Java Script (1,091)
- CSS2 / CSS3.0 (1,359)
- Drag & Drop (190)
- Events (78)
- Forms (564)
- Gallery (571)
- Games (47)
- HTML5 (486)
- Image Effects (211)
- jQuery Mobile (52)
- jQuery UI (77)
- jSON (188)
- Layout (45)
- Maps (105)
- Menus (546)
- Other API (270)
- Other Libraries (15)
- PHP (241)
- Plugins (3,921)
- Popup Window (372)
- Premium (791)
- Responsive (616)
- Slider (478)
- Snippets (162)
- SVG Tutorial (187)
- Tables (165)
- Tabs (103)
- Text Effect (204)
- Video & Audio (197)
- Web (826)
- Wordpress (59)
- XML (31)
- Zoom (101)