Monday, March 19th, 2007

Fancy Menu: CSS and JS fun

Category: Examples, JavaScript, Library, Showcase

Guillermo Rauch is a sixteen year old hacker who created a fancy menu using CSS and JavaScript based on mootools.

You can use his SlideList and attach away.

javascript

  1. window.addEvent('domready', function() {
  2.   new SlideList($E('ul', 'fancymenu'), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});
  3. });

Now you too will have people right clicking on the menu thinking they can Zoom Out ;)

Fancy Menu

Posted by Dion Almaer at 4:44 am
9 Comments

+++--
3.9 rating from 75 votes

9 Comments »

Comments feed TrackBack URI

Wow man. A hacker really? Hahah everyone at that age thinks they are some 1337 haxxor. I mean come on. Very cool script by the way.

Comment by yaright — March 19, 2007

Very well written tutorial for a cute effect :)

Comment by digitarald — March 19, 2007

This is news? A friend of mine has been using exactly the same effect for a long long time (at least a year or two):
http://www.raychung.com

Comment by Arjan — March 19, 2007

@Arjan:

To be fair, your friend’s is not nearly as smooth.

Comment by Trevor — March 19, 2007

@trevor
I don’t see any difference at all in smoothness here. But even if there was a difference, that’s not exactly my point. If I recreated this same menu, but in vertical, would you consider that news too?

And it’s not about trying to give my friend credits either, he didn’t create the script himself. He used the Thirteenth Parallel Toolkit library (from 2005).

Comment by Arjan — March 20, 2007

Calm down, Arjan. Not everything on Ajaxian is groundbreaking.

Comment by Jeez — March 20, 2007

Looks great, down with flash nav bars!

Comment by Daniel Rust — March 20, 2007

Cool idea, but a bit slow and clunky in firefox2….

Comment by Marcos Caceres — March 20, 2007

I want to check it out, but the link has been broken for 2 days.

Comment by trzl — October 14, 2007

Leave a comment

You must be logged in to post a comment.