Dynamic-FX Slide-In Menu

**taydu** · 12-16-2006, 09:02 AM

1) Script Title: Dynamic-FX Slide-In Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm

3) Describe problem: I would like to have sub menu add in can some one please help..

**taydu** · 12-16-2006, 08:40 PM

can someone help ???

**jscheuer1** · 12-17-2006, 07:53 AM

You can set up a basic drop down off of that menu with (AnyLink Drop Down Menu):

http://www.dynamicdrive.com/dynamici...pmenuindex.htm

I put the head portion of AnyLink after the calls to the sliding menu:

Code:

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
A.ssmItems:link		{color:black;text-decoration:none;}
A.ssmItems:hover	{color:black;text-decoration:none;}
A.ssmItems:active	{color:black;text-decoration:none;}
A.ssmItems:visited	{color:black;text-decoration:none;}
//-->
</style>

<SCRIPT SRC="ssm.js" language="JavaScript1.2">

//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC="ssmItems.js" language="JavaScript1.2"></SCRIPT>
<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px sol . . .

It works easiest off of a header, I changed:

Code:

ssmItems[0]=["Menu"] //create header

in ssmItems.js to:

Code:

ssmItems[0]=["<a style=\"color:white;\" href=\"default.htm\" onClick=\"return clickreturnvalue()\" onMouseover=\"dropdownmenu(this, event, menu1, '150px');moveOut();\" onMouseout=\"delayhidemenu();moveBack();\">Web Design</a>"] //create header

and changed this in the AnyLink script:

Code:

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

to:

Code:

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu();moveOut();" onMouseout="dynamichide(event);moveBack();"></div>')

Here's a demo:

http://home.comcast.net/~jscheuer1/side/fx_drop/

When the menu slides out, hover over the first header (Web Design).

Notes: This sort of functionality would probably be better found in a menu already designed for it. It is very similar (just without the initial slide in) to a multilevel vertical menu, like HV Menu:

http://www.dynamicdrive.com/dynamici...menu/index.htm

**taydu** · 12-18-2006, 05:27 AM

thank, let me try it, one question John. Which value should I change to move the sub menu more to the right when it display? Your demo it lay on top of main menu which it hard to choose.

**jscheuer1** · 12-18-2006, 08:00 AM

Well, you cold use the vertical AnyLink:

http://www.dynamicdrive.com/dynamici...nkvertical.htm

The script is so similar to the regular AnyLink that you can just substitute Step 1 for the code added to the head last time and update this line in the new script as shown:

Code:

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu();moveOut();" onMouseout="dynamichide(event);moveBack();"></div>')

**taydu** · 12-19-2006, 08:19 AM

Thanks John, how can I add the right arrow to the right of every main menu that have a sub menu (like the second example http://www.dynamicdrive.com/dynamici...nkvertical.htm) and if I don't use the right arrow, how would I line up all the sub menu so when the character of the main menu doesn't match up (Menu 1, Menu 123, or Menu ABCXYZ) the sub menu will still line up.

Thanks

**jscheuer1** · 12-19-2006, 04:48 PM

Sorry to say, I am not all that interested in the details of how you decide to go here. I can tell you that the code used here:

Code:

ssmItems[0]=["<a style=\"color:white;\" href=\"default.htm\" onClick=\"return clickreturnvalue()\" onMouseover=\"dropdownmenu(this, event, menu1, '150px');moveOut();\" onMouseout=\"delayhidemenu();moveBack();\">Web Design</a>"] //create header

Could include an image tag. Or, whatever script that you finally decide to use for the drop down could include the image, if it has that capability.

**taydu** · 12-19-2006, 05:32 PM

thanks John

**taydu** · 12-20-2006, 08:45 AM

John I have a question, when put the following code int ssmItems

Code:

ssmItems[0]=["<a style=\"color:white;\" href=\"default.htm\" onClick=\"return clickreturnvalue()\" onMouseover=\"dropdownmenu(this, event, menu1, '150px');moveOut();\" onMouseout=\"delayhidemenu();moveBack();\">Web Design</a>"] //create header

That Item automatically become the header no name and target, and it use the same style as the header which make it so hard to distinquish between the item and the header. Is there a way to trick it so it not a header but still have sub menu?? I try many different way but none seem to work, hope you can give some tips

Thanks for your help

**jscheuer1** · 12-20-2006, 04:53 PM

I had thought about that already. First, you need to go into ssm.js and remove   from line # 73 (or around there):

Code:

document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'px" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'">&nbsp;<font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')}

Next, in ssmItems.js change the:

Code:

style=\"color:white;\"

to:

class=\"dlink\"

Then you can style the item in the stylesheet:

Code:

a.dlink:link {
display: block;
width:100%;
height:100%;
font-weight:normal;
text-decoration:none;
text-indent:1ex;
color:black;
background-color:white;
}

The red styles are required, the blue ones will make it look like the default styles for the other links. You can add or subtract to the blue ones as desired. You can also add the other link pseudo class styles:

Code:

a.dlink:hover	{color:black;text-decoration:none;background-color:#FFFF99;}
a.dlink:active	{color:black;text-decoration:none;}
a.dlink:visited	{color:black;text-decoration:none;}

Here, the blue is required to get the same hover color as the default set for links in the ssmItems.js here:

Code:

linkOverBGColor="#FFFF99";

Thread: Dynamic-FX Slide-In Menu

Thread Tools

Search Thread

Dynamic-FX Slide-In Menu

Bookmarks

Bookmarks

Posting Permissions