- 206.420.2394
- Contact Us
-
Chat
- |
- Client Login
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:
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.
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.
You can configure the the code to work with your current menu by defining the options when calling the navArrowSlider() 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 );
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>
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 */ }
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.
*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.
