Change from simple txt mouseove to buttons..Howto?

Hi guys...

I have a side menu that has a mouse over effect as u go over the links...

heres teh css for the side menu in question...ive tried swapping out different things to see if i could get a button in but with no luck !

llooking to replace the menu tahst there now with a nice llooking button if possible...

/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/

ul.sideMenu {
  margin: 0;
  padding: 0;
}

.sideMenu li {
  display: inline;
  
  /* Needed since IE fails when you give it list-style: none; */  
  list-style-image: url('{template_url}/foo.gif');
  font: 400 1.3em "trebuchet ms", serif;
}

.sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;    
  
  text-decoration: none;
  color: #FFF;
} 

.sideMenu li a:hover {
  color: #0f6d38;
  background: #5F5F5F;
}

/* Active menu item */
.sideMenu li.here {
  display: block;  
  padding: 5px;
  color: #0f6d38;
  background: #000000;
}

/* Submenu of active menu item */
.sideMenu li.here ul {
  margin: 0;
  padding: 0;
}

.sideMenu li.here ul li a {
  padding-left: 35px;
  font: 400 0.55em verdana, arial, sans-serif; 
  color: #FFF;  
  background: url('{template_url}/images/bg/bullet.gif') no-repeat 10px 0px;
}

.sideMenu li.here ul li a:hover {
  color: #fff200;
  background: #5F5F5F url('{template_url}/images/bg/bullet.gif') no-repeat 10px 0px;
}

Code (markup):

Thanks in advance for any assistance...

tones

 

Got a link to an example page? (I'm asking because you have images in there.)

 

If you replace your text menu with buttons, it will decrease your SEO. Text navigation menus are much better, in my opinion, and others as well.

Sheree

 

I think he wants a visual change, not a structural one, Sheree. And if the buttons used are for the main menu, the decrease will be minimal (especially if the site has already been optimized properly).

 

Hay guys...thanks soo much for teh replies...

@ Dan Schulz

Here u go...sorry shouldve put that in initially
http://mikalaerin.com/realtor3/

and u are correct..im after a visual change from txt to buttons..jazz it up a lil....

@ affiliatesheree....actually wasnt aware of that... ! but its wat is wanted..buttons...soo...

again...thanks a lot guys...

 

I'd use an image substiution technique. Fake the appearance of the button with an image served as a background on a SPAN tag.

Here's an example of what I'm talking about: http://www.pmob.co.uk/temp/navimagereplace.htm (of course the image can be whatever you want it to).

I have another example here: http://www.dan-schulz.com/for-others/pet/dropdown-menu/template.html (this example is a dropdown menu).

The folder is unlocked, so feel free to grab the code and play around with it: http://www.dan-schulz.com/for-others/pet/dropdown-menu/

 

Lawlz, Dan, you almost said "the folder is unlocked so feel free to grab the gooey bits"!

 

Hay Dan,

Thank u very much for that...after looking at ure examples and playing around for a lil whil i was able to figure out how to implement it into my page without messing it up !! yeaaaa...

One question though....im a little confused..ure "image" per link is ONE image?


ive always ever used 2 seperate images or even 3 sometimes....to get the rollover effect...can u explain (in lay mans terms) how the css can use one image...

thanks again

 

You use the background-position: property on the SPAN to slide the image's position upwards when it's hovered over.

 

thanks a lot Dan...makes sense now...

really appreciate the time u took to help me out..