[jQuery] superfish image buttons
Hello,
I've searched the List and read the entries. The problem is that I
could not get them to work. I'm ok with css, certainly not a pro. I'm
better with javascript and PHP. Here's the bit of css that I modified
from another post to this List...
#community a { background: transparent url(images/topnav/
community.gif) no-repeat 0 0; }
#community:hover a, #community.sfHover a { background-image:
url(images/topnav/community_on.gif); }
The images are correct, the paths that is. I can not get them to
display in the superfish menu. Here's my html (using the included
example menu)...
<ul class="sf-menu">
<li id="community">
<a href="#a"><img src="images/topnav/community.gif"></a>
<ul>
<li>
<a href="#aa">menu item that is quite long</a>
</li>
<li class="current">
<a href="#ab">menu item →</a>
<ul>
<li class="current"><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
My question is about what to name "community"? Where to place the id
in the html? I've tried applying it to the UL, the LI, the <a>, and
the <img> and none worked.
Appreciate any help. Since this is a common-ish problem, anyone care
to make an example with image buttons for main menu items? If I can
get this going, I'll donate my example to The Cause. Last note, I am
using multiple images for on/off but am open to thoughts on combining
into a single image.
Aloha,
Colin