Here is the follow up tutorial to my most recent tutorial on how to create Apple’s navigation bar in photoshop. This tutorial is not going to go in depth about all the benefits of sprites, but will show you how to use the technique correctly.
What are CSS Sprites, and why use them?
In lamens terms CSS Sprites are multiple images combined into one to reduce the amount http requests and server load time. Have you ever used the hover attribute with a background image that shows up on hover? Yep that’s right, when you hover over it for the first time there is a slight flicker, or moment where the image does not show. This happens because the browser doesn’t load that image until the hover state, therefore causing a slight flicker the first time the image is hovered over. CSS Sprites get rid of that flicker because instead of using two images and calling a separate image on hover you combine the two images into one and position it on hover. This might sound a little confusing at first, but keep doing it and you will get it.
Ok, Lets Get Started
1. Click here to download our starting image for this tutorial
2. Create a new HTML file and a CSS file with your favorite editor.
Setting up the HTML
We are going to use an unordered list because they are great especially for navigation. So create an unordered list like the one below. You can see that we have an LI tag for each section on our navigation, this is very important. You can also see that each LI tag has an ID assigned to it. This is also very important because we will need to specify the width of each list item later.
<ul id="nav"> <li id="list1"><a href="#"><span>Apple</span></a></li> <li id="list2"><a href="#"><span>Store</span></a></li> <li id="list3"><a href="#"><span>Mac</span></a></li> <li id="list4"><a href="#"><span>iPod + iTunes</span></a></li> <li id="list5"><a href="#"><span>iPhone</span></a></li> <li id="list6"><a href="#"><span>Downloads</span></a></li> <li id="list7"><a href="#"><span>Support</span></a></li> </ul>
That is all of the HTML code you will need for this technique, CSS takes care of the rest.
Setting up the CSS
Ok first and foremost I am hoping you have already linked your style sheet to your HTML file, if not do so now.
3. The first selector we will be working with is our Unordered list which we gave the ID of “nav.” We are going to set our main image as the background of our unordered list. Now, our images total height is 76px, but we only want half of the image to show at first correct? Yes thats correct, because we do not want the bottom half of the picture to show up until one of the buttons on the nav is hovered over. So we are setting the height of the Unordered list to 38 which is half of 76. Margin: 0 auto is just to center the Unordered list in your browser window that piece of code is not necessary. Check out the code below
* { margin: 0px; padding: 0px; }
#nav {
background: url(nav.png);
height: 38px;
width: 876px;
margin: 0 auto;
}
#nav span {
display: none;
}
4. Next we need to get the list items to be horizontal because that is the orientation of our navigation. So we float the list items to the left so that they line up horizontally. We also want to get rid of the bullets because they are just getting in the way! The next step is to give a height to our anchor tags. The anchor tags determine which part is going to be clickable which we are giving a height of 38px. If we want all of those 38px to be clickable we have to use display: block.
#nav li {
list-style-type: none;
float: left;
}
#nav a {
height: 38px;
display: block;
}
It’s Measuring Time
5. Now we have to measure out exactly how wide each of the “buttons” on out navigation our, so lets head back to photoshop. Open up nav.png and grab your ruler tool which is underneath your eyedropper tool and click on the very left edge of the document and drag to the dark middle separator between the second button. Make sure you ZOOM IN so you can be more accurate
6. Repeat step five for each of the buttons until you get all the way to the other end. If you measure correctly they should all add up to be 876px wide. If yours do not match that width move on for now and you can change it later. Now we have to get all of our selectors ready for each individual list item.
#list1 { width: 112px; }
#list2 { width: 120px; }
#list3 { width: 128px; }
#list4 { width: 125px; }
#list5 { width: 137px; }
#list6 { width: 131px; }
#list7 { width: 123px; }
7. Now that we have the widths set we need to position the rollover on hover. So how do we do that? We are going to use background positioning. So we choose our first selector which is #list1, and we set the background image as our nav.png. When using background positioning you have two choices move along the X-axis (horizontal) or the Y-axis (Vertical). Since are rollover image is underneath our active state we need to shift the image up the Y-axis. So how much do we shift it up? Well since our image is split directly in two we can just use the same height as we set for our Unordered list which was 38px, but we need to use a NEGATIVE 38 because the negative makes it go up the Y-axis where as a positive 38 would shift it down.
#list1 a:hover {
background: url(nav.png) 0px -38px no-repeat;
}
8. The -38px for the Y-axis will be the same on each one of the list items because we always want it to shift to the rollover section of our image, but the x-axis will change. The x-axis in the example above is set to zero because it is all the way to the left. So for the next list item we need to shift it over the amount of the previous list items width (Hopefully that makes sense). So we go back and look at the width of the first list item, which we see is 112px so we add that as a negative number to our x-axis on #list2.
#list2 a:hover {
background: url(nav.png) -112px -38px no-repeat;
}
9. We keep repeating this process for the other 5 list items. Just keep adding the previous widths so by the time you get to the end you should be adding six widths together. Here is what it should look like complete.
#list1 a:hover {
background: url(nav.png) 0px -38px no-repeat;
}
#list2 a:hover {
background: url(nav.png) -112px -38px no-repeat;
}
#list3 a:hover {
background: url(nav.png) -232px -38px no-repeat;
}
#list4 a:hover {
background: url(nav.png) -360px -38px no-repeat;
}
#list5 a:hover {
background: url(nav.png) -485px -38px no-repeat;
}
#list6 a:hover {
background: url(nav.png) -622px -38px no-repeat;
}
#list7 a:hover {
background: url(nav.png) -753px -38px no-repeat;
}
All Done!!
If you have followed all of the steps I have laid out above you should have a beautiful Apple Navigation Bar coded using CSS Sprites. If you have any questions please comment on this post. Please subscribe to my blog if you enjoyed this post. Thanks everyone
Loading ...
September 15th, 2009 at 7:58 am
While this is a nice tutorial, you missed the :focus part of their navigation
September 15th, 2009 at 7:59 am
Ooops, i meant :active
September 15th, 2009 at 8:51 pm
I haven’t tested this myself, but just looking over your code, it appears the span tags serve no purpose. Is there a reason you included them?
September 16th, 2009 at 3:53 am
@Brandon The only reason I included it was to make it easier to update. That way when I’m inside the code I know which button is which so I can change links with out having to go look back at the actual site. Of course there not necessary but I like to include them.
September 16th, 2009 at 5:21 pm
[...] Coding and tutorial: http://www.threestyles.com/tutorials/coding-apples-navigation-bar-using-css-sprites/ [...]
September 18th, 2009 at 9:52 pm
I’m having a bit of trouble. When i hover over the buttons the image that is supposed to replace them is offset. It looks to be about 38 pixels to the right. I’m assuming 38px because we use that value a lot. Any ideas?
September 18th, 2009 at 9:55 pm
Never mind. I just needed to do a reset. It was a padding/margin issue. Great tutorial.
September 20th, 2009 at 5:17 pm
I seem to have a funny problem.
Everything on the buttons seemed to shifted over to the right a little bit somehow.
How do you fix it?
September 20th, 2009 at 5:19 pm
What I mean by shifted is when I hover over a button it won’t hover until what looks like 38 pixels.
But I’m not for sure.
September 21st, 2009 at 7:57 pm
Beats the heck out of having to cut up images…I love your tutorial!
September 21st, 2009 at 11:32 pm
to take it a step further how would you do it and have the image stay highlighted when you are on that particular page?
October 5th, 2009 at 4:06 pm
thanks for this tutorial…
I would also like to know how to make the image stay highlighted when on the necessary page……
Thanks again
October 9th, 2009 at 1:12 am
thanks for the tutorial. i just subscribed to your site’s rss
October 16th, 2009 at 2:36 am
Matthew Says:
September 18th, 2009 at 9:55 pm
“Never mind. I just needed to do a reset. It was a padding/margin issue. Great tutorial.”
Hey Matthew,
Could you tell me what you had to change/fix to solve your issue? I seem to be having the same problem.
Thanks
October 23rd, 2009 at 10:36 pm
Hi,
Love the tutorial but I have the same problem with the hover somebody know how to fix this?
October 24th, 2009 at 2:55 am
For those of you that are having trouble getting it to look right. Add this to the top of your CSS * { margin: 0px; padding: 0px; }
October 24th, 2009 at 4:58 am
Hi, very simple tutorial, but wisely designed. bravo
October 29th, 2009 at 9:48 am
[...] 14. Coding Apple’s Navigation Bar Using CSS Sprites [...]
November 10th, 2009 at 4:21 am
[...] the Apple navigation bar on their current website.PART TWO IS HERE LEARN HOW TO CODE THIS EXAMPLE HERE – Which will show you how to code this using the CSS Sprite technique so Stay Tuned.Here is a [...]
November 25th, 2009 at 9:07 am
Hey Shane,
I really love your tutorials! I am having a problem with the apple css spirits though. When I hover, it is slightly off to the left. I have repeatedly checked for errors but can not find any. Do you have any suggestions? Thanks again for all the your awesome tutorials!!!
November 25th, 2009 at 9:10 am
Sorry *I ment slightly of to the right.
November 25th, 2009 at 2:38 pm
@Matt S
I appreciate your support and I’m glad that you are enjoying my tutorials! I would really have to see your code in order to troubleshoot it. My first guess is that your width’s are off, but if you send it to me I’ll take a look at it.
November 25th, 2009 at 9:06 pm
Shane
Thank you so much for the fast response. Here is everything I put in css.
* { margin: 0px; padding: 0px; }
#nav{
background: url(nav.png);
height: 38px;
width: 876px;
margin: 0 auto;
}
#nav span {
display: none;
}
#nav li {
list-style-type: none;
float: left;
}
#nav a {
height: 38px;
display: block;
}
#list1 { width: 112px; }
#list2 { width: 120px; }
#list3 { width: 128px; }
#list4 { width: 125px; }
#list5 { width: 137px; }
#list6 { width: 131px; }
#list7 { width: 123px; }
#list1 a:hover {
background: url(nav.png) 0px -38px no-repeat;
}
#list2 a:hover {
background: url(nav.png) -112px -38px no-repeat;
}
#list3 a:hover {
background: urlnav.png) -232px -38px no-repeat;
}
#list4 a:hover {
background: url(nav.png) -360px -38px no-repeat;
}
#list5 a:hover {
background: url(nav.png) -485px -38px no-repeat;
}
#list6 a:hover {
background: url(nav.png) -622px -38px no-repeat;
}
#list7 a:hover {
background: url(nav.png) -753px -38px no-repeat;
}
November 25th, 2009 at 9:51 pm
Hey Mat
I see two things.
First: Make sure that when you use 0′s to add px behind it. Like in the #nav change it to margin: 0px auto;
Secondly:
Your Code:
#list3 a:hover {
background: urlnav.png) -232px -38px no-repeat;
}
You forgot the opening parethesis on the background attribute.
Correct Code:
#list3 a:hover {
background: url(nav.png) -232px -38px no-repeat;
}
November 25th, 2009 at 11:19 pm
Shane
Thank you so much! I corrected those errors but unfortunately it did not correct the problem. I was wondering though if it could be do to other css I am currently using? I was hoping if you could view my site and see the issue first hand?
December 1st, 2009 at 1:13 pm
@Matt S
Yes it could be a CSS conflict. Make sure that you only have one declaration of each ID so that there is no interference.
December 3rd, 2009 at 6:09 pm
An excellent tutorial, thanks for posting.
Regarding the CSS directive:
* { margin: 0px; padding: 0px; }
I have found that setting padding: 0px; on #nav achieves the same effect without affecting padding elsewhere on the page.
SjH´s last blog ..Latitude XT + 128GB SSD + Windows 7 RTM
January 16th, 2010 at 11:53 am
[...] and tutorial: http://www.threestyles.com/tutorials/coding-apples-navigation-bar-using-css-sprites/ Share and [...]
January 29th, 2010 at 4:13 pm
Could it be posible to highlight when you are in a current page?
Thank you and nice tutorial!!
February 17th, 2010 at 10:22 pm
hey. it seems to be working fine on FF, but not on Safari? any solves?
February 22nd, 2010 at 12:28 pm
When one disables images (to simulate eg a screenreader or perhaps mobile) which i do using Firefox web developer toolbar, you see nothing at all, no links.
when you disable CSS you see a nice UL list of links.
so far i have not seen an accessible method of using sprites for links, and most methods seem to involve lots of javascript replacement techniques…. any thoughts?
(the problem being that any text appears OVER the image, and if you move or remove the text then without images / css it is not readable…)
February 28th, 2010 at 6:54 am
but you never taught us how to make the buttons in the mouseover darkened state…
here is what you need: http://www.threestyles.com/demo/nav.png
but you only taught us how to make this: http://www.threestyles.com/wp-content/uploads/2009/09/applefinalthumb1.jpg
please tell me how to make the mouseover state o the nav bar! please
April 19th, 2010 at 12:21 am
Shane, I have a silly ‘Blonde’ question…?
…i’m not sure how to create the nav bar as a double or mirror image by way of your previous photoshop ‘ how-to’ on making a single nav bar ?
I mean, the Ps tutuorial walks us thru for only a single bar right?
The single bar is really sexxy but not really functional?
I mean unless I hot-spot it or something, but that’s kinda weak and old school, no?
I really the way of the Sprites…, as its much more powerful !
To make it work we have to create to two, yes?
I hope I’m making sense?
justme -thanx
Berkeley, CA
April 20th, 2010 at 9:20 am
seems i can’t comment here html code so i uploaded the file,download it from here
“megaupload.com/?d=LLTXZCCT”
April 26th, 2010 at 10:30 pm
@justme
Yes I did not show how to achieve the hover effect in the photoshop tutorial, but I plan to do a complete tutorial very soon so stay tuned.
Shane
May 19th, 2010 at 12:39 pm
I loved, tks.
One problem here: your bar its ok in Firefox, but mine bar was slightly larger and the sources (apple, store…) were unfocused.
Wladimir
May 26th, 2010 at 8:27 am
Help please… My hovering effect is correct, but the “Support” seems to be below the first link.
The whole menu bar appears like this:
Apple | Store | Mac | iPod | iPhone | Downloads | Support
But when I tried to hover Support it looks like this:
Apple | Store | Mac | iPod | iPhone | Downloads | Support
| Support
June 4th, 2010 at 4:31 pm
Hi Shane,
My customized .png doesn’t show up in dreamweaver preview after I meticulously put in all of the necessary code outlined in your tutorial. Could you have a look at this code and tell me what might be wrong?:
body
{
background-image:url(‘file:///The Machine/Users/jose/Desktop/lho/img01.jpg’);
background-repeat:repeat;
}
* { margin: 0px; padding: 0px; }
#nav {
background: url(file:///The%20Machine/Users/jose/Desktop/lho/apple.png);
height: 38px;
width: 875.5px;
margin: 0 auto;
}
#nav span {
display: none;
}
#nav li {
list-style-type: none;
float: left;
}
#nav a {
height: 38px;
display: block;
}
#list1 { width: 126px; }
#list2 { width: 120px; }
#list3 { width: 127.5px; }
#list4 { width: 125.5px; }
#list5 { width: 137px; }
#list6 { width: 131.5px; }
#list7 { width: 108px; }
#list1 a:hover {
background: url(file:///The%20Machine/Users/jose/Desktop/lho/apple.png) 0px -38px no-repeat;
}
#list2 a:hover {
background: url(file:///The%20Machine/Users/jose/Desktop/lho/apple.png) -126px -38px no-repeat;
}
#list3 a:hover {
background: url(file:///The%20Machine/Users/jose/Desktop/lho/apple.png) -246px -38px no-repeat;
}
#list4 a:hover {
background: url(file:///The%20Machine/Users/jose/Desktop/lho/apple.png) -373.5px -38px no-repeat;
}
#list5 a:hover {
background: url(file:///The%20Machine/Users/jose/Desktop/lho/apple.png) -499px -38px no-repeat;
}
#list6 a:hover {
background: url(file:///The%20Machine/Users/jose/Desktop/lho/apple.png) -636px -38px no-repeat;
}
#list7 a:hover {
background: url(file:///The%20Machine/Users/jose/Desktop/lho/apple.png) -767.5px -38px no-repeat;
}
Podcasts
Hebrew Words
Hebrew Phrases
Hebrew Verbs
Hebrew Slang
Become a Member
Useful Links
July 6th, 2010 at 6:55 pm
Thanks for posting this, just what i was looking for!
David´s last blog ..Innovation-The Next Great Buzzword
July 13th, 2010 at 4:25 pm
Great Tutorial! I was able to create a beautiful menu bar , thanks Shane. One question:
How do I create an Active State for a multi-color menu bar (on hover, each rollover for each list item turns a different color).
Please help! Thanks
August 4th, 2010 at 12:57 am
I have a pretty basic question, I’m not sure at which point in this tutorial I am actually supposed to insert the image. I copied the code exactly, but I can’t see the nav bar on my page. There’s just a blank space where each button should be.
August 4th, 2010 at 1:06 am
Here’s my code if you need to see that. I customized my bar, but aside from the number and size of the buttons, everything else is the same:
* { margin: 0px; padding: 0px; }
#nav {
background: url(nav.png);
height: 36x;
width: 947px;
margin: 0 auto;
}
#nav span {
display: none;
}
#nav li {
list-style-type: none;
float: left;
}
#nav a {
height: 36px;
display: block;
}
#list1 { width: 197px; }
#list2 { width: 282px; }
#list3 { width: 228px; }
#list4 { width: 240px; }
#list1 a:hover {
background: url(nav.png) 0px -36px no-repeat;
}
#list2 a:hover {
background: url(nav.png) -197px -36px no-repeat;
}
#list3 a:hover {
background: url(nav.png) -479px -36px no-repeat;
}
#list4 a:hover {
background: url(nav.png) -707px -36px no-repeat;
}
August 6th, 2010 at 2:07 pm
Why are your archive pages not loading?
August 14th, 2010 at 10:33 pm
Great Tutorial!
September 12th, 2010 at 8:46 am
this is very informative. but would you like to give me full download working code.
i want this please
asad´s last blog ..Blackberry Mastercard Moneysend App Free For Download
October 1st, 2010 at 1:31 pm
[...] How to code Apple’s Navigation menu using CSS sprites [...]
October 11th, 2010 at 12:07 am
Wow…i’ve heard about this technique before but never really took the opportunity to play around with it. I simply love it. Its semantically coded and so easy to put together…thanks alot
November 22nd, 2010 at 11:07 pm
Shane,
everybody is asking how to make the active or current state highlighted but you never answered
could you please answer that or comment it?
January 14th, 2011 at 12:30 pm
Thanks for showing us the Apple love
Htc desire case´s last blog ..Men’s Carved Two-Tone Wedding Band in 18k White and Yellow Gold
February 3rd, 2011 at 7:56 pm
is there a way to create the nav.png with css ? so you can save the 14kb the nav.png is ?
February 11th, 2011 at 9:19 pm
Hi
I have same problem as another guys then hovering my pic shifted to right side.
Here is my code maybe you can spot mistake?
@charset “utf-8″;
* {
margin: 0px;
padding: 0px;
}
#bgshadow {
background-image: url(../images/bacground%20shadow.jpg);
margin-right: auto;
margin-left: auto;
height: 1000px;
width: 1040px;
}
#wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
}
#logo {
background-image: url(../images/logo%20dd.jpg);
height: 127px;
width: 313px;
margin-left: 50px;
}
#nav {
height: 53px;
width: 954px;
background-image: url(../images/nav%20bar/navigation-bar.gif);
margin-top: 0;
margin-bottom: 0;
background-repeat: no-repeat;
margin: 0 auto;
}
#nav span {
display: none;
}
#nav li {
list-style-type: none;
float: right;
margin: auto;
}
#nav a {
height: 50px;
display: block;
}
#list1 { width: 126px; }
#list2 { width: 126px; }
#list3 { width: 126px; }
#list4 { width: 126px; }
#list5 { width: 126px; }
#list1 a:hover {
background-image: url(../images/nav%20bar/navigation-bar.gif);
background-repeat: no-repeat;
background-position: -824px -53px;
}
#list2 a:hover {
background-image: url(../images/nav%20bar/navigation-bar.gif);
background-repeat: no-repeat;
background-position: -698px -53px;
}
#list3 a:hover {
background-image: url(../images/nav%20bar/navigation-bar.gif);
background-repeat: no-repeat;
background-position: -572px -53px;
}
#list4 a:hover {
background-image: url(../images/nav%20bar/navigation-bar.gif);
background-repeat: no-repeat;
background-position: -447px -53px;
}
#list5 a:hover {
background-image: url(../images/nav%20bar/navigation-bar.gif);
background-repeat: no-repeat;
background-position: -321px -53px;
}
March 31st, 2011 at 1:00 am
Hi Shane,
Great tutorial – thanks for sharing.
Could you advise how to implement a CSS drop down menu into this CSS sprite navigation?
Thanks in advance,
Mike
May 10th, 2011 at 8:51 am
can anyone help me? the css below wont display properly in IE :/
html #main-menu {
list-style : none;
padding : 0px;
height : 38px;
width: 1000px;
float: left;
margin-top: 75px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
html #main-menu li a {
display : block;
float : left;
height : 37.5px;
background : url(../img/navigation_img/main_navigation_menu_bar.png);
font-family : “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #fafafa;
text-decoration : none;
text-align : center;
line-height : 37.5px;
}
html #main-menu li a.home {
width : 92px;
background-position : 0% 0%;
display : block;
text-indent : -999px;
margin : 0;
padding : 0;
}
html #main-menu li a.SalarySurveys {
position : relative;
width : 134px;
background-position : -92px 0%;
}
html #main-menu li a.hr {
width : 170px;
background-position : -226px 0%;
}
html #main-menu li a.benefits {
width : 121px;
background-position : -396px 0%;
}
html #main-menu li a.news {
width : 120px;
background-position : -517px 0%;
}
html #main-menu li a.online_services {
width : 172px;
background-position : -637px 0%;
}
html #main-menu li a.webdemos {
width : 185px;
background-position : -809px 0%;
}
html #homefade span.hover {
position : absolute;
display : block;
height : 37.5px;
width : 93px;
background : url(../img/navigation_img/main_navigation_menu_bar.png);
background-position : 0% -37.5px;
}
html #main-menu li a.home:visited {
display : block;
height : 37.5px;
width : 93px;
background : url(../img/navigation_img/main_navigation_menu_bar.png);
background-position : 0% -37.5px;
}
html #main-menu li a.SalarySurveys:hover {
display : block;
background-position : -93px -37.5px;
color : #cecece;
}
html #main-menu li a.SalarySurveys:active {
color : #0cf;
}
html #main-menu li a.hr:hover {
background-position : -226px -37.5px;
color : #cecece;
}
html #main-menu li a.hr:active {
color : #0cf;
}
html #main-menu li a.benefits:hover {
background-position : -396px -37.5px;
color : #cecece;
}
html #main-menu li a.benefits:active {
color : #0cf;
}
html #main-menu li a.news:hover {
background-position : -517px -37.5px;
color : #cecece;
}
html #main-menu li a.news:active {
color : #0cf;
}
html #main-menu li a.online_services:hover {
background-position : -637px -37.5px;
color : #cecece;
}
html #main-menu li a.online_services:active {
color : #0cf;
}
html #main-menu li a.webdemos:hover {
background-position : -808px -37.5px;
color : #cecece;
}
html #main-menu li a.webdemos:active {
color : #0cf;
}
May 19th, 2011 at 2:20 pm
Thank Very Much
June 1st, 2011 at 5:41 am
[...] Coding Apple’s Navigation Bar Using CSS Sprites | Three StylesJul 8, 2010 … 1 Review of Route 20 Bar & Grill “Route 20 Bar & Grill has great American … Skip to Search Form; Skip to Navigation; Skip to Page Content … [...]
June 2nd, 2011 at 5:05 pm
Cool tutorials and nice use of mac terms for visitor magnet
Still don’t get the need for spans…since when the extra and unused markup makes it easier to update???
Other than that, nice work!
June 11th, 2011 at 9:18 am
Hi Shane,
Just want to say that this is by far the best tutorial for sprites I have followed. Very easy to understand and doesn’t come across as daunting, advanced CSS code at all (which some tutorials do!). It worked a treat first time. Will definitely be looking to your tutorials if I need help again.
June 12th, 2011 at 12:46 pm
@Mark
I’m glad it was a helpful resource to you!
June 13th, 2011 at 5:37 pm
Hi Shane,
I’m new to this and your tutorial worked really well for me, but I can’t figure out how to make the active state? How can we make this state for the page we are on?
Thanks!!
June 18th, 2011 at 2:48 pm
Thanks, great tutorial. To bad dreamweaver can’t take it when you preview it in safari, but everything’s fine when uploaded.
July 28th, 2011 at 2:42 pm
I still don’t see a comment where it has solved this nav’s inability to “stick” to a certain color for the current active page. Could someone please answer this for me and all of those who have already expressed a need for it?
Thank you!
August 3rd, 2011 at 1:11 pm
@angie
How to add an active state
1. You would need to create the active state image and add it to the bottom of the sprite.
2. Use jQuery to add the active class.
3. Adjust the CSS down to the active state portion of the sprite when the class is applied.
September 30th, 2011 at 9:26 pm
this is a very clear tutorial for a person who new to css. THANK YOU!
October 13th, 2011 at 3:23 pm
Another cool implementation of CSS sprite: Dynamic CSS Sprite implementation to give a painting effect. Read how to implement it by reading an easy to follow tutorial at http://blog.kunals.com/dynamic-css-sprite-implementation-gives-a-painting-effect/
October 27th, 2011 at 11:17 pm
It would be nice if you could supply the .PSD for this… Took me a while to get the exact measurements.
November 11th, 2011 at 2:11 pm
Great tutorial. Really helpful comments too! Thanks.
December 1st, 2011 at 1:46 pm
Great tutorial…
Thanks!!!!
January 11th, 2012 at 10:49 am
Hi
Thanks for tutorial, but I have a question for you, as well.
How we can make the current page list(menu) highlighted?
As you know when we select any pages(let’s say support) how the user should know on which page he/she is visiting at the time?!
Thanks again