/ best free open source web resources /


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.


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.


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.


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.


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.


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+.


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.


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.


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

CSS Dock v2.0 with Leaner Code & Better Documentation

Posted · Category: Menu, MIT License

CSS Dock (V2) is an experiment mimicking the Dock of OS X using only CSS. Labels, animations, reflections and indicators… it’s all there. This is Version 2 of my CSS Dock featuring leaner code and better documentation.

The dock works best in current WebKit browsers (Safari and Chrome) but the good news is: it degrades quite gracefully. So while you won’t get all effects in all browsers, the experience won’t be broken either (except for IE, of course).


Requirements: Webkit Browsers
Demo: http://michaelhue.com/cssdock/
License: MIT License

How to Create iOS-like Home Screen using CoffeeScript

Posted · Category: License Free, Menu

Tutorialzine has written a great tutorial: Create an iOS-like Home Screen using CoffeeScript. CoffeeScript is a neat programming language meant to enhance the good parts of JavaScript, while working around the not so good. It makes OOP easy and introduces a number of useful additions such as comprehensions, new syntax for functions and scope handling, along with numerous small improvements.

But don’t fall pray to the hype surrounding it just yet – CoffeeScript isn’t going to replace JavaScript any time soon, as it sacrifices some of the agility that JS provides in attempt to make development easier. The CS way might not be the best fit for your project.


Requirements: CoffeeScript
Demo: http://demo.tutorialzine.com/2011/10/ios-homescreen…
License: License Free

Page 4 of 11«123456789»...
Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons