JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Slide-In Menu Bar I

A cool menu bar that automatically slides open from the left edge of the screen as the surfer moves the mouse over it. Moving the mouse out will cause it the bar to slide back in. Browsers other than NS 4+ and IE 4+ will simply see nothing.


Insert into <HEAD>
<style> <!-- #slidemenubar, #slidemenubar2{ position:absolute; left:-155px; width:160px; top:170px; border:1.5px solid green; background-color:lightyellow; layer-background-color:lightyellow; font:bold 12px Verdana; line-height:20px; } --> </style>

Insert into <BODY>
<script language="JavaScript1.2"> if (document.all) document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">') </script> <layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()"> <script language="JavaScript1.2"> var sitems=new Array() var sitemlinks=new Array() //extend or shorten this list sitems[0]="Home" sitems[1]="Take our survey!" sitems[2]="Menus And Navigation" sitems[3]="Document Effects" sitems[4]="Scrollers" sitems[5]="Image Effects" sitems[6]="Links And Buttons" sitems[7]="Dynamic Clocks & Dates" sitems[8]="Text Animations" sitems[9]="Browser Window" sitems[10]="User System Information" sitems[11]="Cascading Style Sheets" sitems[12]="Other" //These are the links pertaining to the above text. sitemlinks[0]="../test.htm" sitemlinks[1]=".." sitemlinks[2]="/index.htm" sitemlinks[3]="../dynamicindex3/index.html" sitemlinks[4]="../dynamicindex2/index.html" sitemlinks[5]="../dynamicindex4/index.html" sitemlinks[6]="../dynamicindex5/index.html" sitemlinks[7]="../dynamicindex6/index.html" sitemlinks[8]="../dynamicindex10/index.html" sitemlinks[9]="../dynamicindex8/index.html" sitemlinks[10]="../dynamicindex9/index.html" sitemlinks[11]="../dynamicindex7/index.html" sitemlinks[12]="../dynamicindex11/index.html" for (i=0;i<=sitems.length-1;i++) document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>') </script> </layer> <script language="JavaScript1.2"> function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate",400) } window.onload=regenerate2 if (document.all){ document.write('</div>') themenu=document.all.slidemenubar2.style rightboundary=0 leftboundary=-150 } else{ themenu=document.layers.slidemenubar rightboundary=150 leftboundary=10 } function pull(){ if (window.drawit) clearInterval(drawit) pullit=setInterval("pullengine()",50) } function draw(){ clearInterval(pullit) drawit=setInterval("drawengine()",50) } function pullengine(){ if (document.all&&themenu.pixelLeft<rightboundary) themenu.pixelLeft+=5 else if(document.layers&&themenu.left<rightboundary) themenu.left+=5 else if (window.pullit) clearInterval(pullit) } function drawengine(){ if (document.all&&themenu.pixelLeft>leftboundary) themenu.pixelLeft-=5 else if(document.layers&&themenu.left>leftboundary) themenu.left-=5 else if (window.drawit) clearInterval(drawit) } </script>

Other Options
To change the contents of the menu to your own, edit the text inside variables sitems[] and sitemlinks[] in the code of Step 2. To change the appearance of the menu, edit the code in Step 1. Below lists the part you can edit: top:170px; border:1.5px solid green; background-color:lightyellow; layer-background-color:lightyellow; font:bold 12px Verdana; line-height:20px; The first line determines the vertical offset of the menu (adjust 170px to any pixel desired). The second line determines the appearance of the border that surrounds the menu (change 1.5px and green as desired). The third and fourth line effects the background color of the menu. The fifth line determines the font of the menu (change 12px and Verdana as desired). The last line deterines the spacing between each line of text in the menu