Wed, 2012-03-14 00:39
Hi all,
I'm trying to implement an image rollover for the navigation menu on my site, but am having trouble recreating what the original theme creators did. The original image is here: http://www.elecwarehouse.com/skin/frontend/em0006/default/images/bg_menu.gif. You can see that there's a large space in the image which the original designers were able to remove so that the image would resize accordingly depending on the length of the text for the menu item.
I've installed an extension that changes the format of the menu but haven't been able to figure out how to re-implement the original look of the tabs. Can anyone tell me how this can be done?
Thanks,
John
Wed, 2012-03-14 21:38
#1
Hi John, Investigate
Hi John,
Investigate http://www.alistapart.com/articles/slidingdoors/ it's a popular technique for doing what you are after.
Wed, 2012-03-14 23:53
#2
Thanks Tony. I have read
Thanks Tony. I have read that page before posting here. My problem is that the menu items are handled by javascript & css in my CMS, and the rollover behavior is applied to a single div, not a list...
Thu, 2012-03-15 00:30
#3
Hi John, Not sure exactly
Hi John,
Not sure exactly what you are trying to do without the whole picture. I'm assuming this is meant to run behind the whole menu.
You should be able to apply the same technique to a div, you may just need to extend the images and put one of the backgrounds on an element inside the div like the UL.
I would start by cutting the image or extending it, so it will cover the whole area.
At the moment you have one image: "< ==========>".
You can either extend the image like "< =============================>".
Or you could have 2 images like "<================", "===============->" . (here you use both images as backgrounds on different elements, one ontop of the other)
Or 3 images like "<", "=", ">". (this on the middle image is repeated as a background and the others can be as image elements or backgrounds of other elements.