Jump to content


Photo
- - - - -

Using images with rollover effect in custom menu


  • Please log in to reply
9 replies to this topic

#1 efschilling

efschilling

    Advanced Member

  • Members


  • 59 posts

Posted 22 April 2012 - 01:43 PM

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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 22 April 2012 - 03:31 PM

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:

Please Login or Register to see this Hidden Content

Lastly, you'll need to here for tutorials on how to the CSS attributes that will create the effect you're looking for:

Please Login or Register to see this Hidden Content

(specifically these items on the left side: Styling Links, CSS Background, and possibly CSS Padding).

#3 efschilling

efschilling

    Advanced Member

  • Members


  • 59 posts

Posted 22 April 2012 - 03:41 PM

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:

Please Login or Register to see this Hidden Content

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

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 22 April 2012 - 03:45 PM

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

#5 efschilling

efschilling

    Advanced Member

  • Members


  • 59 posts

Posted 22 April 2012 - 03:59 PM

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

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 22 April 2012 - 04:01 PM

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

#7 efschilling

efschilling

    Advanced Member

  • Members


  • 59 posts

Posted 22 April 2012 - 04:02 PM

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

Please Login or Register to see this Hidden Content


You can then put html into the custom menus "Label" area and put the "destination link" above that.

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 22 April 2012 - 04:04 PM

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

#9 efschilling

efschilling

    Advanced Member

  • Members


  • 59 posts

Posted 22 April 2012 - 04:09 PM

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

#10 efschilling

efschilling

    Advanced Member

  • Members


  • 59 posts

Posted 22 April 2012 - 04:12 PM

Catrina, Do you know what ONFOCUS and ONBLUR do?