drag and share
  • Twitter
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • Stumbleupon

Simple Animated Menu for Mootools 1.2

By: OSH Editorial    In: Menu MooTools

Karma - Responsive bootstrapped webapp

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

Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.

x

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.

See a demo here

Written by: OSH Editorial

No Bio yet...

Share this Story

If you enjoyed reading, consider sharing the love with the rest of the world.

No Comments

As you can see there are no comments, so write the first one!

Add Your Comment

Your name

January 18, 2019

We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!