Tutorial – CSS And jQuery/Ext Trap Door Navigation

Tutorial – CSS And jQuery/Ext Trap Door Navigation

Dual library action

I’ll be showing you how to do a trap door navigation, which I’m sure has been done before. But I’ll be showing you how to do it in jQuery AND Ext. Why? Because I had to do it in both at work. A trap door navigation is basically a two image system where the ‘li’ gets one image, and the ‘a’ tag gets another so that as the link expands, the image grows with it. When you rollover each navigation item, the images then change.

Why thought can’t you do this with just CSS? You could try like I did using something like ‘li:hover’, but the problem occurs on when the images actually change on rollover. There are issues with the ‘li’ image changing because the ‘a’ tag is on top and that is what you are rolling over. Javascript is used then to correct the issue. Check out the result:

View Demo


What you need to start with, is a cut up image (I prefer slicing, but you do it however you want). You need to versions: what the buttons will look like normally, and what they look like on hover. You end up with 4 images – 2 for the normal, 2 for hover. Below is what I did for the rollover image:

Sliced nav image

Sliced nav image

The slice with the number 2 is what goes on the ‘li’, while the ’1′ goes on the ‘a’ tag.

Here is the basic HTML you need:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Our Really Kick Ass Blog</a></li>
<li><a href="#">Contact us</a></li>
</ul>

Below is the CSS you need (any other tags don’t matter for the tutorial). As you can see, the ‘li’ has a background call for the image that is seen normally, and it is the longer image of the two. The ‘a’ tag has a background call of the shorter image.

li {
	list-style: none;
	background: url(images/trapOff_02.jpg) no-repeat right top;
	float: left;
}
 
a {
	text-decoration: none;
	color: #000000;
	display: block;
	float: left;
	text-transform: uppercase;
	background: url(images/trapOff_01.jpg) no-repeat left top;
	padding:11px 16px 3px 13px;
}
 
a:hover {
	color: #ffffff;
}

Now onto the jQuery, which I’ll explain after you look over it:

$('ul>li>a').hover(function() {
        $(this).parent().css('background-image', 'url("images/trapOn_02.jpg")');               
        $(this).css("background-image", 'url("images/trapOn_01.jpg")');  
  }, function() {               
       $(this).parent().css('background-image', 'url("images/trapOff_02.jpg")');               
        $(this).css('background-image', 'url("images/trapOff_01.jpg")');                  
  });

The break down

All it is, is a basic hover() method. The first line above, searches for the ‘a’ tag in a list item within a ul (ul>li>a), and puts the hover() method on it. The second line finds the ‘a’ tag, but get’s its parent, which would be its it containing ‘li’. It then uses the css() method to change the background-image to the rollover state image. The third line does the same for the actual ‘a’ tag.

The callback function, then reverses the images so that when you are not hovering over the navigation item, it goes back to normal. That is all there is to it.

Ext – The Extra Terrestrial

To do the same exact thing in Ext JS, some of the stuff changes. I won’t go over it, because most of you probably don’t even know the library exists, but you can see the differences.

Ext.select('div#slot-navigation>ul>li>a').on('mouseover', function(e,t,o) {
        Ext.fly(t).parent().setStyle({
          'background-image': 'url("/images/trapOn_02.jpg")'       
        });               
        Ext.fly(t).setStyle({
          'background-image': 'url("/images/trapOn_01.jpg")'       
        });    
  }); 
 
  Ext.select('div#slot-navigation>ul>li>a').on('mouseout', function(e,t,o) {               
        Ext.fly(t).parent().setStyle({
          'background-image': 'url("/images/trapOff_02.jpg")'       
        });               
        Ext.fly(t).setStyle({
          'background-image': 'url("/images/trapOff_01.jpg")'       
        });                  
  });

Final thoughts

Sometimes CSS isn’t enough to accomplish a certain effect. In this case, I wish it was because it seems like such a simple thing. But, it doesn’t take much javascript to make this work. Hope you learned something!

Coupon Code: webmachine

Leave a Reply