Need to add a sub-menu to an existing Image Menu Button

[Silverkitten]

I need to add a sub-menu to the Old World Soap link on my left side menu. My main soap page has gotten to large/lengthy. I've gotten quotes to have someone do this and they are upwards of $500! Can anyone here suggest a simple script to do this? I have some basic html skills. Enough anyway to keep up my site on my own unless something major happens. I did not design my site. But when I wanted enough ftp control to add updates/sales, my designers/hosts dumped me! So, I'm on my own. And learning as I go.
Anyway, I'm having a difficult time getting any of these DD scripts to incorporate into the already existing image button. When I add any of them, they want to add another test link into the menu bar to add the sub menu. I'm actually trying to add a sub menu onto the existing Old World Soap button that is already in place. Unfortunately, noting is working so far.

Any help would be greatly appreciated. Thanks in advance.

Donna

[jaffyy]

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm - I think this is what you are searching for... Specialy About your menu

<h4><img src="http://valhallasoap.com/images/side_menu/shop_for.gif"></h4>

<ul id="treemenu1" class="treeview">
<li><img src="here insert your button image">
	<ul>
	<li>Subitem1</li>
	<li>Subitem2</li>
	<li>Subitem3</li>
	<li>Subitem4</li>
	<li>Subitem5</li>
	</ul>  
</li>
<li><img src="here insert your button image">
	<ul>
	<li>Subitem1</li>
	<li>Subitem2</li>
	<li>Subitem3</li>
	<li>Subitem4</li>
	<li>Subitem5</li>
	</ul>  
</li>
<li><img src="here insert your button image">
	<ul>
	<li>Subitem1</li>
	<li>Subitem2</li>
	<li>Subitem3</li>
	<li>Subitem4</li>
	<li>Subitem5</li>
	</ul>  
</li>
<li><img src="here insert your button image">
	<ul>
	<li>Subitem1</li>
	<li>Subitem2</li>
	<li>Subitem3</li>
	<li>Subitem4</li>
	<li>Subitem5</li>
	</ul>  
</li>
<li><img src="here insert your button image">
	<ul>
	<li>Subitem1</li>
	<li>Subitem2</li>
	<li>Subitem3</li>
	<li>Subitem4</li>
	<li>Subitem5</li>
	</ul>  
</li>
<li><img src="here insert your button image">
	<ul>
	<li>Subitem1</li>
	<li>Subitem2</li>
	<li>Subitem3</li>
	<li>Subitem4</li>
	<li>Subitem5</li>
	</ul>  
</li>
<li><img src="here insert your button image">
	<ul>
	<li>Subitem1</li>
	<li>Subitem2</li>
	<li>Subitem3</li>
	<li>Subitem4</li>
	<li>Subitem5</li>
	</ul>  
</li>
<li><img src="here insert your button image">
	<ul>
	<li>Subitem1</li>
	<li>Subitem2</li>
	<li>Subitem3</li>
	<li>Subitem4</li>
	<li>Subitem5</li>
	</ul>  
</li>
<li><img src="here insert your button image">
	<ul>
	<li>Subitem1</li>
	<li>Subitem2</li>
	<li>Subitem3</li>
	<li>Subitem4</li>
	<li>Subitem5</li>
	</ul>  
</li>

<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)

</script>

hope this helps!

[Silverkitten]

Thank you Jaffyy.
I really like how easy this script is to work with. However, I don't care for the way it looks within my existing menu (see example). I was hoping to find a sub-menu script that is this user friendly, but that will fly out to the side when a visitor moves their mouse over one of the existing menu buttons, then disappear after. Does that make sense? And is that even possible to do with my existing menu?

Thanks again,
Donna

[Silverkitten]

So nobody has any ideas at all for my dilemma?
Anyone? I'm desperate.

[Veronica]

Try the AnyLinks menu http://www.dynamicdrive.com/dynamici...anylinkcss.htm

Copy and save the anylink.js file

In the head section of your page, paste:

<script type="text/javascript" src="anylink.js">

/***********************************************
* AnyLink CSS Menu script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<style>
.anylinkcss{
position:absolute;
margin-left:50px;          
visibility: hidden;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: #E9FECB;
width: 205px;
}

.anylinkcss a{
width: 100&#37;;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

.anylinkcss a:hover{ /*hover background color*/
background-color: black;
color: white;
}
}
</style>

In the body section, add as follows (in the href, the onClick is new, as is the div after it):

	<a href="http://valhallasoap.com/cpsoap.html"  onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')"><img src="http://valhallasoap.com/images/side_menu/old_world_soap.gif" alt="Old World Soap" width=202 height=72 border=0 id="Image7" onMouseOver="MM_swapImage('Image7','','http://valhallasoap.com/images/side_menu/old_world_soap_on.gif',1)" onMouseOut="MM_swapImgRestore()"></a><br>

                                                    
<div id="anylinkmenu1" class="anylinkcss">
<a href="/soap1.htm">Soap1</a>
<a href="/soap2.htm">Soap2</a>
<a href="/soap3.htm">Soap3</a>
<a href="/soap4.htm">Soap4</a>
<a href="/soap5.htm">Soap5</a>
</div>

You can change background colors, and (obviously) the links would need to be your links. If you want to do this to other parts of your nav bar, you can - just follow the directions on the DD page.

[koronz]

Hi All
I have also a simular problem.
I have a site which i want to edit.
I want to add sub menus to the existing menu. To this website

Could you pls help me ?