WebAppers » Menu

Create Slick Sliding Menus for Mobiles with jQuery

Ray Cheung — Wed, 15 May 2013 07:24:47 +0000

The jQuery.mmenu-plugin is a jQuery plugin for creating slick, app look-alike sliding menus for you mobile website with only one line of javascript. The jQuery.mmenu-plugin provides a few options for customizing your menu. The default option values can be overridden by passing new values to the method.

After the plugin has been fired, a series of custom events are available for the menu. All custom events are bound to the .mmenu-namespace. The jQuery.mmenu-plugin was built using the jQuery-library, it is dual licensed under the MIT and GPL licenses.

Requirements: jQuery Framework
Demo: http://mmenu.frebsite.nl/
License: MIT, GPL License

Sponsors

Professional Web Icons for Your Websites and Applications

How to Create a Retina-ready Responsive Menu

Ray Cheung — Thu, 09 May 2013 07:01:51 +0000

Advertise here via BSA

Codrops has shared a tutorial: Responsive Retina-ready Menu that teach us how to create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game.

The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we use an icon font so that the icons of the menu won’t get pixelized on resize.

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Create an Amazon-like Navigation Menu with jQuery

Ray Cheung — Wed, 01 May 2013 07:10:20 +0000

Advertise here via BSA

menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu’s contents. This problem is normally solved using timeouts and delays. menu-aim tries to solve this by detecting the direction of the user’s mouse movement. This can make for quicker transitions when navigating up and down the menu. The experience is hopefully similar to amazon.com/’s “Shop by Department” dropdown.

menu-aim assumes that you are using a menu with submenus that expand to the menu’s right. It will fire events when the user’s mouse enters a new dropdown item and when that item is being intentionally hovered over. You can take a look at the detailed explanation here.

Requirements: jQuery Framework
Demo: https://github.com/kamens/jQuery-menu-aim
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

How to Create a Youtube Menu Effect with CSS & JS

Ray Cheung — Mon, 29 Apr 2013 07:01:15 +0000

Advertise here via BSA

Codrops has shared a Simple Youtube Menu Effect Tutorial, which teach us how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”).

The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is clicked. Once it’s clicked the menu icon slides to the right and the label moves up while the list items fade in sequentially. We’ll add some more style and effects to it in order to make it a bit more interesting.

Requirements: JavaScript Framework
Demo: http://tympanus.net/Tutorials/YouTubeLeftSideMenu/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Responsive Nav: Toggled Navigation for Small Screens

Ray Cheung — Thu, 11 Apr 2013 07:01:24 +0000

Advertise here via BSA

Responsive Nav is a tiny JavaScript plugin which weighs only 1.7 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance.

It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions. You can view live demo and resize this window to see the plugin in action. It works in all major desktop and mobile browsers, including IE 6 and up.

Requirements: JavaScript Framework
Demo: http://responsive-nav.com/demo/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Lightweight Customisable “Scroll to Top” jQuery Plugin

Ray Cheung — Wed, 03 Apr 2013 07:10:34 +0000

Advertise here via BSA

ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease. To create a visible line to help determin an ideal scroll distance from the top, assign a valid CSS colour to the activeOverlay setting.

ScrollUp is fully customisable through CSS which makes it simple to fit right into your project. Simply target the scrollUp’s generated ID in your CSS file and set your styles. It is released under MIT License.

Requirements: jQuery Framework
Demo: http://markgoodyear.com/2013/01/scrollup-jquery-plugin/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Create Responsive Side Menu with Sidr jQuery Plugin

Ray Cheung — Wed, 03 Apr 2013 07:01:04 +0000

Advertise here via BSA

Sidr is a handy jQuery plugin for creating side menus and the easiest way for doing your menu responsive. You will be able to create multiple sidrs on both sides of your web to make responsives menus or not, it works perfectly on desktop too.

There are two themes included with the plugin, a dark one and a light one. You can use them, create a new one or override them with your own styles. It is released under MIT License.

Requirements: jQuery Framework
Demo: http://www.berriart.com/sidr/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Create Panel Style Menu with jPanelMenu jQuery Plugin

Ray Cheung — Fri, 08 Mar 2013 07:05:31 +0000

Advertise here via BSA

jPanelMenu is a jQuery plugin that creates a paneled-style menu like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications.

Animation is handled by CSS transitions, for browsers with support. CSS transitions are hardware-accelerated on supporting devices, so the animations are silky smooth. For browsers that do not support CSS transitions, the jQuery animation engine is used as a fallback.

Requirements: jQuery Framework
Demo: http://jpanelmenu.com/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Create Tooltip-Style Toolbars for Web Apps with Toolbar.js

Ray Cheung — Fri, 01 Feb 2013 07:05:28 +0000

Advertise here via BSA

Toolbar.js allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the twitter bootstrap icons and provides flexability around the toolbars display and number of icons.

Toolbars can be attached to any element required. You can run as many toolbars as required. Toolbars are responsive and follow the element on resize. The implementation is pretty straightforward with simple options. It is released under MIT License.

Requirements: jQuery Framework
Download Link: http://paulkinzett.github.com/toolbar/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

jQuery Dropdown Menu for Responsive Design

Ray Cheung — Wed, 30 Jan 2013 07:01:42 +0000

Advertise here via BSA

Top Drawer is a smooth dropdown menu for responsive web design. It is designed to demonstrate smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.

Tap the menu icon in the top right. The click event will assign the class of active to the drawer container which alters the translate value to bring it into view. Modernizr will detect whether the user’s device is capable of CSS transforms, if it isn’t we simply show and hide the menu after the button is pressed – no point in animating if it isn’t going to work smoothly.

Requirements: jQuery Framework
Download Link: http://www.jordanm.co.uk/lab/topdrawer
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications