Home > Categories > Navigations > JQuery CSS sprite menu with image buttons

JQuery CSS sprite menu with image buttons

 

What is CSS sprite?


CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properites. Now that almost all major browsers started supporting CSS background-image and background-position properties, CSS sprites are getting more significance.

Roll over the menu buttons above! They are all loaded from a single image using background positioning. This means less HTTP requests, better loading time. This is a scriptbreaker.com JQuery extention that fades the menu buttons on roll over. The original tutorial can be found here: Head back to the original tutorial for a full explanation.



The JQuery code below is used to add the fade animation on roll over the buttons.

JQuery code

	$(function() {
		// set opacity to nill on page load
		$("ul#menu span").css("opacity","0");
		// on mouse over
		$("ul#menu span").hover(function () {
			if(!$(this).parent().hasClass("selected")){
				// animate opacity to full
				$(this).stop().animate({
					opacity: 1
				}, 'fast');
			}
		},
		// on mouse out
		function () {
			// animate opacity to nill
			$(this).stop().animate({
				opacity: 0
			}, 'slow');
		});
	});


Notice that we have added a span tag to the link. This is to show the hover image part. As result the hyperlink has no hover action in the css.

HTML code

	

		
		

			
content goes here


Part of the CSS

	ul#menu{margin:0; padding:0; list-style:none; clear:both;}
		#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px;}
			#menu li a{background:url('images/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;position:relative;}
			#menu li span{display:block;position:absolute;top:0px;left:0px;height:100%;width:100%;z-index:100;}
			
			/* Home Button */
			#menu li.home{width:115px; height:60px;}
				#menu li.home a{background-position:-5px -5px;}
				#menu li.home a span{background:url('images/menu-sprite.jpg') no-repeat; width:115px; height:60px; display:block;background-position:-5px -75px;}
				#menu li.home a.selected{background-position:-5px -145px;}
For this exemple we used the image below to construct all the menu buttons.

 Download full sourcecode

Add a comment...