PDA

View Full Version : Rollover menu



Einarrson
Jul 11th, 2009, 08:30 PM
Hi,

I've been looking at this as a way of giving my menu buttons the rollover swap effect. It looks like a neat way to do it.

http://www.elated.com/articles/css-rollover-buttons/

It uses a span here though it is for a single button, whereas my menu is a ul with a different image applied in the CSS, so it's a bit different

<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a>

I think I have the CSS figured but am unsure how to modify the markup to work with what I have already.

The site, (on borrowed webspace): http://pchelplocal.airedaledesign.com/index.html

The CSS:

ul#menu {
list-style-type:none;
margin:0;
padding:0;
width:766px;
height:50px;
margin:0 auto;
}

#footer {
position:relative;
display:block;
height:50px;
width:766px;
margin-top:20px;
background-image:url('images/menuback.jpg')
}

#footerleft {
display:block;
position:absolute;
left:0;
bottom:0;
width:120px;
height:50px;
background-color:#ffffff;
background-image:url('images/menuleft.jpg');
}

#footerright {
display:block;
position:absolute;
right:0;
bottom:0;
width:120px;
height:50px;
background-color:#ffffff;
background-image:url('images/menuright.jpg');
}

#menu li {
float:left;
width:127px;
}

#menu {
z-index:10;
position:absolute;
display:block;
left:135px;
}

#menu a {
display:block;
width:120px;
height:50px;
}

#home{
background:url('images/home.jpg')
}

#services{
background:url('images/services.jpg')
}

#pricing{
background:url('images/pricing.jpg')
}

#contactus{
background:url('images/contactus.jpg')
}


The markup:

<div id="footer">
<div id="footerleft"> </div>
<div id="footerright"> </div>
<ul id="menu">

<li><a href='#' id="home"></a></li>
<li><a href='#' id="services"></a></li>
<li><a href='#' id ="pricing"></a></li>
<li><a href='#' id="contactus"></a></li>
</ul>
</div>



Thanks

SB65
Jul 12th, 2009, 11:46 AM
Your markup doesn't need changing. Assuming that you create a new background image for #home which is 120 by 100px, with the "hover" image at the bottom, then you need to add something like:


#home:hover{background-position:0 -50px}

and similarly for your other buttons.

Einarrson
Jul 13th, 2009, 06:31 PM
Your markup doesn't need changing. Assuming that you create a new background image for #home which is 120 by 100px, with the "hover" image at the bottom, then you need to add something like:


#home:hover{background-position:0 -50px}

and similarly for your other buttons.

Just that? Ok...

Thanks, I'll give it a try.

Einarrson
Jul 13th, 2009, 06:47 PM
Thanks mate, that works a treat!