Posts Tagged ‘MooTools’
Simple Animated Menu with Mootools

Curious how to build something like the menu featured on this site for your next web design project? (note IE6 users – the menu is not implemented for you as your browser does not properly support png transparency, but with a solid background, it would work great). To make the menu, you won’t even have to muck about in javascript.

Simply define:

  • a container for the background image
  • the nav elements
  • the ‘current’ nav element ID
  • the animation’s horizontal track (the y coordinate of the background-image)
  • the left offset of the image in relation to the nav element

Basically, you just tell the function where to put the background image you want to animate, what the buttons are and how to identify the current id, then position its x and y coordinates in relation to the elements. If you are new to javascript web development, and not sure what this all means, keep reading. It breaks down very simply.

mootools_menu

Requirements: MooTools 1.2
License: Public Domain Certification
Demo: http://www.consideropen.com/blog/2008/06/simple-mootools-12-animated-menu/


No Comments »
mRotate – A MooTools Plugin

mRotate is a plugin for MooTools framework. It is an adaptation from jQueryRotate.js whose its author, Pawel Witkowski, defines it like “[...] a final product of a Wilq32.PhotoEffect Snippet. Actually you can use this simple and tiny script to get effect of rotated images directly from client side (for ex. user generated content), and animate them using own functions.”

mrotate

Website: http://www.piksite.com/mRotate/index.html
Demo: http://www.piksite.com/mRotate/mRotate.html
Download: http://www.piksite.com/downloads/mRotate.zip


No Comments »
MenuMatic – Dynamic Drop Down Menu

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-horizontal

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
Website:
http://greengeckodesign.com/?q=menumatic
Download: http://menumatc.googlecode.com/files/MenuMatic_0.68.3.zip


No Comments »
Your ads
flabell
advertise
Advertisement