PDA

View Full Version : 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/dynamicindex1/dropmenuindex.htm

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


<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:


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

in ssmItems.js to:


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:


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

to:


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/dynamicindex1/hvmenu/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/dynamicindex1/anylinkvertical.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:


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/dynamicindex1/anylinkvertical.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:


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


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 &nbsp; from line # 73 (or around there):


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:


style=\"color:white;\"

to:

class=\"dlink\"

Then you can style the item in the stylesheet:


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:


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:


linkOverBGColor="#FFFF99";

taydu
12-21-2006, 09:20 AM
Thanks John,

It work great! On the sub menu portion, I wanted to create a header too, so I edited the CSS style. I got the color, size, text, bg for the header, but I can't find out how to remove the hover color for the header. Can you give some tips

thanks

jscheuer1
12-21-2006, 06:43 PM
This really shouldn't be a problem unless you are reusing a class from another type of link on purpose or through its cascading to the element (in this case probably a link) in question. Use a different class for the sub menu header links and if they are still inadvertantly following rules from another selector, set their rules to specifically contradict these rules. CSS styles will cascade to any element that their selector (red in the below) selects:


a.dlink:link {
rules here
}

will select any link with the class 'dlink'.


.dropmenu a {
rules here
}

will select all links that are children of an element with the class 'dropmenu'. To be absolutely certain that a link with the class 'dlink' will behave as desired when it is also a child of an element with the class 'dropmenu', you have to select it like so:


.dropmenu a.dlink {
rules here
}

Any pseudo class(es) involved with the links need to have their rules spelled out as well if the differ from any inherited rules.

taydu
01-11-2007, 08:58 PM
thanks for you help jscheuer1's,

Have a question about the original slide in menu. It's possible for me to use css style for the hdrBGColor instead of the color ? I play with it a little but didn't seem to work. Do you have any suggestion?

hdrBGColor= "red";

jscheuer1
01-12-2007, 02:53 AM
I'm not sure what you mean by css style. You can do this:


hdrBGColor= "#cccccc";

using the hex value instead of the color name. If you wanted to override this setting in a stylesheet, you would have to give the headers a class name (from around line 73 of ssm.js):


document.write('<td class="ssmHdr" 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>')}


Then you could do this in a stylesheet:


.ssmHdr {
background-color:blue;
}

In fact, once you have the class name to act as a selector, you can include any valid style rules for it in the above stylesheet entry.

taydu
01-12-2007, 03:45 AM
sorry for not making it clear. I wanted to use a small gif image and repeat it to fill the whole header, instead of using color name or hex.

jscheuer1
01-12-2007, 04:37 AM
As I said, you can edit the ssm.js file as indicated, then in your style section apply whatever valid styles you like. The style for background image is:


.ssmHdr {
color:white;
background-color:blue;
background-image:url('whatever.gif');
}

Note: When specifying a background image, it is always best to specify a background color (as a fall back) as well as a color (to be sure the text is legible). For more on css styles see your favorite css reference or:

http://www.blooberry.com/indexdot/css/index.html