Glide-In Menu~ interactive ~ Select icon for gliding process to begin ~ Tested in IE5.5, IE6.0, Netscape7.02,Opera7.54 and Firefox0.9.1

C lick on the icon at the top right side of the screen to start the gliding action. The menu will glide onto the page and the "selector" box with the same icon will slide off the page. Click on the icon again, and the action reverses. The script can be set so that the menu shows on start-up, or the selector box does.

W hen an icon is clicked, this script glides in a menu from screen-left. Clicking on the same icon in the menu causes it to slide off the screen, with the triggering icon sliding back in. The script can be set to have either the trigger icon or the menu show on start-up; and the menu and trigger icon positions can be set via script variables. An easy install, and a cool effect.

I f you notice, we have this page set up so there is basically nothing on the right side of the page partially down the page. This is done with the use of <tables>, which we will show you where and howto further down on the page. We did this for cosmetic reasons so the Glide-In Menu effect would appear more prevalent or dominant on the page. One other reason for the use of <tables> is because this menu effect is "Static" or will cover anything on the page where it is visible.

W e have tested the code in IE5.5, IE6.0, Firefox0.9.1, Opera7.54 and Netscape7.02. This script worked well in all platforms with no variations observed.

T his script is actually fairly easy to install and set up, but the simplest way to present it is in a full-page working demo. Copy and paste the code as a complete HTML document into a blank page. Follow the instructions commented into the script.

I f you do not want to copy and paste the entire code as a complete HTML document, then..........

D epending on your knowledge of HTML and javascript, this is a moderately easy (2) part copy and paste code, uploading of an image* and reconfigurations in both the <HEAD> and <BODY> sections along with a few extras we will also show you howto.

* This image (default) needs to be uploaded into your directory so it will appear. Or you can use an image of your choice. If this be the case, be sure to reflect the change in that part of the code (two places) located in the <BODY> section. See the below example:

//-->

<div id="menuSelect">
<a href="#" onClick="moveOnMenu();moveOffSelector()">
<img src="icon.gif" width="28" height="28" border="0"></a>
</div>
<div id="menuShow">
<a href="#" onClick="moveOffMenu();moveOnSelector()">
<img src="icon.gif" width="28" height="28" border="0"></a>
<br>
<br>

<HEAD> Section Reconfigurations

S et up the below border, background-color, padding, and font elements as needed. Leave the position as is. Width and height can be set as auto, or you can specify these in pixels. The first or top part of the below is for the menu itself while the bottom part is for the button that when selected will call for the menu to appear.

<BODY> Section Reconfigurations

The first part of this section that needs reconfigurations is the <BODY> tag itself. It is not a complete tag. It lacks text color, and link colors. See the below examplea:

Default <BODY> Tag

Reconfigured <BODY> Tag

T he next part of the code we will cover are the links on the menu itself. This section is located just below the image(s) you need to upload for them to be seen.

Y ou can add or subtract as many links as you need. Just add them as needed before the above </div> tag Remember: The more links the longer on the page the menu will be. You can also add the <br> tags where you want to break the links up. And to answer then next question, the answer is "Yes, you can have the links open in a new brwoser window as opposed to opening in the same window and losing the page this menu is on. Just add the attribute of target="_blank" into the URL path. See the below example of howto:

A ll the links in our glide-in menu have been configured to open in a new window so you will not lose this page.

T he next thing we shall cover is the positioning of the little icon and the glide-in menu itself.

// Set Show to "yes" to show the menu on start-up.
// Set Show to "no" to show the selector on start-up.

Show ="yes";

The above is for what you see when the page opens. Either the little icon or the menu itself. This setting (default) is for the munu to appear on opage opening. If you change it to "no", the little icon like we have will appear on page opening.

// Set OffX in pixels to a negative number
// somewhat larger than the width of the menu.

var OffX = -150;

The above is used for the purpose of how wide your menu is and how deep inside (hidden) the menu will be prior to being visible. If it is not set to a large enough negative (-) number, the menu will be partially visible when it should be hidden. See the below link for an example of a misconfigured negative number
[ Incorrect Negative Configuration ]

// Set the PosX and PosY variables
// to the location on the screen where the
// menu should position (in pixels) when stopped.

var PosX = 250;
var PosY = 100;

The above settings you need to play around with until they position the menu and selector icon where you want them to appear. We have ours set as:

var PosX = 550;
var PosY = 40;

X denotes how far from the left side and Y denotes how far from the top of the page.

// Usually, use the settings shown; but you can
// change the speed and the increment of motion
// across the screen, below.

var speed = 1;
var increment = 1;
var incrementNS4 = 5; // for slower NS4 browsers

// do not edit below this line
// ===========================

T he last thing we shall cover is howto make part of the right side of the page (top few paragraphs) blank and have the text located on the left side so the Glide-In Menu is completely visible and not hopefully covering anything. This is done by placing a table around the first few paragraphs on your page so when the menu appears, it will glide out from the left and position itself in the blank area on the right side of your page. See the below example:

Place the first few paragraphs of your page here.
Make sure it is enough space so when the menu is visible,
it does not cover anything!

</tr></td>
</table>

Definitions of above color coded sections of table. These are the parts of the table you can reconfigure to cosmetically fit your site.

<div align="left"> This needs to stay as-is. This denotes that the table will now be situated on the left side of the page.
table bgcolor="#000000" border="0" These two work hand in hand. The table bgcolor color is the border color when the border is set for 1 or higher. If the border is set for 0, this color becomes moot and is not seen.

table bgcolor="#ba55dc" border="1"
width="60%" This attribute is the one you need to pay particular attention to. This sets the width of the table itself. Notice after the number we have a % as opposed to a the size set in pixels with just the number.
Reason: By using a % and not a pixel size, (width="500") whatever screen size views this, it will be in relation to the screen size and not a set pixel size.
td bgcolor="#000000" This denotes the color of the inside of the table itself.

td bgcolor="#ffffff" this denotes the color "White"
align="left" This positions whatever is inside the table to the left side of the table. You can leave it as is or change it to either center or right. This will not change the position of the table itself, just the information inside the table. This is personal choice.

I f you would like to add this effect into your pages, either grab the below link or select the link in the Glide-In Menu and you are there. If you have any problems with this, feel free to contact us.
[ Get Code Here ]