Making menu using rollover images

Dev Shed Forums Sponsor:

October 2nd, 2012, 09:41 AM

prikgek

Registered User

Join Date: Sep 2012

Posts: 6

Time spent in forums: 42 m 54 sec
Reputation Power: 0

Making menu using rollover images

On www.jansweijer.nl I have made a menu using rollover images with the code below. For the menu, I used this image (http://www.jansweijer.nl/wp-content/uploads/2012/10/Menugeheel.jpg). With the code, only a part of the image is shown, and the menu is centered on the page.

There are two issues with this however:

1) Since not every menu item has the same width, and the width is defined in #parent span (165px), of some items a too large part of the image is shown. I would like to define the width for each item individually. How do I do this?
2) The page takes realtively long to load. This is probably because a quite large image needs to be loaded 6 times (once for each menu item?). How can I improve the loading speed of the page?

CSS:

Code:

#parent {
    width:1000px;
/*  border-bottom: 1px solid #e6e7e8;*/
    height:52px;
    padding:0 0 0 0;
    margin: 0 auto 0;
    list-style-type:none;
 }
#parent li {
    float:left;
    margin-right:0;
 }

#parent span {
    position:absolute;
    width: 165px;
    height:52px;
    top:0;
    left:0;
    background-image:url(http://www.jansweijer.nl/wp-content/uploads/2012/10/Menugeheel.jpg);
}
#parent a {
    position:relative;
    display:block;
    width: 165px;
    height:52px;
}

#Menu01 {
    background-position:0 0;
 }
#Menu01:hover {
    background-position:0 -52px;
 }

#Menu02 {
    background-position:-85px 0;
 }
#Menu02:hover {
    background-position:-85px -52px;
 }

#Menu03 {
    background-position:-250px 0;
 }
#Menu03:hover {
    background-position:-250px -52px;
 }

#Menu04 {
    background-position:-412px 0;
 }
#Menu04:hover {
    background-position:-412px -52px;
 }

#Menu05 {
    background-position:-548px 0;
 }

#Menu05:hover {
    background-position:-548px -52px;
 }

#Menu06 {
    background-position:-672px 0;
 }
#Menu06:hover {
    background-position:-672px -52px;
 }

HTML:

Code:

<ul id="parent">  
<li><a href="http://www.jansweijer.nl/home">Home<span id="Menu01"></span></a></li>  
<li><a href="http://www.jansweijer.nl/industrialdesign/">Industrial Design<span id="Menu02"></span></a></li>  
<li><a href="http://www.jansweijer.nl/graphicdesign/">Graphic Design<span id="Menu03"></span></a></li>  
<li><a href="http://www.jansweijer.nl/photography">Photography<span id="Menu04"></span></a></li>  
<li><a href="http://www.jansweijer.nl/aboutme/">About me<span id="Menu05"></span></a></li>  
<li><a href="http://www.jansweijer.nl/contact/">Contact<span id="Menu06"></span></a></li> 
</ul>

October 2nd, 2012, 03:50 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,894

Time spent in forums: 6 Months 2 Days 19 h 44 m 32 sec
Reputation Power: 4192

Welcome to DevShed Forums, prikgek.

I recommend placing the unique identifier on the <li> instead of on the <span>s. Also I recommend using meaningful names (e.g. "home", "industrial") instead of just a common string that suffixed with a number. Then you can use each ID in your CSS selectors to set the width for each <li> and each <span>.

JPEG is not the best format for sprites. PNG is usually better. In general, it's best to run any PNGs you create through an optimizer.

In this case, an optimized PNG is approximately 83% smaller than the JPEG you were using.

Even though the image is used as the background for multiple elements, it will only be loaded once. That is the main reason for using image sprites -- fewer images need to be loaded.

Attached Images

Menugeheel.png (9.0 KB, 30 views)

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

October 2nd, 2012, 04:07 PM

prikgek

Registered User

Join Date: Sep 2012

Posts: 6

Time spent in forums: 42 m 54 sec
Reputation Power: 0

Hi Kravvitz,

Thanks for your reply and advice..! I will use it to improve my website and coding

Since I'm still a bit of a CSS noob, I don't completely understand what you mean by "Then you can use each ID in your CSS selectors to set the width for each <li> and each <span>.".
I've moved the unique identifyers from <span> to <li>, but now the rollover doesn't work anymore (probably because I didn't do the part I don't understand

)

October 2nd, 2012, 05:01 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,894

Time spent in forums: 6 Months 2 Days 19 h 44 m 32 sec
Reputation Power: 4192

You're welcome.

"#Menu01" and "#Menu01:hover" are selectors. I'm saying that you would replace them with something like "#home span" and "#home a:hover span" (or if you don't care about IE6 support, you can use "#home:hover span").

To set the widths, you could do something like this:

Code:

#home, #home span {
  width: 103px;
}
#industrial, #industrial span {
  width: 137px;
}

October 2nd, 2012, 06:17 PM

prikgek

Registered User

Join Date: Sep 2012

Posts: 6

Time spent in forums: 42 m 54 sec
Reputation Power: 0

It works!

I am very grateful! I've been messing around with this for the past few days!

Making menu using rollover images

Developer Shed Advertisers and Affiliates