Open Source Resources for Web Application Developers

When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abound.

It’s nice to offer users a way to get your feeds, so typically you will see a feed icon lurking around a site somewhere. At times, you will see a list of two, three or more links to different feeds offered on a site. Why not have an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site?

jQuery Feed Menu can do this for you easily. It allows users to click your feed icon and be presented with a list of feeds to choose from.

Requirements: jQuery Javascript Framework
Demo: http://www.komodomedia.com/samples/feed_menu/
License: Creative Commons 3.0 License

• 21 Comments

Snook read Dave Shea’s article on CSS Sprites using jQuery to produce animation effects, he felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too.

Changing the position of the background image felt to be the best approach to creating the type of effect we’re looking for. Snook has shown us Background-Position plugin and published an article “Using jQuery for Background Image Animations” about how to use it. The script to put this altogether is really straightforward. The animation needs to run when the user moves their mouse over and out of the navigation. The key thing to note is that any animation is stopped before attempting to animate again. This avoids animations queuing up from repeatedly moving the mouse in and out of the element.

Requirements: jQuery Framework
Demo: http://snook.ca/technical/jquery-bg/
License: MIT, GPL License

• 1 Comment

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system. MenuMatic has the following main features.

• Search Engine Friendly: Only manipulates existing links, does not generate links with javascript.
• Usable: Adjust hide delay to keep menus from disappearing to quickly.
• Accessible: Tab through main menu links with tab key. Navigate through drop down menus with arrow keys.
• Fails Gracefully: Falls back to suckerfish CSS based drop down menu system in the absence of javascript.
• Stylish: Control how menu looks with CSS, add flair with some effects.
• Flexible: With plenty of options (and more coming down the road) and the open source code, make it do your bidding.

Requirements: MooTools 1.2 Core
Demo: http://greengeckodesign.com/projects/menumatic.aspx
License: MIT License

• 7 Comments

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the some nice features as well. The reveal of sub-menu is animated, uses a fade-in by default but can be given a custom object to be used in the first argument of the animate function. The animation speed is also customisable but is set to “normal” by default.

There is a set of callback functions (onInit, onBeforeShow, onShow and onHide) available as well, allowing for further enhancements and functionality to be added without needing to alter the core Superfish code.

Requirements: jQuery v1.1.3.1+
Demo: http://users.tpg.com.au/j_birch/plugins/superfish/
License: MIT and GPL License

• 4 Comments

Carousel.us is a Javascript 3D carousel, using the prototype.js and scriptaculous.js frameworks. It also uses PHP Easy Reflections by Richard Davey. You will find a configuration file which you can define the default parameters or you can also define them via URL using the GET method. You can set the Reflection opacity, Reflection height, spacing between images, Position of the carousel center, Carousel speed and Add onclick event on each image.

Requirements: Prototype and Scriptaculous Framework
Demo: http://www.piksite.com/carousel.us/carousel.us.php
License: Creative Commons License

• 15 Comments

mcDropdown jQuery Plugin is an unique UI control that would allow users to select from a complex hierarchical tree of options. This control is intuitive and it allows for both quick mouse and keyboard entry. After many rounds of discussion internally and with customers, GivaLabs has created mcDropdown jQuery Plugin with the following features.

• Creates a multi-column hierarchical select UI component
• Binds a text input field or div element to a list element (included nested lists)
• Menus are automatically split into columns as needed
• Menus are positioned to always stay on the screen
• Autocomplete keyboard entry (only valid options are allowed)
• Menu automatically scrolls into viewport when opened

Requirements: jQuery v1.2.6+
Demo: http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm
License: Apache License 2.0

• 1 Comment

We have seen a lot of Fisheye menus, however The Fisheye component is a bit different to others. It is built with Flex which shows us how the best of what flex gives you (productivity, development process, consistent component model) with the best of what people have been doing in flash for years (rich, highly interactive, fluid, etc).

The Fisheye component is based around the concept of itemRenderer factories, just like the flex list and charting components. The goal is to use composition to separate behaviour from content, so you can reuse the basic fisheye effect across many different applications and uses. It’s available under the MIT Open Source license, so feel free to use it or modify it in your own applications. Check out the 2D Fisheye Demo, it looks really nice.

Requirements: Flex
Demo: http://www.quietlyscheming.com/blog/components/fisheye-component
License: MIT License

• 11 Comments

ddmenu is a simple MooTools-based script to create you’re own context menus. The Menu Appearance is adapted to the System Content Menu behavior. You can enable or disable any selected menu items. Users can switch between ddmenu and browser default context menu easily. Menu styling can be easily defined in external stylesheet as well. At last, It has full A-Graded browsers support which has been tested on Firefox 2, Safari 3, Internet Explorer 6/7, Opera 9 under Windows. Firefox 2, Safari 3 under Mac OS X.

Requirements: Mootools framework
Demo: http://webhike.de/scripts/dd/ddmenu.html
License: MIT License

• 3 Comments

IzzyMenu.com let us creating professional looking CSS menus for your Website easily. You can create your menu with drop down DHTML sub-menu online, without writing a single line of code. And more importantly, it is free. There are many different menu styles for you to choose from. You can customize the font, background, border, padding, margin, link, hover state and etc… anything you can imagine. And after all, you can download the menu and integrate into your website easily.

Requirements: -
Demo: http://www.izzymenu.com/
License: License Free

• 10 Comments

Remember the time when I introduced Nice List of Open Source Fish Eye Menu? The dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Now, we have another solution for it, MacStyleDock function allows this feature to be implemented easily.

Safalra has pointed out some usability issues when using dock as well. Anyone considering using the dock should be aware of the usability issues it raises. Firstly, the dock is generated entirely using JavaScript. If no alternative navigation is available then the site will be impossible to navigate for those without JavaScript. Secondly, the dock item magnification itself harms usability. Because the dock icons expand dynamically, they move on screen. The user has to correct for this movement, and this slows down their use of the dock.

Requirements: Any Modern Browsers with Javscript Enabled
Demo: http://www.safalra.com/web-design/javascript/mac-style-dock/
License: License Free

• 5 Comments