O'Reilly

Create Snook-Style Navigation Using MooTools

By on  

Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools.

The Images

Image 1 Image 1

These are the same images used in Snook's article.

The XHTML

<h2>Example 0: No Script</h2>
<ul id="noscript">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

<h2>Example A: Top down</h2>
<ul id="a">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

<h2>Example B: Right left</h2>
<ul id="b">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Three menus. The first will be a simple CSS-only mouseover, the other two will be varying MooTools versions.

The CSS

ul { list-style:none; margin:0; padding:0; }
li { float:left; width:100px; margin:0; padding:0; text-align:center; }
li a { display:block; padding:5px 10px; height:100%; color:#fff; text-decoration:none; border-right:1px solid #fff; }
li a { background:url(snook-animation-bg2.jpg) repeat 0 0; }
a:hover, a:focus, a:active { background-position:-150px 0; }
#a a { background:url(snook-animation-bg.jpg) repeat; background-position:-20px 35px; }
#b a { background:url(snook-animation-bg2.jpg) repeat; background-position:0 0; }

Nothing too notable here.

The MooTools JavaScript

window.addEvent('domready', function() {
	/* example a:  top down */
	$$('#a a').each(function(el) {
		//fx
		var fx = new Fx.Tween(el,{
			duration: 500,
			link: 'cancel'
		});
		
		//css & events
		el.setStyle('background-position','-20px 35px').addEvents({
			'mouseenter': function(e) {
				e.stop();
				fx.start('background-position','-20px 94px');
			},
			'mouseleave': function(e) {
				e.stop();
				fx.start('background-position','-20px 35px');
			}
		});
	});
	
	/* example b:  right left */
	$$('#b a').each(function(el) {
		//css
		var reset = false;
		var fx = new Fx.Tween(el,{
			duration: 500,
			link: 'cancel',
			onComplete:function() {
				if(reset) {
					el.setStyle('background-position','0 0');
				}
			}
		});
		//events
		el.setStyle('background-position','0 0').addEvents({
			'mouseenter': function(e) {
				e.stop();
				fx.start('background-position','-150px 0');
				reset = false;
			},
			'mouseleave': function(e) {
				reset = true;
				fx.start('background-position','-300px 0');
			}
		});
	});
	
});

When you mouseover the last two navigation menu links, the background image animates from one spot to another creating a flash-like effect.

Credit goes to Snook for this great idea and original execution.

Track.js Error Reporting

Recent Features

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • Optimize Your Links For Print Using CSS â Show The URL

    When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts...

  • Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

Discussion

  1. Great tutorial, thanks! I love being able to use Javascript to create animations which people think can only be done using flash. This particular example is one of my favourites.

  2. olivier

    the horizontal mode produces a really nice effect when moving cursor from one button to another.

  3. wow…. this is great.. i like the second demo… it’s very funny :)

  4. Jem

    This example seems pretty useful if you have something a bit more abstract for a background. The “oozing” effect you get by tween the background-position is quite cool.

    I recently saw an article here where they had ported over a jquery effect someone had created for working with sprites into mootools. Also useful.

  5. I like example B when moving right to left as it looks like it is shifting. Is there a way to detect the user coming from a left side button going right and have it switch the direction?

  6. Alelo

    should be doable, if u make geht the mouse position on entering the img, so 4 exapmle, if img has 100px with. if entering vom 0->50px left-> right, if 51-100, right->left or?

  7. To be able to detect left or right, I’d probably set up each element within the nav with an index and then shift left or right depending on whether the current index is higher or lower than the last index.

    David, thanks for porting the work over to Mootools. It looks good!

  8. @Mark: I think what I would do is the same as Alelo. Check where the mouse entered the image and move the background accordingly.

    @Jonathan Snook: Thanks!

  9. Strange, that was about to be my next blog entry :O

    I love doing this kind of thing. Flash certainly has it’s abilities that javascript can’t even touch, but most of the time javascript effects are every bit as good for buttons.

  10. Awesome! Thanks

  11. Great tutorial! Thanks. Added to tutlist.com

  12. Great tutorial! Thanks. Added to tutlist.com

  13. Very nice indeed – the effect’s not too in-your-face, nice and fairly subtle. I like it :)

  14. Jonathan

    Effect is not working on Mootools 1.2.1

  15. Jonathan

    Ok, thanks! I download again a mootools 1.2.1 and it works now.

  16. Hi David, thx too much, i used this script in new layout of my site.
    bye
    Nunzio

  17. visesh

    David,

    I am trying to change the bg color of visited links using this menu, any idea how to get that done.

    Thanks
    Visesh

  18. Hi David,
    i was looking another time this post, ‘because i like a lot it… i suggest you an idea… you can optimize the third animation using two senses of horizontal transition.. in this way if i arrive from the link to the left it seems that the blue band follow me, and the same if arrive to the link on center from the right link… like you in this moment

    what do you think about it? I’m interested on your opinion because I’m thinking if it’s better to use a DIV that follow my mouse movement (like an arrow that I’m developing for a web site in these days) or using this trick CSS/JS can be a good idea …

  19. wow…. this is awesome.. i like the second demo…

  20. Hi David,

    Is there anyway to keep the “hover” state active, until you click on one of the other links?

  21. Hello, on my site don’ t work with opera and firefox! but with ie and chrome work…

  22. Can you do it with mootools 1.1?

    I’ve been trying with fx.styles but I get an error with IE when I try to change “background-position”, other properties work fine!!!

    have you got any ideas?

  23. William

    Ya I’ve been trying to do it with mootools 1.1 too. Background-position gives an error that saids ‘push’ is null or not an object. Help~~

  24. William: 1.1 is almost 2 years old now — time to upgrade?

  25. William

    @David Walsh: I know :( However, my site runs on joomla and it’ll be a lot of backward coding if I upgrade. The 1.1 layer doesn’t work with half of my scripts running on the site now.

  26. Roark

    @William I have the same problem as you, Joomla bounds me to the confines of 1.11,
    I needed the same effect and used fx.styles. seemed to work ok in ie6:

    var gallery_a = $$('#slideshow ul li a');
    	gallery_a.each(function(element) {
    		var fx = new Fx.Styles(element, {duration: 300, wait: false, transition: Fx.Transitions.Sine.easeIn});
    		element.addEvent('mouseenter', function(){
    			fx.start({
    				'background-position': ['290px 0px', '253px 0px'],
    				'padding-right': ['0px','50px']
    			});
    		});
    		
    		element.addEvent('mouseleave', function(){
    			fx.start({
    				'background-position': ['253px 0px', '290px 0px'],
    				'padding-right': ['50px','0px']
    			});
    		});
    	});
    
    • Marek

      Hi Roark,

      thanks for this script you really saved my life :-). I had to changed it a little as I had to use horizontal background movement instead.
      Just in case if anyone will need it here it is:

      //

      Works fine in older MS IE !!!

      Great thanks again!!!

      br
      Marek

    • Marek

      Sorry the code:


      //

    • Marek
      window.addEvent('domready', function(){
      	var list_a = $$('#menu ul li a');
      	list_a.each(function(element) {
      		var fx = new Fx.Styles(element, {duration: 900, wait: false, transition: Fx.Transitions.Sine.easeIn});
      		element.addEvent('mouseenter', function(){
      			fx.start({
      				'background-position': ['-457px 1px', '0px 1px']
      			});
      		});
      		element.addEvent('mouseleave', function(){
      			fx.start({
      				'background-position': ['0px 1px', '-457px 1px']
      			});
      		});
      	});
      });
      
  27. Rasul

    Hi David;

    if one of “Li”s (first li, for exmple) has “current_page_item” class (class=”current_page_item”) like wordpress menu; how can I disable events for it?

    Thanks.

  28. lineblu

    Hi David,

    is there no solution for an active state of a navigation element.
    You have been asked twice (@visesh, @rasul) how to realize an exception for
    “visited links” or “current active links”, but you didn’t write any reply to these requests.

    I have the same problem and I hope you can find a little time to answer.

  29. lineblu

    The solution for the active menu element:

    if(!el.hasClass('current')) {
    	el.setStyle('background-position','-20px 35px').addEvents({
    		'mouseenter': function(e) {
    			e.stop();
          el.setStyle('color', '#FFD700');
    			fx.start('background-position','-20px 94px');
    		},
    		'mouseleave': function(e) {
    			e.stop();
    			fx.start('background-position','-20px 35px');
          el.setStyle('color', '#000000');
    		}
    	});
    }
    
  30. Suresh

    Very nice thanx

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Making Data Management Easy with Transpose

    One problem with data collection is that we all want capture to be quick and we all want data to be organized -- but there's seldom a utility that allows both. Evernote allows note-taking but it can lose its structure...and no one wants...

  • Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...