WebAppers

/ best free open source web resources /

Shopify

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

Posted · Category: Menu, MIT License

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.

toolbar-js

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

jQuery Dropdown Menu for Responsive Design

Posted · Category: License Free, Menu

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.

top-navigation-menu

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

A Responsive Off-Canvas Menu using CSS Transforms

Posted · Category: License Free, Menu

In essence responsive design is about adapting a website to best fit the device viewport. We use CSS media queries to build fluid grids and flexible media. Therefore, we can create a canonical web location without fragmentation of content or users. It’s a single codebase to develop and deploy. In theory, it is easy to navigate on any device.

David Bushell has created a responsive off-canvas menu demo using CSS transforms and transitions. You can give it a try on your mobile device. This was purely a technical demo to see the performance of CSS transforms & transitions. Unfortunately, as many have fed back, there are rendering issues that cause flickering in some browsers.

responsive-menu

Requirements: -
Demo: http://dbushell.com/demos/viewport/menu1/
License: License Free

JavaScript Dynamic Tree View Controls jQuery Plugin

Posted · Category: Menu, MIT License

Dynatree is a jQuery plugin that allows to dynamically create html tree view controls using JavaScript. It is optimized for large dynamic trees (DOM elements are only created when really needed). Programmable through a rich object oriented interface. It support for lazy loading and Ajax.

It supports Checkboxes and hierarchical selection, drag and drop, persistence. And it is Keyboard aware. It is open source and released under MIT License.

jquery-tree-plugin

Requirements: jQuery Framework
Download Link: https://code.google.com/p/dynatree/
License: MIT License

Create 3D and Space Efficient Menu with Meny

Posted · Category: Menu, MIT License

Meny is a three dimensional and space efficient menu. Meny works best in browsers with support for CSS 3D transforms, although it falls back on 2D animation for older browsers. Supports touch events for mobile devices. Meny requires two HTML elements to work: a menu and the page contents. The class names are not used by the library so chose anything you want.

Move your mouse towards the arrow, or swipe in from the arrow if you’re on a touch device, to open. Meny can be positioned on any side of the screen: top, right, bottom, left.

3d-menu

Requirements: JavaScript Framework
Demo: http://lab.hakim.se/meny/
License: MIT License

Responsive Horizontal Navigation Menu jQuery Plugin

Posted · Category: CC License, Menu

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy, even on responsive designs.

You can see the difference between a horizontal navigation with no fixed widths and then with a navigation that has the plugin applied to it. There are no requirements to how you style the navigation and adding padding, margins or borders to any of the elements won’t break the effect.

responsive-navigation

Requirements: jQuery Framework
Demo: http://sebnitu.github.com/HorizontalNav/
License: Creative Commons License

How to Create a Sticky Navigation Menu with jQuery

Posted · Category: License Free, Menu

Ribbons are liked for a reason, though — they break the mostly flat design paradigm that we’re traditionally bound to, and they’re one of the few visual elements to do so in an inconspicuous way.

Webdesign Tuts has written a great tutorial: Create a Sticky Navigation Header Using jQuery Waypoints, which tells us how to create an alternative visual style for such elements, which is more natural-looking and aesthetically pleasing.

sticky-menu-jquery

Requirements: jQuery Framework
Demo: http://webdesign.tutsplus.com/tutorials/javascript-tutorials…
License: License Free

Highly Customizable Pagination jQuery Plugin

Posted · Category: Menu, MIT License

jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load.

With jPages you can create as many navigation panels as you want and you can choose exactly where to place them. The plugin is unobtrusive and it won’t apply any extra styles to the items you are paginating. And it is compatible with All Browsers and IE7+.

jquery-pagination

Requirements: jQuery Framework
Demo: http://luis-almeida.github.com/jPages/
License: MIT License

Lightweight jQuery Collapse with Cookie Support

Posted · Category: BSD License, GPL License, Menu, MIT License

jQuery Collapse is a plugin that delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure). It includes features like cookie persistence, ARIA compliance, and is designed to be flexible and modular enough to be used in many different’t scenarios.

The plugin will gracefully degrade if cookie support is not available. It has been fully tested in IE6+, Firefox3+, Chrome5+, Safari4+, Opera 10+. jQuery-Collapse is designed to be flexible and modular. Options include custom callbacks to satisfy every customization need.

jquery-collapse

Requirements: jQuery Framework
Demo: http://webcloud.se/code/jQuery-Collapse/
License: MIT, BSD, GPL License

The jQuery Context Menu Plugin

Posted · Category: Menu, MIT License

The jQuery ContextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike the other similar plugins, contextMenu doesn’t need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.

The contextMenu can provide a simple list of clickable commands, or offer an in-menu form. This makes very simple attribute modification possible. The contextMenu knows the two callbacks show and hide which can be used to update the state of commands within the menu. This allows en/disabling commands, changing icons or updating the values of contained <input> elements.

jquery-context-menu

Requirements: jQuery Framework
Demo: http://medialize.github.com/jQuery-contextMenu/
License: MIT License

Page 3 of 10«123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons