Dynamic-FX slide in menu question

**chaostheory** · 05-23-2005, 08:47 PM

Dynamic FX slide menu
http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm

I love the slide in feature and have used this menu before, but is there a way to make it slide out when you click on menu, and slide back in the same way. Or to make it stay out all together and have no slide effect. I love the layout and it looks great just need those two features and im golden. any help is appreciated.

ChaosTheory
"There is a fine line between genious and insanity measured only by success"

**jscheuer1** · 05-24-2005, 03:28 AM

The click part is not too hard, in ssm.js add this variable and function:

Code:

var dFlag=0
function moveMenu(){
if (dFlag==0){
dFlag=1;
moveOut()
}
else{
dFlag=0;
moveBack()
}
}

just above this line:

Code:

function buildMenu() {

Change both occurrences of:

Code:

onmouseover="moveOut()" onmouseout="moveBack()"

to:

Code:

onclick="moveMenu()"

That's it.

About having it stay out all the time, what exactly do you mean? Do you want it out when the page loads or, once it moves out, it never moves back? Either can be done but, not both at once, obviously. And if it moves out once, what makes it do that - mouseover or click?

**chaostheory** · 05-24-2005, 12:03 PM

Thats great, just what i wanted, and seemed so easy too once you put it up. I'm a network administrator, how i ended up working on the company website is beyond me. What i meant as always open, meaning it was open when the page loaded and was always open. That was another way id like to get the code for just in case that is what the bossman likes. Trying to create different solutions so they can choose what they like.

Joe

**chaostheory** · 05-24-2005, 12:37 PM

I just ran into my second goofy turnout. While i was changing all the colors around to what i wanted, i have a problem now that when i move the mouse over a link ive visited the text dissappears even though i have the hover text color set to a different color. Not sure how to explain this. Ill attach a screenshot of what i mean. Basically the color i have set for visited links is the same as normal links, but when i hover over a link ive been to, the color of the text is #000066 which is my link color normally when its not hovered over. There is also a CSS for the hover and i think its not working right. It's set to white font but the visited color is overriding the hover or something.

The Link code is this in ssmitems

Code:

linkFontFamily="Verdana";
linkFontColor="#white";
linkFontSize="2";
linkBGColor="white"; <---not on hover
linkOverBGColor="#000066"; <----on hover
linkTarget="_top";
linkAlign="Left";

CSS is as follows:

Code:

A.ssmItems:link{color:#000066;text-decoration:none;}
A.ssmItems:hover{color:#FFFFFF;text-decoration:none;}
A.ssmItems:active{color:#FFFFFF;text-decoration:none;}
A.ssmItems:visited{color:#000066;text-decoration:none;}

You see the visited link color is the same as the link color that way they dont look different in the menu they are always 000066, but when i hover, that link doesnt change to the hover color, it stays the visited color.

**jscheuer1** · 05-24-2005, 04:09 PM

Well, to start out, try reordering your css like:

Code:

A.ssmItems:link{color:#000066;text-decoration:none;}
A.ssmItems:active{color:#FFFFFF;text-decoration:none;}
A.ssmItems:visited{color:#000066;text-decoration:none;}
A.ssmItems:hover{color:#FFFFFF;text-decoration:none;}

as later declarations tend to overide earlier ones. Works here.

I'll have to get back to you on the 'always out' menu but, at least I know what to do.

**chaostheory** · 05-24-2005, 05:06 PM

I decided to just use a diff color that worked, and i think it does look nicer now that im using it. So the "always out" menu is all i need.

Joe

**jscheuer1** · 05-24-2005, 06:12 PM

Yeah, after further testing I discovered that even with the hover css moved to the end of the style block, it only works when the mouse is directly over the link text, as opposed to the link's menu block.

Anyways, always out is going to be a bit more work than I thought because I will have to trace down what hid the menu in the first place and have that not happen. However, an easy alternative is to remove the onclick statements we created along with the moveMenu() function and its variable.

Or, if you are working from a fresh copy of ssm.js, just get rid of the onmouseover and onmouseout statements as before, just not replacing them with anything.

Then at the end of ssmItems.js, right after it says:

Code:

buildMenu();

put this:

Code:

setTimeout("moveOut()",1);

you can increase the 1, if needed to give the menu more time to build before being moved out or just to make a more dramatic entrance. In case you don't know, 1 represents 1/1000th of a second delay. Using zero or no timeout at all produces an error.

**chaostheory** · 05-24-2005, 06:36 PM

Well this is what i started with

Code:

if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;Top : 0 ;Z-Index : 20;" onclick="moveMenu()">')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onclick="moveMenu()">')}

This is what it ended up like

Code:

if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;Top : 0 ;Z-Index : 20;"')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'"')}

Just removed the onlick() handler. I then remove the function you created. And for some reason my menu is all hosed up if i remove those 3 things lol. The picture shows how the menu is all the way down at the bottom and has no formatting on it whatsoever. Did i do that wrong lol?

I just want the damn thing to stay out i was hoping this wasnt a big task, thank you for you help i appreciate it.

**chaostheory** · 05-24-2005, 06:38 PM

Sorry i fixed that problem...realized i took out a > that i wasnt supposed to. Disregard last post. If there is a way to make it start out though, that would be sweet

**jscheuer1** · 05-24-2005, 08:03 PM

OK, got it for 'always out'. Start with a fresh copy of ssm.js and use your ssmItems.js without the timeout call we added. In ssm.js, replace these lines:

Code:

if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}

with these:

Code:

if (IE||NS6) {document.write('<DIV ID="basessm" style="Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : 0 ;Top : 0 ;Z-Index : 20;">')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER name="thessm" bgcolor="'+menuBGColor+'" left="0">')}

That's it.

Added Later:

You should also be able to remove the 'moveOut()', 'moveBack()' and 'moveBack1()' functions entirely.