Today is . Page created 01/12/03, updated 05/11/06
Slide-In Menu |
T his is a cool menu bar that automatically slides open from the left edge of the screen as you move the mouse over it. Moving the mouse out will cause it the bar to slide back in. Just take your "Cursor" and touch the "Pink Line" on the left side of your screen.".....Browsers other that Netscape 4+ and IE 4+ will see nothing...." *
* Partial quote from script site
W e have tested the code in IE5.5, IE6, Netscape4.08 and Netscape7.0, Netscape8.1, Firefox1.5.0.2, Opera8.54, and AOL Explorer1.2. This script worked well in all platforms tested with one variation observed in Netscape7.0, Opera8.54, Netscape8.1 and Firefox1.5.0.2.
- 1) You can see the slide in menu in the proper position on the page except in Opera8.54 where a line will appear but no menu.
- 2) When you place your cursor on it to activate the desired effect.......
- 3) It Does Not Work!
- 4) Other than seeing the non-functioning menu, you will not get any error messages.
- 5) In other words, it only works in IE and AOL Explorer1.2.
I f you like this menu effect, we also have an updated version that stays in view even as you scroll down the page. To see that menu effect, follow the below link.
[ Slide-In Menu II ]
D epending on your knowledge of HTML and Java scripts this one is highly configurative with many options you can change. It is also a 2 part code that gets "pasted" in both the <HEAD> and <BODY> section of your document. You can add or delete as many links as you want. It is expandable to your needs.
O n the slide-out menu itself, you have the options to reconfigure the colors of the slide-in itself, border size, color, pixels etc. Those are the only reconfgurations you do on the code that goes into the <HEAD> section of your document.
For your Information: If you change the color of the "Border" be sure to keep the word "solid" in front of the color of your border. The color of our border is "solid pink".
I n the <BODY> section there are two reconfigurations you need to make. The first is the name of your link(s). Finally you need to substitute the default URL's that come with the code to your URL's.
B elow is where you make your reconfigurations within the <HEAD> section. These are basically cosmetic and positioning. This you need to experiment with until you have it to suit your page.
<style>
#slidemenubar, #slidemenubar2{
position:absolute;
left:-154px;
width:160px;
top:170px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>
Our <HEAD> Section Reconfigurations
<style>
>!--
#slidemenubar, #slidemenubar2{
position:absolute;
left:-155px;
width:160px;
top:170px;
border:2.00px solid pink;
background-color:black;
layer-background-color:black;
font:bold 12px Georgia;
line-height:20px;
}
-->
</style>
B elow Are The Reconfigurations To Be made in the <BODY> sections of the code
var sitems=new Array()
var sitemlinks=new Array()
//extend or shorten this list
sitems[0]="Link Name Here"
sitems[1]="Link Name Here"
sitems[2]="Link Name Here"
sitems[3]="Link Name Here"
sitems[4]="Link Name Here"
sitems[5]="Link Name Here"
sitems[6]="Link Name Here"
B elow is where you add or subtract as many URL's (addresses) as you need.
//These are the links pertaining to the above text.
sitemlinks[0]="Add Your Link URL Here"
sitemlinks[1]="Add Your Link URL Here"
sitemlinks[2]="Add Your Link URL Here"
sitemlinks[3]="Add Your Link URL Here"
sitemlinks[4]="Add Your Link URL Here"
sitemlinks[5]="Add Your Link URL Here"
sitemlinks[6]="Add Your Link URL Here"
Note Of Importance: The above two reconfigurations are pretty well self explanitory and straight fowward. Just be sure that the top set of names and numbers match the bottom set of links and numbers.
W
e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]
[ Rate This Page ]
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy
sharing your knowledge with others on web design, join The
Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-