Rollover Menus

• 

  mrshev · Member · Jan 31, 2012 at 9:00 am

  • Copy link
  • Add topic to favorites

  Is it possible, using a WordPress hosted blog, to use images as your menu? Simple rollovers?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 31, 2012 at 9:20 am

  • Copy link

  This would be relatively easy except for the bane of web designer’s; Internet Explorer. If internet explorer were a “real” browser, you could add the images as background images to the tabs and set the text for the tabs to a color of “transparent” and you would be done. But MS, in their infinite wisdom [sic] is the only browser in the known universe not to recognize transparent in a text color declaration.

  This means that the only way to get around this is to create and arrange all the buttons in a text widget using inline CSS, link the images manually to whatever you want them linked to, and then put use CSS positioning to move the text widget up and into position. This means your menu system becomes very complex and any change requires you to code in the changes manually.

• 

  thesacredpath · Member · Jan 31, 2012 at 9:21 am

  • Copy link

  Short answer: It is not for a CSS novice (not saying you are, just stating a fact).

• 

  mrshev · Member · Jan 31, 2012 at 7:20 pm

  • Copy link

  Oh, I am a CSS novice alright! I have managed to create an alternate effect by fixing the scrolling of the background and doing some nifty photoshop work.

  On another note, I have used the menus function and wanted to know how to change the appearance of those menus…

  Sorry, Sacredpath you seem to be my personal help-desk!

• 

  thesacredpath · Member · Jan 31, 2012 at 7:37 pm

  • Copy link

  Let’s make sure we are talking about the right site, because the site linked to your username doesn’t have a “menu.” Is this the site you are talking about, http://mrshev.wordpress.com/ ?

• 

  designsimply · Member · Jan 31, 2012 at 7:46 pm

  • Copy link

  Maybe I don’t understand the original request, but I think you should be able to do simple image rollovers with CSS. You’d need an image with both regular and hover states and then you’d need to shift the background position on :hover.

• 

  designsimply · Member · Jan 31, 2012 at 7:48 pm

  • Copy link

  I’m thinking of keeping the menu text and changing the background image, not sure if that’s what was meant by rollovers? But I also think you could do individual ones as well.

• 

  mrshev · Member · Jan 31, 2012 at 8:42 pm

  • Copy link

  No, not the current blog

  fraicheair.wordpress.com

  Designsimply: come on then, spill the beans.

• 

  mrshev · Member · Jan 31, 2012 at 8:43 pm

  • Copy link

  Oh, haven’t got the CSS upgrade yet – tomorrow! Always tomorrow.

• 

  designsimply · Member · Jan 31, 2012 at 8:45 pm

  • Copy link

  Did you want to replace each menu item with an image, or are you talking about that wooden looking background for the menu which is currently built in to your site background image?

• 

  mrshev · Member · Jan 31, 2012 at 8:48 pm

  • Copy link

  Simply, I just want to have the current menu item highlighted simply – say with a hand-drawn circle around it and when you rollover other menu items they highlight with a different coloured drawn circle. Something along those lines. I am going to play with the CSS myself and see what gives – though I am by no means an expert…or even a novice. More of a type-in-code-and-see-what-happens-oh-nuts-I-broke it kind of person/

• 

  designsimply · Member · Jan 31, 2012 at 8:57 pm

  • Copy link

  Here’s some sample CSS to change out the background image for the menu items in the Matala theme for just the top menu and not submenus:

  #access a:hover {
  background-image: url(http://s2.wp.com/wp-content/themes/pub/matala/images/menu-selected.gif) !important;
  background-repeat: no-repeat !important;
  }
  #access ul ul a:hover {
  background-image: none !important;
  }

  Note that you would need to make a background image that fits well for all of your menu item widths and that looks good with the wooden section of your site background image. I just used an example image that already comes with Matala and it doesn’t look very good with your current background image.

• 

  designsimply · Member · Jan 31, 2012 at 9:09 pm

  • Copy link

  To target the regular current menu item (without hover), use something like this:

  .current-menu-item {
  background-image: url(IMAGE_URL) !important;
  background-repeat: no-repeat !important;
  }

  Replace IMAGE_URL with your image URL.