Dynamic-FX Slide-In Menu

[7236]

Script: Dynamic-FX Slide-In Menu (v 6.5)
Link: http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm

Hi i have 4 questions..

1. you see where it says "side menu" in the preview?
i would like to place an image up there instead like it is shown here.. http://s8.invisionfree.com/Mobius_X/ how would i be able to do this.

2. I would like to have a background image for the menu when it is expanded.. is there any way to add this?

3. How do i edit the code so that i dont see the black lines between each link?

4. Is there any way to reduce the size of the "side menu" bar so that it is thiner?

to see a working example of what i am talking about you can go here: http://s8.invisionfree.com/Mobius_X/

Please get back to me on this.

Thanx in advance for your time and consideration of my inquiry.

[jscheuer1]

All configurations to the menu are done inside "ssmItems.js". Open the file up using any text editor to edit the menu's style, and the displayed links.

The only really tricky part is when you go to replace the vertical text with a graphic, make sure you use an image tag with all caps, ex:

<IMG src="whatever.gif">

not:

<img src="whatever.gif">

[7236]

Thanx for your reply, however i have another question.. you see the white boxes where it displays the name of the links? how can i make those colors transparent? the reason i want to make those transparent is because i change my skin frequently.. and as tricky as this code is to set up, i want it to be able to go with every skin i decide to use. i tried puting in "transparent" where it had the quotes for the hex colors but it just turned green.. so i just want the links to show.. and if that wont work, i can always use clear or transparent images as backgrounds for the link backgrounds..

[jscheuer1]

Well, there are a number of background colors used in the configuration for various parts of the menu, all with 'BGColor' preceded by 'menu', 'hdr', 'link', 'linkOver' and 'bar'. Making one transparent allows whatever is beneath it to show through but, doesn't prevent another from being seen on top. Also, if you misspell the word 'transparent', the most likely resulting color is green. The main one is the 'menuBGColor'. Play around with them until you get what you want. I'd first try setting both:

menuBGColor="transparent";

and:

linkBGColor="transparent";

That should get you headed in the right direction.

[7236]

i tried entering transparent in the areas that you mentioned.. but it still came out green.. and didnt mispell anything.. is there anyway i can use a clear image as a replacement for the colors? I really appreciate your help..

[jscheuer1]

Did you change the default style:

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

or have any other style on your page for 'a' or 'A'? Or, have any other style on your page from which this green color could be coming from? A transparent image will, most likely, have the same result as a transparent background.

[7236]

no.. is that the setting i would have to change to get the effect i want?

and i tried adding an image to the outside of the menu.. by entering the exact html of the image i want to use in the area specified in the code..

what am i supposed to put here? i have tried everything from the actual html tag for the image, to puting the actual link up there and nothing worked.. this is the image i want to use.. where in the code am i supposed to put this so that it shows up on the outside instead of the vertical text? what am i doing wrong? thanx for your help..

barText="TCZ Navigator"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header

[jscheuer1]

The only really tricky part is when you go to replace the vertical text with a graphic, make sure you use an image tag with all caps, ex:

<IMG src="whatever.gif">

not:

<img src="whatever.gif">

. . . .

[7236]

ok here is my ssmItems.js.. the image tag for the image is in there but it does not show the image.. on the menu.. i did everything that you suggested and so far, the image thing is the only thing that isnt working..

<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items

colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for

after the mouse goes off it.
menuBGColor="fefefe";
menuIsStatic="yes"; //this sets whether menu should stay static on the

screen
menuWidth=130; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="Century Gothic";
hdrFontSize="2";
hdrFontColor="3F86FD";
hdrBGColor="#dddddd";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="8";
linkFontFamily="Century Gothic";
linkFontSize="2";
linkBGColor="fefefe";
linkOverBGColor="#efefef";
linkTarget="_top";
linkAlign="Left";
barBGColor="#efefef";
barFontFamily="Century Gothic";
barFontSize="2";
barFontColor="66ccff";
barVAlign="Center";
barWidth=8; // no quotes!!
barText="TCZ Navigator"; //<IMG

src="http://img301.echo.cx/img301/9779/click7qo.gif"></IMG>



// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and

'target' blank to make a header
ssmItems[0]=["Shortcutz"] //create header
ssmItems[1]=["Rulez",

"http://blackangel7236.proboards36.com/index.cgi?board=rules&actio

n=display&thread=1097541940", ""]
ssmItems[2]=["TCZ Updates",

"http://blackangel7236.proboards36.com/index.cgi?board=Changes&a

ction=display&thread=1097708337",""]
ssmItems[3]=["Community Services",

"http://blackangel7236.proboards36.com/index.cgi#Rules", ""]
ssmItems[4]=["The Lounge",

"http://blackangel7236.proboards36.com/index.cgi#chill", ""]
ssmItems[5]=["Hobbiez",

"http://blackangel7236.proboards36.com/index.cgi#anything", ""]
ssmItems[6]=["Gamer Chat",

"http://blackangel7236.proboards36.com/index.cgi#arcade", ""]
ssmItems[7]=["Gamez & Moviez",

"http://blackangel7236.proboards36.com/index.cgi#gamez", ""]
ssmItems[8]=["Administration Area",

"http://blackangel7236.proboards36.com/index.cgi#vault", ""]
ssmItems[9]=["Twyn Peaks Login",

"http://blackangel7236.proboards36.com/index.cgi?board=Confidentia

l", ""]
ssmItems[10]=["Other Linx", "", ""] //create header
ssmItems[11]=["About The Owner",

"http://www.freewebtown.com/7236/index.html", ""]
ssmItems[12]=["A Closer Look", "http://7236.blogspot.com/", ""]
ssmItems[13]=["Twyn Peaks Intro",

"http://www.freewebtown.com/7236/New_Twyn_Peaks_Intro.swf", ""]

buildMenu();

//-->

here is what it looks like.. http://blackangel7236.proboards36.com/index.cgi? on the left hand side of the screen.. thank you for your help.. i really appreciate it.

[jscheuer1]

I'm not going to vouch for the rest of the code but:

barText="TCZ Navigator"; //<IMG

src="http://img301.echo.cx/img301/9779/click7qo.gif"></IMG>

should be:

barText='<IMG src="http://img301.echo.cx/img301/9779/click7qo.gif">'

For your information the image tag is one that never uses a closing tag and, in javascript, when you see two upslashes (//) on a line not enclosed with quotes, it means that everything after that on that line is a comment.