• 0
Sign in to follow this  
Followers 0

Using images with rollover effect in custom menu

Question

Posted · Report post

Have been searching for a plugin or a way to: 1. Use custom images for each menu item 2. To have a rollover effect How can this be done? Thanks! David

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

I don't think there is a plugin, but there is a way with custom CSS. One of the things you'll need is Firebug, which you can get here for free: getfirebug.com. You will also need to follow the instructions here for using Firebug to create CSS customizations: http://www.pagelines.com/wiki/Custom_CSS#How_to_use_CSS_Inspection_Tools. Lastly, you'll need to here for tutorials on how to the CSS attributes that will create the effect you're looking for: http://w3schools.com/css/default.asp (specifically these items on the left side: Styling Links, CSS Background, and possibly CSS Padding).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks I'll give this a try. Currently I have used "Custom Links" to put this code into the label area: sample image You can see the results here: http://www.boxershortstogo.com I did this for each menu item and the images load. When I had only one item in the menu the "rollover" effect worked. Once I put a second menu item into the menu the rollover stopped working. Would like to see if I can get the above method to work but also would like to know if it's not a good approach too. David

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HTML code can't be put in the "Label" area or any other text field in the Custom Menus settings page (only text).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, I changed my code to this: sample image and the rollover are now working!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Interesting, I thought labels only accepted text. Oh well. If your issue is resolved, please accept an answer.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you click on "Screen Options" in the custom menu area you'll get this: "Show on screen Theme Locations Custom Links Posts Pages Categories Tags Banner Sets Feature Sets Box Sets [code]Show advanced menu properties Link Target CSS Classes Link Relationship (XFN) Description"[/code] You can then put html into the custom menus "Label" area and put the "destination link" above that.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for pointing it out. I always forget about Screen Options! I'll accept your answer.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

One last question: when I look at the new menu created above in Chrome & Firefox it looks fine. When I look at it in Internet Explorer it is very large and the menu doesn't fit on one line but expands to two very ugly lines. I have checked "IE compatibility script" but this isn't doing the trick. Any ideas?! Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Catrina, Do you know what ONFOCUS and ONBLUR do?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0