Update: We are no longer featuring the simple animated menu on our site, and will get a demo up soon. In the meantime, you can check out the source below or download it.
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.
Installation
Install mootools 1.2, then copy and paste the code before the </head> tag in your html file, or save it as a .js and pull it in.
- Download mootools 1.2, in my opinion, the best javascript library around.
- Upload mootools 1.2 and link to it in the head tag (<script src=”/js/mootools1.2.js” type=”text/javascript”>)
- Place the menu code between script tags (<script type=”text/javascript”> </script>), before the end of the head tag in your html (or)
- Save the code as simple_animated_menu.js (or whatever you like) and link to in the head tag (<script src=”/js/animated_moomenu.js” type=”text/javascript”>)
Configuration
Javascript
You can configure the the code to work with your current menu by defining the options when calling the navArrowSlider() function.
- Define the ID of the nav wrap
- Define the navigation elements
- Define the ID you use to denote the current tab
- Define the background y position (the horizontal track for the image).
- Define the left offset of the image in relation to the nav element (integer only, no “px” necessary)
navArrowSlider( 'nav_wrap', // ID of nav wrap '#nav_wrap ul li', // Array selector of nav elements 'active_nav', // ID of current nav element '20px', // Background position y of background image '20' // INT ONLY - How far left from the right edge of the nav element that the image settles );
HTML
To use this code as a template for a new web design, you can copy and paste the following code.
<div id="nav_wrap"> <ul> <li id="active_nav">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> <li>Tab 4</li> </ul> </div>
CSS
Aside from your standard menu styles, you will need to add:
#nav_wrap { height: 100px; /* however tall it needs to be to fit your background image */ width: 100%; background-image: url(/images/fancy_menu_image.png); padding-top: 50px; /* gives the image room to be viewed, pushing the ul down */ }
Notes:
This code has been tested in FF 3.0, FF 2.0, IE 7, IE 6 (minus image transparency), Safari for Windows and Opera 9.5.
Be sure to keep the ‘domready’ function around navArrowSlider() as mootools requires it to run.
The image will only return to the active nav element when you leave the ‘nav_wrap’ area. This lets you control when the image snaps back – for example, you can have it snap immediately when they leave the tabs by setting ‘nav_wrap’ to ‘width: auto; height: auto;’.
You can use the code anyway you like, and I would appreciate you letting me how if you use it your next web design project and what you think.
Hope you find this useful, and I look forward to hearing any feedback, questions or other comments.
Download a zip of all necessary files
*Including the mootools 1.2 core, the ’simple animated menu’ javascript file, an html menu file, a simple css file and an image.
Or you can copy and paste the code below.
var navArrowSlider = function(navWrap, navElementsArray, activeID, arrowY, leftOffset) { var youAreHere = new Fx.Tween($(navWrap), { duration: 1200, transition: Fx.Transitions.Elastic.easeOut //adjust transition effect here }); $$(navElementsArray).each(function(item){ item.addEvent('mouseenter', function() { var thisPos = item.getPosition(navWrap).x + item.getSize().x - leftOffset; youAreHere.cancel(); youAreHere.start('background-position', thisPos + 'px ' + arrowY + 'px'); }); }); var currentArrow = function() { youAreHere.cancel(); var activePos = $(activeID).getPosition(navWrap).x + $(activeID).getSize().x - leftOffset; youAreHere.start('background-position', activePos + 'px ' + arrowY + 'px'); }; //correct IE rendering problem (without this, it wont go to the active nav onload) var activePos = $(activeID).getPosition(navWrap).x + $(activeID).getSize().x - leftOffset; $(navWrap).setStyle('background-position', activePos + 'px ' + arrowY + 'px'); //works to set image to starting position in other browsers currentArrow(); $(navWrap).addEvent('mouseleave', currentArrow); }; window.addEvent('domready', function() { navArrowSlider( 'nav_wrap', // ID of nav wrap '#nav_wrap ul li', // Array selector of nav elements 'active_nav', // ID of current nav element '20px', // Background position y of background image '20' // INT ONLY - How far left from the right edge of the nav element that the image settles ); });
This work is dedicated to the Public Domain.
Tags: free download, interface design, javascript, mootools, mootools plugins, navigation
[...] is a nice looking animated menu built with the MooTools Javascript framework. It’s clean and simple to implement and features [...]
I am using this for an asp website, when I test in html it works fine, but testing to the server nothing works, is there something I can use to fix this?
Thank you …. this menu tutorial with mootools has me very helped.
[...] 6.Simple Animated Menu for Mootools 1.2 [...]
This is an awesome tutorial, but I have a problem. Other than being completely new to javascript and mootools. I would like this to work for a vertical navigation. How could I accomplish this if at all possible?
Sleepytoast – I would check out morphlist, it’s a much more developed script and works vertically:
http://devthought.com/projects/mootools/morphlist/
I was looking for an easy to follow tutorial. This one delivered! Thanks!
[...] Simple Animated Mootools Menu – Consideropen.com published a tutorial on how to simply create the menu they have on their site [...]
Why does this animation work in IE when I view this site, but the ZIP file doesn’t work?
hi,first of all thanks for the script, I’m using on a website I’m creating for an english band. The address is: http://www.killitkid.netsons.org.
I had to disable the Joomla mootools 1.1 library in frontend to use the required mootools 1.2 one. However, now the menu is working but I noticed two important bugs, the first is that the pointer under the menu doesn’t settle under the active page but it always return under the home button. And the second is that when I click on the media button the menu doesn’t work, I thought that the problem is the flash gallery I use in this section.
Can you help me? Thanks
Hi there. Could anyone help me I say why do I have error on page when visiting my site with IE 8 ? It says that I have an invalid argument in mootools 1.2.js line 2019 and also object does not support this property or method, same .js file, line 2704. I have no errors when viewing it in any other browser. I’m not a js programmer there4 I have no idea how to fix this. Thnx in advance. (www.herbavit.net)
[...] ?Simple Animated Menu for Mootools 1.2 http://www.consideropen.com/blog/2008/06/simple-mootools-12-animated-menu/ [...]
Hi there,
First things first I love this menu, you can do so much just by changing the transition effect and whatnot. I do however have a small problem, the website im trying to implement this on doesnt have any IDs set on its menu system, i would like to change the code to look for an “active” class as opposed to the “active” ID its currently looking for but cant seem to get it right, any assistance would be greatly appreciated.
I have tried li.active and other derivatives of this to no avail.
regards,
Mike
great script! thnx!
but a question: i wanna change the z-index of the arrow, but it dosnt work.
i want that the arrow is OVER the menu.
please help
thnx
[...] ???? ????? ?????? ????????, ????? ??????? ?????????. ??? ??????????? ????? ? ???????? ?????? ???? ????? ????? ?? ????? ??????. [...]
I have implemented this, and it is great. Thanks for your good work.
Great Work. I will use it for my next project!
nice.
But i have to tell my opinion about js Frameworks. Mootools is by far NOT the best javascript framework around.
It’s GFX Classes are very impressive. But for the rest of it.. I’ll stick with jQuery. Or maybe the new scriptaculous… we’ll see.
[...] MooTools 1.2 License: Public Domain Certification Demo: http://www.consideropen.com/blog/2008/06/simple-mootools-12-animated-menu/ Share and [...]
[...] Simple Animated Menu – MooTools Plugin August 21st, 2009 Goto comments Leave a comment Simple animated menu using MooTools. Animated Menu – MooTools Plugin [...]
Really great stuff.
thank you
[...] Simple Animated Menu – MooTools Plugin [...]
I used your menu for my website that i am making, and it works great, except in IE where the arrow (in my case pick) does not return to the active link but stays on the last link i had my mouse on after i move the mouse away from the menu…
It does the same even with the unedited menu that i downloaded so it has to be something missing in the code from the archive that is up here for download, since the menu works great on this (your) site.
Can you please tell me how to fix this IE problem?
Toshe.
How do you change the script to use a class name instead of the li id?
Hi,
Would it be possible to define activeID as a class and not an ID ? I made modifications but without result.
thx
Is there anyway to modify this menu animation to run vertical instead of horizontal?
How can this be done for motools 1.1 please?
How do I get this to work in wordpress! It’s driving me insane
Do you mean on a wordpress site, or in the wordpress backend admin section? If you mean the admin section, you might have an issue with jquery and mootools interfering, if you mean on the front end (in the theme), just include the javascript and domready in the header file, it should work like any other installation from there.
[...] ???????? MooTools ???????????? ???? | ???? ?????? [...]
[...] Simple Animated Menu for Mootools 1.2 | Seattle Web Design and Development | consider: open [...]