PDA

View Full Version : Making a drop down menu from a image


soundchaseruk
04-26-2010, 07:39 PM
My client wants me to provide a image and then when clicked on a menu drops down. Then a link from the menu

I have made spry menus but I have no idea how to do this from an image

Any ideas ?

I am using CS3

zebulonzed
04-26-2010, 10:44 PM
This javascript will let you do that.
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

gentleone
04-27-2010, 05:10 AM
you don't need javascript for that. Just make a nested ul so that you get a dropdown and style it with CSS.
Something like this or google for CSS dropdown to read up on that.


<ul>
<li class="image">
<ul>
<li>menu item 1</li>
<li>menu item 1</li>
<li>menu item 1</li>
<li>menu item 1</li>
</ul>
</li>
</ul>

soundchaseruk
04-27-2010, 06:58 AM
Thanks for that. I am a relative new user to DW so can i ask where do I place the coding you gave me ?

here is the html from the table that has 4 (2 more to be inserted) images : Where exactly do I place it all ?

Thanks. I owe you a beer !!

<tr>
<td class="bodyText">
<p class="sidebarText style4">&nbsp;</p>
<p class="sidebarText"><img src="assetts/Corporate.jpg" width="196" height="114" /></p></td>
<td class="bodyText">&nbsp;</td>
<td class="bodyText"><div align="center"><img src="assetts/themed.jpg" width="127" height="190" /></div></td>
<td class="bodyText">&nbsp;</td>
<td class="bodyText">&nbsp;</td>
<td class="bodyText">&nbsp;</td>
<td class="bodyText">&nbsp;</td>
</tr>
</table>

gentleone
04-27-2010, 07:15 AM
You place it where you want the dropdown to appear, but you need to understand the basics how to style a CSS menu.


<ul id="nav">
<li class="image">
<ul>
<li>menu item 1</li>
<li>menu item 1</li>
<li>menu item 1</li>
<li>menu item 1</li>
</ul>
</li>
</ul>
Here is an dropdown example from CSS play with an image, but in your case it will be than one menu item so that you get the same effect. Dive into the code to see how it's done.
http://www.cssplay.co.uk/menus/image-dropdown-v4.html