Treehouse

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.

ydkjs-4.png

Recent Features

  • How I Stopped WordPress Comment&nbsp;Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • Responsive and Infinitely Scalable JS&nbsp;Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • Checkbox Filtering Using MooTools&nbsp;ElementFilter

    When I first wrote MooTools ElementFilter, I didn't think much of it. Fast forward eight months later and I've realized I've used the plugin a billion times. Hell, even one of the "big 3" search engines is using it for their maps application....

  • CSS Text&nbsp;Overlap

    One of the important functions of CSS is to position elements. Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning. By using the above spacing properties and the z-index "layering" property, we can...

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

  31. [...] Skapa Snook-Style navigering med hjälp MooTools [...]

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