Add image to Smooth Navigation Menu?

[Websitedesigner]

) Script Title: Smooth Navigation Menu (v1.5)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem:
I would like to be able to add an image to a SNM horizontal menu.

When a visitor mouses over a menu choice, I want to be able to first see an image at the top of the submenu. The image would not be clickable.

So I want to be able to go from this:


to something like this:


GM.com and toyota.com basically use this on their current sites main nav, but of course their sites are no doubt custom programmed.

Is this possible with the current code?

If not, who would I speak to about modifying the code?

Thanks!

[ddadmin]

Why not just add an image inside the first menu item's HTML markup; to essentially remove it from being a link, you can just set its href attribute to "#" and the mouse cursor when over it to "default":

<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#"><img src="bunny.jpg" style="width:150px; cursor:default" /></a></li>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>

[Websitedesigner]

Thanks, after some head scratching and a helpful suggestion I tried this:

<li><img src="menutest.jpg" width="171" height="64"/></li>

Seems to be great width-wise for a 170 wide menu column, just experimenting with the height. The cursor:default I guess is not needed because it is already at a default until I mouse lower to an actual menu selection.

Cross browser and browser version compatibility is always the gotcha!

It is actually working quite well in IE8. When I test in FF6.0.2 I get a weird transparent row below the jpg but above the first menu choice:



Ideas to resolve that? It seems like I've seen that before with images filling table cells in firefox some time ago.

[mburt]

Try adding this to it:

<li><img src="menutest.jpg" width="171" height="64" style="margin-bottom: -3px; " /></li>

And tweak that number accordingly.

[ddadmin]

Consistency and to avoid potential subtle issues is why I suggested adding the image inside the A element, so all you're doing is replacing the original menu link from a text link to an image link (then tweaking it so it doesn't look like one). Any reason why you can't do the following:

<li><a href="#"><img src="bunny.jpg" style="width:150px; cursor:default" /></a></li>

[Websitedesigner]

Thanks to both of you, I really appreciate the help.

I tried combing both your suggestions, but this did not work because it used the cell padding I guess and offset the image down and to the right some:

<li><a href="#"><img src="menutest.jpg" width="171" height="64" style="margin-bottom: -3px; "/></a></li>

This is working though

<li><img src="menutest.jpg" width="171" height="64" style="margin-bottom: -3px; "/></li>

At least in IE8 and FF6. As I mentioned I am always concerned with cross browser and browser version compatibility, which is hard for me to test unfortunately. Do you think this method may run into some compatibility issues?

[FernandoC]

I'm not sure if you've confirmed cross browser compatibility yet, but I think I can tell you what may have been causing the 3 pixel gap. By default images render as inline elements. Oftentimes that will lead to inconsistencies across browsers. Block elements render more consistently so long as you define margin and padding explicitly in the CSS file or with an inline style.

If you were to define that image with a style="margin:0px;padding:0px;display:block;" then it would probably render as you wanted, that is assuming there are no margin/padding from the <li> element it's contained in.

I'd feel more comfortable if I could see the complete version of the page with HTML and CSS, but I'm pretty sure that's the issue.