Slide-in menu on mouseover always visible even when scrolling page. Tested in IE5.5 IE6.0 Netscape4.08 and Netscape7.0

I f you liked our original slide-in menu, you will really appreciate this updated version. This one has the ability to always be visible, even when scrolling as opposed to the original that would scroll out of site. It also has the ability to add graphics into the menu which we feel is a very nice touch.
[ Original Slide-In Menu ]

J ust take your cursor and touch the "Side Menu" on the left and watch it slide out.

W e have tested the code in IE5.5, IE6, Netscape4.08 and Netscape7.0. This script worked well in all platforms tested with no variations observed.

S lide-in menu will satisfy even the most demanding webmasters. Among it's long list of features are:

Ability to statically position menu on page, both x and y axis (as in demo), or simply inline.
Support for loading link(s) in another frame or window.
Support for multiple columns within each row.
Fully customizable colors, dimensions etc.
Script is cross browser functional (including NS6).

D epending on your knowledge of HTML and java scripts, this is not that difficult an effect to achieve. You must first upload two .js** files into the same directory as this menu will be. Then you will add a portion of code into the <HEAD> section of your document. This part of the code calls the two uploaded .js files and causes the script to work.
**    These two files are on the script site in "Zip" format. If you need a little assistance with "Zip" files, grab the below link.
[ All About Zip Files ]

O nce you have uploaded the two .js files (ssm.js and ssmItems.js), the reconfigurations begin.

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

I f you do not understand the theory behind "Opening Up" an uploaded .js file, it is quite simple. As you are viewing your web shell within your editor, you will see all your uploaded files.
Select the ssmItems.js file and then select to "Edit", Not view it. Once you are looking at the opened file, you will see the reconfigurations. Below we will show you where to make the reconfigurations.
Top Part Of Code

This part is for the cosmetics. This is to reconfigure the color scheme and size on the slide in menu.


</STYLE>

       {color:black;text-decoration:none;}
       {color:black;text-decoration:none;}
       {color:black;text-decoration:none;}
       {color:black;text-decoration:none;}

T he color coded word "black" can be replaced with either a different color word or with the use of a HEX code. Keep in mind that if you use a HEX code, be sure to precede the 6 digit code with the prefix character of # with No Quotes!! So what we would have is as shown in the below example.

<STYLE>

</STYLE>

       {color:#000000;text-decoration:none;}
       {color:#000000;text-decoration:none;}
       {color:#000000;text-decoration:none;}
       {color:#000000;text-decoration:none;}

N ow lets get into the different links and targets we can reconfigure within the confines of the external ssmItems.js file.
Bottom Part Of Code

This part is to configure your links, targets and headings

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

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

ssmItems[1]=["Link Name Here", "Link Address Here", ""]

ssmItems[2]=["Link Name Here", "Link Address Here",""]

ssmItems[3]=["Link Name Here", "Link Address Here", ""]

Y ou can notice in the above partial reconfigurations of links and targets that there are "" after the link address. If you leave that as is, the link, when activated will target the same browser window. With this in mind, remember if you want to keep your guests on the main navigation page with this menu effect, you should have the link targeted to a new window. The you would add the attribute in between the "" of either "_new" or "_blank" to define the link to open in a new browser window. See the below for further clarification.

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

ssmItems[1]=["Link Name Here", "Link Address Here", "_new"]

ssmItems[2]=["Link Name Here", "Link Address Here","_blank"]

T he one other thing you need to bear in mind is that of the numerical sequence. If you want to add more than the default number of links, or categories, they all must follow the numbered sequence. A perfect example would be by viewing our example, at the bottom we have added the little statement of "Always Visible!". We did this by using the part of the code to create another new header or more appropriately footer by placing it under the last default entry which was number [12] and numbered it accordingly.

ssmItems[13]=["Always Visible!"] //create header

Note Of Importance!

O n a final note of importance concerning the URL this menu will be on.
Under no circumstances place a back/forward slash / after the page address this menu effect will be on or in a link to the page you place this menu. If you do, the slide-in menu will stop functioning and you will get an error on the page (In IE) and wonder why. To clarify this very simply, the address of this page is:

Correct Address
https://www.angelfire.com/ny5/consigliere/slideinmenu2.html

Do Not! make the mistake of adding the back/forward slash into the address as below.

Incorrect Address
https://www.angelfire.com/ny5/consigliere/slideinmenu2.html/

I f you would follow both of the below links, you will see what we are explaining about the back/forward slash. Both links will open in a new window so you do not lose this page.
[ Correct Way To Write Link ]
[ Incorrect Way To Write Link ]

Slide-In MenuAlways Visible

Slide-In Menu
Always Visible