Advertise Here
Creating an Awesome Menu using CSS Sprites and jQuery

Use Sprites to Create an Awesomeness-Filled Navigation Menu

Abhin Sharma on Dec 3rd 2009 with 143 comments
Share

CSS sprites can dramatically increase a website’s performance, and with jQuery, we can implement awesome transition effects easily. Let’s get started.


Tutorial Details

  • Requirements:
    • Basic Knowledge of jQuery
    • Basic Knowledge of Photoshop
    • Basic Knowledge of CSS
  • Difficulty: Intermediate
  • Estimated Completion Time: 40 mins

What is a CSS Sprite?

Sprites date back to the early days of video games, where they were used as optimization technique for displaying 2D graphics. A CSS sprite is a technique that involves grouping images to form a single master image, and then selectively displaying only the required sections using CSS attributes (width, height, background-position etc).

In this tutorial we’ll create a navigation menu inspired by Dragon Interactive. They have an excellent design concept, with a perfect use of highlights and colors.

Step 1

Begin by creating a new Photoshop document, which is 800px wide by 500px high.

Step 2

Next, we’ll create a horizontal ruler at the 70px mark by going to view -> new guide; this will be our menu height.

Step 3

Now we are going to create a folder menu, and inside it, a sub folder called “Menu Text.”

Step 4

Select the text tool(shortcut: t) and set the following properties in the character toolbox.

  • Font: Franklin Gothic Medium Cond
  • Font Size: 15pt
  • Color: Black

Other fonts can be used as well but this font family is best suited for embedded text effect which we will give later. If you don’t have this font you can get it from Website.

Step 5

Create another horizontal ruler at 40px, this will help to keep our menu text horizontally aligned.

Step 6

Now select the menu text folder, and type the menu words HOME, SERVICES, PORTFOLIO, ABOUT, and CONTACT, keeping equal spaces between each. It should now look like the image below.

Step 7

Now create another folder below the menu text folder, and name it “Menu Background.”

Step 8

Let’s next create a new layer inside the Menu Background folder, and then using a rectangular marquee tool, create a selection of 100px wide and 70px high.

Step 9

Select the gradient tool (shortcut : g), and set the gradient colors from #555555 to #adadae .

Step 10

Now draw a gradient starting from the bottom of the selection to the top of the selection; then give it a stroke with the following properties:

  • Stroke Size : 1px
  • Position : outside
  • Color : Black

The stroke was added to provide depth to our menu divisions.

Step 11

Now In order to achieve the highly polished ends, and to create the proper effect when the mouse hover occurs, we will give it an adjacent highlight.

Step 12

Go to select > modify > contract and enter 1px.

Step 13

Select the burn tool and set the following properties:

  • Brush Size : around 200px
  • Brush Hardness : 0%
  • Range : Shadows
  • Exposure :30%

Step 14

Now we will move the menu division right 1px, using the move tool(shortcut: v) in order to show the left side of the stroke, which was invisible due to its position.

Step 15

Create copies of the above layer and adjust them with respect to the menu text.

Two things that Must be Noted

  • Transform (ctrl + t) and increase the size of the layer underneath SERVICES and PORTFOLIO, since they are wider than the other words. Change the length from 100px to 110px.
  • The stroke of the adjacent layers must overlap each other.

This is what the menu looks like when we adjust the positioning of the layers and menu text accordingly.

Step 16

In order to embed the typographic effect, we add the “Drop Shadow” effect with the following settings to our text:

  • Color: #b7b6b6
  • Opacity: 40%
  • Distance: 1px
  • Spread: 100%
  • Size: 0px

Step 17

Now, its time to create what the menu looks like during the mouse hover state. Create a copy of the “Menu Background” folder, and rename it to “Menu Hover.” Then, using the move tool, move the folder 70px down so that the newly created menu’s top part touches the horizontal guide.

The reason we have created the copy of the menu folder, is because we’re interested in the positioning of the menu text. If we had created it manually, then we would have to worry about the exact alignment of the menu’s text, which would be much more tedious.

Step 18

Now, we will select the background layer of the service menu from the “Menu Hover” folder, and give it a nice elegant effect upon the hover state. To do this, first create a selection by pressing ctrl and click on the layer; then press delete, which will delete the current shade. Next…

  • Color – #9de0ff at 0% Location
  • Color – #0072ff at 50% Location
  • Color – #005ead at 100% Location

Select radial gradient, and draw a line from the bottom of the selection to 30px above the top of the selection.

Step 19

Our work is not done quite yet. To give it a smooth touch, we need to polish it a bit more. To create a more revealing menu division, we’ll make the edges darker. To achieve this, we need to add the following effects:

  • Select the burn tool, with a brush size of 200px, range – highlight and exposure to 50%, brush it along the edges of the division.
  • To make the edges even darker, we add an inner shadow effect:
    • Blend Mode : Hard light
    • Opacity : 70%
    • Distance: 0px
    • Choke: 0%
    • Size: 10px

Step 20

Apply a similar effect for the portfolio and about menus. For the contact menu, change the gradient colors to:

XEROX CODE
  • Color – #ff9dbd at 0% Location
  • Color – #ff0084 at 50% Location
  • Color – #a00337 at 100% Location

This what our menu looks like now:

Step 21

The home menu division needs to be given special treatment; select the layer by pressing ctrl and clicking on the layer. Press delete to remove the current shade, and select the gradient tool with the following colors:

  • Color – #fff5c0 at 0% Location
  • Color – #fae15d at 50% Location
  • Color – #eac500 at 100% Location

This time, select linear gradient, and draw a gradient from the top of the selection to the bottom of the selection.

Step 22

Select the burn tool, keeping the rest of the properties the same except for the range, set it to midtones, and apply brush strokes around the edges except for the top.

Step 23

Now to create the glassy effect: select the pen tool, make sure that “shape fill” is selected, and draw the shape like the one in the image, and set its blend mode to soft light with an opacity of about 40%.

Step 24

Two more things before we’re finished with the Photoshop part.

  • First, the text effect within the “Menu Hover” folder is not looking elegant enough; so we change the color of the drop shadow property.
    • Home Menu
      • Color : #fff368
      • Opacity : 80%
      • Also add gradient-overlay : #854406 to b75a03
    • Services, Portfolio and About Menus

      • Color: #78bbff
      • Opacity : 70%
    • Contact Menu
      • Color : #f78bb6
      • opacity : 80%
  • Second is the last division in Menu folder does not have an adjacent highlight to the right; so we’ll clip a small portion of the background layer, and align it next to the contact background layer. Then, we crop the image and save.

Finally our sprite image looks so:

Step 25

Now comes the coding section, which is quite easy. Create an html file, and add the following code: 

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sprite.js"></script>
<title>Awesome Menu</title>
</head>

<body>
<div id="nav">
<ul id="navigation">
	<li ><a class="home" href="#"></a></li>
	<li ><a class="services" href="#"></a></li>
	<li ><a class="portfolio" href="#"></a></li>
	<li ><a class="about" href="#"></a></li>
    <li ><a class="contact" href="#"></a></li>
</ul>
</div>
</body>
</html>

Here we have created a simple html file, which consists of an unordered list – our navigation bar. Before moving forward, let’s take a look at a couple of files we’ll now be importing:

  • style.css is the external CSS file in which we will be styling our navigation list.
  • We’ve imported jQuery for the animation on hover.
  • The jQuery easing plugin is also used, which we’ll review later.
  • It’s good practice to create an external js file for our work, so we also do that in “sprite.js.”

Step 26

Create an external .js file, called sprite.js, and paste in the following code.

$(function(){

		   $('#navigation li a').append('');
           // span whose opacity will animate when mouse hovers.

		   $('#navigation li a').hover(
             function() {
	         $('.hover', this).stop().animate({
			'opacity': 1
			}, 700,'easeOutSine')
        	},
            function() {
	       $('.hover', this).stop().animate({
			'opacity': 0
			}, 700, 'easeOutQuad')

	})
		   });

When the DOM is loaded, we inject a span into our anchor tag; this span will actually animate. Then, using the hover function for the anchor tag, we animate the opacity of the span. To create a smoother animation, we will use the easing equation. I am using ‘easeoutsine’ and ‘easeoutquad’; feel free to try an alternative combinations, if you wish.

Step 27

Now comes the CSS part. Create the style.css file. Below is the initial image of what the menu looks like. For now, it’s only four dots, because we haven’t yet styled it.

Step 28

First, we align the list. 

body{
background:#000000; }

#navigation
{
margin-left:250px;
}

#navigation li
{
float:left;
}

We’ve only moved the menu in the center a bit.

Step 29

Style the anchor tag; its background will be our sprite image. 

#navigation li a
{
background-image:url(images/sprite.jpg);
display:block;
}

The display style must be set to block; otherwise, nothing will be displayed.

In the next step, we will give each of them the proper positioning. 

	.home
	{
	background-position:0px 0px;
	width:102px;
	height:70px;
	}

	.services
	{
	background-position:-102px 0px;
	width:110px;
	height:70px
	}

	.portfolio
	{
	background-position:-212px 0px;
	width:108px;
	height:70px
	}

	.about
	{
	background-position:-320px 0px;
	width:102px;
	height:70px
	}

	.contact
	{
	background-position:-422px 0px;
	width:103px;
	height:70px
	}

Here, we’ve set the background positioning, and width of each anchor tag. The values may vary, and it requires a bit of time to get perfect.

Step 30

#navigation a .hover {
	background:url(images/sprite.jpg) no-repeat;
	display: block;
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	}

	#navigation a.home .hover {
	background-position: -0px -72px;

	}
	#navigation a.services .hover{
	background-position: -102px -72px;

	}
	#navigation a.portfolio .hover {
	background-position: -212px -72px;
	}
	#navigation a.about .hover {
	background-position: -320px -72px;
	}
	#navigation a.contact .hover {
	background-position: -422px -72px;
	}

Now we will define the CSS for the span; this is the same sprite image which is used above. The height and width are made 100% so that it occupies the whole anchor block. The background of each span tag is adjusted, and finally our work is complete.

Step 31

Note that it takes time to get the position and width tuning right; you may end up with slightly different values for these attributes – and that’s perfectly okay!

CSS Sprites Resources

Phew seems like a lot of work, but great things take time to build up. Here are some additional resources that you might find handy.


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

Share
By Abhin Sharma

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium

Premium Members

Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now

 
 

Related Posts

Add Comment

Discussion 143 Comments

Comment Page 2 of 2 1 2
  1. Mike. says:
    December 6, 2009 at 10:52 am

    I’d be interested if anyone here who has left positive comments has actually tried to follow this tutorial step-by-step. It doesn’t work.

    Reply
  2. khalid says:
    December 7, 2009 at 3:46 am

    it’s like this tut
    http://jqueryfordesigners.com/image-fade-revisited/
    Great job man

    Reply
  3. Jose says:
    December 7, 2009 at 7:46 pm

    this is wonderful, it is very creative and a beautiful way to enhance our personal websites, this transforms a boring menu bar into a colorful and eye-catching menu, I’ve checked all comments above and well yes in fact Abhin created the same bar used on Dragon Interactive site, but for teaching purposes only I believe, on the other hand for Us the newbies this is what we need, steep by steep, spoon feed.. each one of us will take care of change the colors fonts and section sizes accordingly to our needs, off course no one whats to have the very same menu that another website has, right?. maybe to all PROs out there it is more important to point out that this is the same tutorial they saw there and it’s stolen and bla bla bla.. but for me at least this is like going to school to learn and the result that you achieve at the end is the important issue here.
    So Abhin, i really appreciate your time and efforts you put to make this tutorial available for everyone, i’m learning a lot in this site. THANKS and greetings from Costa Rica!

    Reply
  4. Manne says:
    December 7, 2009 at 7:49 pm

    Hej, great work! Dont mind the flamers, this was awesome!
    Tryed to do this tut but I cant do the shading part with the burn tool good with your description

    Reply
  5. michael says:
    December 8, 2009 at 4:55 pm

    I followed the tutorial step by step , although i used my own text style and colors. I was confused getting the sprite sorted in the css file but got it in the end. I notice there is a problem with the sprite when loaded in all versions of I.E … Could you let us know what the fix is for this ?

    Very nice tutorial , I thoroughly enjoyed working through it.

    :)

    Reply
  6. Ian Drake says:
    December 8, 2009 at 5:12 pm

    To make sprites out of existing sites check out: http://spriteme.org/

    Reply
  7. Praveen Ram C says:
    December 8, 2009 at 9:55 pm

    Hey… I have followed your tutorial and i got the effect. But my question is how to make home tab or whatever the tab , as active tab. If a user clicks service tab, the service tab should retain the yellow color. What should i do for it. It will be helpful for me, because i’m going to add this effect in my website. Thanks in advance.

    Reply
  8. Vince says:
    December 11, 2009 at 11:32 am

    One of the worst tutorials I’ve ever seen on Nettuts.

    Reply
  9. Sags says:
    December 12, 2009 at 4:21 pm

    So I followed this tutorial, but made an entirely different design, modified the CSS positioning and got it working perfectly. Really learned lots from this tut!

    My issue is that once I was finished, it was working perfectly in all browsers except IE, but only offline. Once I actually uploaded my new navbar to my server, there is not rollover effect at all. Any idea on what might be happening here? I looked at the file structure of my remote server and it is identical to my local files.

    Anyone have suggestions?

    Reply
  10. Abhin says:
    December 13, 2009 at 2:31 am

    Hi guys sorry for the delay I was really busy ;) , ok here’s the answers of the queries

    1. For the guys have trouble with IE , its a simple tweak see what is happening is that IE is not taking opacity to 0 of the hover class, so we have to force it
    just add this code after add hover span, it will do it. :D
    $(‘#navigation li a’).css(“filter”,”alpha(opacity=00)”);

    you can do that in css too , but It will affect the smoothness of the animation

    2. Those who wanted to use sprites at click event, if you want different effects then the layer below create a third sprite layer and you can use jquery addClass() method in the click event instead on hover(), remember just be sure to iterate to each element before that and use removeClass() so that other elements wont have that same state.

    If you have any queries feel free to ping me my twitter id – abhin2cool

    Reply
  11. eddie says:
    December 15, 2009 at 2:08 am

    Hi….. anybody else having problems in IE??? The nav bar is in a rolled over state when i load it and only reverts to normal once rolled over. This is on the demo not one i madfe myself.

    Reply
    • Abhin says:
      December 15, 2009 at 8:46 pm

      hi Eddie,
      For the guys having trouble with IE , its a simple tweak see what is happening is that IE is not taking opacity to 0 of the hover class, so we have to force it
      just add this code after add hover span, it will do it.
      $(’#navigation li a’).css(”filter”,”alpha(opacity=00)”);

      Reply
      • Michael says:
        December 16, 2009 at 5:44 am

        I must be doing something wrong here but I am not able to get that working. I am adding that line in the sprite.js file just have the hover span. Can you post up the example please.

      • Abhin says:
        December 16, 2009 at 5:52 am

        Try this code in the sprite.js

        $(function(){

        $(‘#navigation li a’).append(”)
        $(‘#navigation .hover’).css(“filter”,”alpha(opacity=00)”);
        $(‘#navigation li a’).hover(function() {

        // Stuff that happens when you hover on + the stop()
        $(‘.hover’, this).stop().animate({
        ‘opacity’: 1
        }, 700,’easeOutSine’)

        },function() {

        // Stuff that happens when you unhover + the stop()
        $(‘.hover’, this).stop().animate({
        ‘opacity’: 0
        }, 700, ‘easeOutQuad’)

        })
        });

      • Cooty says:
        December 16, 2009 at 9:10 am

        I also had the same problem with IE (versions 6-7-8). I’ve tried inserting the line
        $(’#navigation .hover’).css(”filter”,”alpha(opacity=00)”);
        into the script but, it even got worse (the whole thing faded into black after hovering on it).
        I’ve discoverded a partial solution though!
        In the CSS give the element a the rule filter: alpha(opacity=00).
        It will work, but it’s not perfect, ’cause you’ll get the hover effect right, but the fadding effect only comes in after you hover on one of the anchors, or when you hover off. At the first hover on there’s no fading, only the default background change, but you’ll get the effect after the second hovering. (All in IE that is.)

  12. Michael says:
    December 16, 2009 at 7:04 am

    Thanks pal,

    I had originally done what was suggested , just had some mistakes in the markup , mainly with the ( ” ) and ( ‘ ) incorrectly used.

    I appreciate that.

    Reply
  13. Abhin says:
    December 16, 2009 at 9:47 pm

    Hi guys, I have put an online demo its working on all IE series
    http://webaura.1free.ws/CSSsprites/

    The actual code is

    $(function(){

    $(‘#navigation li a’).append(‘<span class=”hover”>’)
    $(‘#navigation .hover’).css(“filter”,”alpha(opacity=00)”);
    $(‘#navigation li a’).hover(function() {

    // Stuff that happens when you hover on + the stop()
    $(‘.hover’, this).stop().animate({
    ‘opacity’: 1
    }, 700,’easeOutSine’)

    },function() {

    // Stuff that happens when you unhover + the stop()
    $(‘.hover’, this).stop().animate({
    ‘opacity’: 0
    }, 700, ‘easeOutQuad’)

    })
    });

    actually forgot to change < to < in the above code so it parsed span too. :P

    Reply
    • Abhin says:
      December 16, 2009 at 9:58 pm

      my bad… its not
      $(’#navigation li a’).append(’’)

      its

      $(’#navigation li a’).append(’<span class=”hover”></span>’)

      Reply
  14. Alex says:
    December 18, 2009 at 10:34 am

    How about the active state? anyone? some progress in that area? please?

    Reply
  15. Neysi says:
    December 29, 2009 at 1:55 pm

    Hola. Hice una modificación que funciona en todos los navegadores incluido IE6,I67…Firefox y Chrome.

    Esto es el codigo.

    $(document).ready(function() {

    var opacity = 0.0, toOpacity = 0.8, duration = 500;

    $(‘#navigation li a’).append(”);

    $(“.hover”).css(‘opacity’,opacity).hover(function() {
    $(this).fadeTo(duration,toOpacity);
    $(this).click(function() {
    $(this).css(‘opacity’,1);
    });

    }, function() {
    $(this).fadeTo(duration,opacity);
    });

    });

    Reply
  16. Jonathan Sells says:
    January 1, 2010 at 9:08 pm

    Hey,

    Just to let you all know, In IE all rollovers appear right away (check demo in IE to see) because you failed to include IE’s method way of setting opacity via CSS. So make sure to include:

    filter:alpha(opacity=0); for the hover class.

    This bring another problem however, the first time rolling over in IE, there is no animation, it simply switches image position (looks a little jumpy). After this one hiccup it works how it should however.

    Let me know if anyone finds a way to fix this for IE.

    Reply
  17. Onefine says:
    January 2, 2010 at 4:47 am

    I make this menu here http://www.cistiaci-servis.sk/. In IE it wasn´t working, but I missed to include into my css this code for hover state:

    filter:alpha(opacity=0); for the hover class.

    Now only little problem is in IE that first time dont animate to hover state, but directly show the hover state (no animation). After that, all works OK.

    I tried to put this code to my sprite.js, but not working..

    $(function(){

    $(’#navigation li a’).append(’’)
    $(’#navigation .hover’).css(”filter”,”alpha(opacity=00)”);
    $(’#navigation li a’).hover(function() {

    // Stuff that happens when you hover on + the stop()
    $(’.hover’, this).stop().animate({
    ‘opacity’: 1
    }, 700,’easeOutSine’)

    },function() {

    // Stuff that happens when you unhover + the stop()
    $(’.hover’, this).stop().animate({
    ‘opacity’: 0
    }, 700, ‘easeOutQuad’)

    })
    });

    my CSS style is in seperate folder ../css/style.css, maybe problem is there?

    Reply
  18. Michael says:
    January 6, 2010 at 3:29 am

    Can we get some assistance with the active state? I have tried myself looking at various other tutorials on the net but not getting anywhere? Having the active state resolved would complete this I think.

    Thanks

    Reply
    • Abhin says:
      January 6, 2010 at 9:17 am

      Hi, I will post the active state part soon :)

      Reply
    • rocket says:
      April 15, 2010 at 12:13 am

      Hi michael, for the hover state this will work

      Define a separate style for the hover state like this for eg:

      .navigation .home .hover {
      background-position: -0px -62px; <– This is the current hover position
      }

      .navigation .home_active {
      background-position: -0px -62px; <—- This should be same as the hover position
      width:153px;
      height:62px;
      display:block;
      }
      .navigation .home_active .hover {
      background-position: -0px -62px; <—- This should be same as the hover position
      width:153px;
      height:62px;
      display:block;
      }

      (I have made the # into a class "." so that I can use it on two menus in a single page)

      Then call the class in to the active page your on, for eg: I am on the home page

      <— have added the active class here


      Hope this help!

      Thanks
      Rocket!!!

      Reply
  19. Wayne says:
    January 15, 2010 at 2:11 pm

    Wow Great Job!

    Reply
  20. Mactabilis says:
    January 17, 2010 at 8:17 am

    I dont get it, I followed this tut step by step, even implemented the updated script (fix for IE) already, but I dont get the effect to work…. what am I doing wrong ?

    here’s the site I try to add that effect to: http://www.mactabilis.net/index.php

    Reply
  21. Todd Fooshee says:
    February 16, 2010 at 1:14 am

    I can’t get this to work. I think i’m just going to give up. I’ve tried everything I can think of. Are the names of the the navigation “home, about, etc” NECESSARY for this to work?
    For instance, I’m using class names “email, twitter, facebook, myspace” instead of the class names you have. Also, i don’t have a “.hover” in my CSS, mine looks like “:hover” and it won’t display my nav if i put “.hover”
    Any ideas? I would love to get this to work so that I know I can do it in the future.

    Reply
  22. Matt says:
    February 23, 2010 at 10:19 pm

    DUMP…….. can’t believe that nettuts is posting tutorials like that.. Actually is this a photosop tutorial? or a jquery?

    If you follow the tutorial you will end up into a non working menu. Not a well written.. seems like written only for time pass and making us go nuts…

    PLS don’t post tutorials like this without proper steps…

    Reply
  23. php-addict says:
    February 25, 2010 at 2:18 am

    i am using this technique in a page which already includes a picture gallery made using mootools so the sprites animation is not working.

    can anyone suggest a solution to this?? or maybe, can someone post the JS code using mootools instead of jQuery?? that’ll b really helpful.

    i’ve tried my knowledge best but with no avail…really hopeful that someone can help me out here!!

    Reply
  24. sonnerie gratuite says:
    March 2, 2010 at 12:41 am

    I have been looking for the information you have given in this article for a a long time. What a amazing post! I do not need to spend any more time on searching on it.Thanks so much for you share.

    Reply
  25. ady says:
    March 3, 2010 at 12:24 pm

    Great tutorial.

    Does anyone know how to turn this into a drop down menu.

    Reply
  26. Antonio says:
    March 5, 2010 at 6:49 am

    Hey man, I did everything in the tut and applied js fix, but I can’t get it to work in ANY browser, lol? javascript is enabled and I downloaded jquery and easing plugin..

    IE 8 says there’s an error:

    “Message: Invalid character
    Line: 3
    Char: 5
    Code: 0
    URI: file:///L:/Moji%20projekti/FTP/Amadesign/sprite.js”

    Line 3 is also highlighted in dreamweaver with RED:
    $(‘#navigation li a’).append(‘’)

    Help me please?:3

    Reply
  27. Erik says:
    March 16, 2010 at 1:15 pm

    Okay, I’ve got this working: http://xkuzp.amady.servertrust.com/Tanamins-Tanning-Pill-p/tanamins.htm but I’m having an issue.

    I built the menu and then put some simple onclick events that show/hide content depending on which nav button you pressed. As you can see works great in FF, Safari and Chrome…but in IE, as soon as you click on any of the buttons…all the content shifts to far right of the screen. But it displays properly in IE when you first land on the page…only after you click does it get messed up.

    I suspect there’s some CSS in the menu system that is making it act this way but I am unsure what it could be. Any ideas?

    Thanks,
    Erik

    Reply
    • Erik says:
      March 16, 2010 at 1:46 pm

      Never mind…fixed it! In the div after the navigation I added display: inline-block; and that seemed to fix it. No idea why but I’m not complaining.

      Reply
  28. PengQinghui says:
    March 25, 2010 at 7:16 pm

    First, I must say my English is very poor and I’m a new web UI maker.But when I firstly come here,I think you give me much help. This is the first article guides me to learn more.

    Reply
  29. Barry Darcy says:
    April 4, 2010 at 5:24 am

    I am having trouble putting this tutorial together with my own image sprite, while I regularly use css sprites for my navigation I am not very often using jscript/query, but i would like to use this effect for my nav as it is very attractive, but with my own image! hopefully someone can help me, would be very gratefull.

    The steps I have taken so far are almost identical to this tutorial, except using my own image sprite and obviously changing the px sizes according.

    I have dowloaded the jquery library and also the jquery plugin, all into the same dir as my index doc (containing nav sprite) and sprite.js and style.css as in the tut.

    Problems- The image sprite appears correct in preview but there is no effect when hovering, not even a direct change between images without the fade anim.

    I am sure its not a mistake in the coding as ive been trying this for a few days now checking and double checking code.

    Would appreciate any kind of advise. Thanks you

    PS Javascript is turned on

    Reply
  30. Dallas says:
    April 16, 2010 at 11:25 pm

    Hello i love the sprite effect for my nav. I really want to figure out how to add a drop down menu with my CSS Sprites. I have looked everywhere and i am hoping you can help lol.

    Thanks man,

    Dallas

    Reply
  31. Living on Dividends says:
    April 29, 2010 at 4:59 pm

    That must have taken you DAYS to write. Cool post. I could actually follow it and will be making some cool nav buttons for my sites! I’ll like your aesthetic process, but as cool as jquery is, I’ll probably try to keep it pure CSS for the sake of speed. Nice post!

    Reply
  32. Ashley says:
    May 24, 2010 at 9:39 am

    This was a great tutorial. I modified mine a little differently and after a little brainstorming, fixed my errors and had a great looking navigation effect.

    It’s quite unfortunate to see all the negative comments people have left. This tutorial works fine. You can’t expect to follow a tutorial once and have everything work perfectly for you. Especially if you are a newb ;)

    It’s quite American of us to expect to have everything handed to us, and that we unable to spend a few extra minutes trying to figure out what we did wrong…

    Reply
  33. Dave says:
    June 27, 2010 at 4:55 am

    This tutorial would have to be one of the worst I have ever tried to do, does not work in Photoshop CS4 at all, whenever the stroke is applied to the gradient it reverses and darkens the gradient

    Reply
    • JonKyu says:
      July 13, 2010 at 10:21 pm

      I’m having a simliar problem. My site is also centered on the page. How can I make this centered? If I try to do it pixel by pixel it will be different on sites with different browser widths.

      Reply
  34. Drew says:
    June 28, 2010 at 2:13 pm

    Great Tutorial! Thanks. I’ve come across to problems:

    1. The IE fix isn’t working for me. Yet I know the fix is working for others.

    2. My website design is centred in the browser until I added these sprite menus. Now the whole site is on the left of the browser and I can’t work out why. I’m using a table with align=”center”. If I change it to align=”right” it moves the site to the right of the browser, but I can’t get it to centre. If I remove the sprites and associated code it centres perfectly. Is something in the CSS or JS causing it? Any suggestions?

    Drew

    Reply
  35. Phil says:
    July 2, 2010 at 12:25 am

    Hi

    As cool as this navigation is, I’m a little concerned about the SEO implications that arise from not having any link text. As I understand it (and I could be wrong here so feel free to enlighten me), Google tends to frown on links without any form of anchor text whether it be via an images ‘alt’ attribute or just entered directly. I read somewhere that it can lead to exclusion from Googles index as it can be interpreted as hiding links which is common on untrustworthy sites.

    Can anyone clear this up for me? Because this really is a cool effect…

    Cheers
    Phil

    Reply
  36. Justin says:
    July 6, 2010 at 12:26 pm

    Abhin, can you change the demo and source code to reflect the IE transparency fix that is here in the comments and presented on http://webaura.1free.ws/CSSsprites/ This is a great menu, but not everybody reads the comments.

    Reply
  37. Lucas says:
    July 20, 2010 at 5:03 pm

    Great tutorial , i ve just added to my personal list
    http://www.ajaxshake.com
    thanks

    Reply
  38. Jay says:
    July 22, 2010 at 4:50 pm

    Ok, this is what works to fix the IE problems plus there is also a correction to the original code posted:

    ::Correction::
    On the #navigation li a – you have to put ‘position: relative;’

    On the #navigation a .hover – change ‘position: relative;’ to ‘position: absolute;’

    ::IE Fix::
    Add this below the ‘opacity: 0;’ – filter:alpha(opacity=0);

    That will fix everything, I tested it in all browsers across the board.

    To add an ‘active’ class, all you have to do is add it at the end of each of your anchors because it relies on the same positioning:

    #navigation a.home .active {
    background-position: 0px -46px;
    }

    **You might have to remove the space between a.home and .active, for some reason I had to due to the fact that I am applying the active class dynamically with php.

    Cheers

    Reply
  39. loungekat says:
    July 28, 2010 at 8:46 pm

    Thanks for this one, I don’t usually work with sprites, this was really easy to follow.

    Reply
  40. GaryZ says:
    August 10, 2010 at 12:03 pm

    Hi Abhin,
    I followed your tutorial and stretched it out to a 960px length and everything works fine up to a point.
    On the hover all the links look great except for the last 3 links. On hover it displays the home non-hovered image on the last 3 hovers.

    I checked my widths and they are fine when you look at it but the hover is just displaying the wrong image.
    I double checked my addition of the elements as well and they all add up to the 960px wide.

    Can you take a look at my code and tell me whats when wrong?
    It’s at:

    http://www.garyzwebdesigns.com/projects/BMOCredo/

    Thanks
    GaryZ

    Reply
  41. travel says:
    August 31, 2010 at 10:21 am

    I think sprites can add a lot of character to your website/page. Good tutorial

    Reply
Comment Page 2 of 2 1 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.