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
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
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
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
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
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
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
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
We are now coming to a point where the browsers are supporting a lot of new features, giving us more opportunities to take advantage of previously unused pseudo elements. Advanced Css Menu Tricks is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall.
Advanced Css Menu Tricks will work perfectly in any modern browser, yet still be fully functional in your older version of IE as well.
Requirements: –
Demo: http://www.3point7designs.com/web-design2.html
License: License Free
One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn’t matter too much here because all those kind of applications share always the same idea: Rotating. This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful. It’s a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.
Requirements: Internet Explorer, Firefox, Opera and Safari
Demo: http://zendold.lojcomm.com.br/icarousel/
License: MIT License
