JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

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 III


Use the mouse pointer to click and drag menu out and in!

Insert into <HEAD>
xz<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">') </script> <layer id="slidemenubar"> <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]="../dynamicindex1/index.html" 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 } var dragapproved=false var x1,x2 if (document.layers) themenu.captureEvents(Event.MOUSEDOWN \| Event.MOUSEUP) function move(e){ if (document.all&&event.button==1&&dragapproved){ if(temp1+event.clientX-x1>leftboundary) themenu.pixelLeft=Math.min(rightboundary,temp1+event.clientX-x1) else themenu.pixelLeft=Math.max(leftboundary,temp1+event.clientX-x1) } else if (document.layers){ if(themenu.left+e.x-x2>leftboundary) themenu.left=Math.min(rightboundary+2,themenu.left+e.x-x2) else themenu.left=Math.max(leftboundary-2,themenu.left+e.x-x2) } } function drags(e){ if (document.all){ dragapproved=true temp1=themenu.pixelLeft x1=event.clientX document.onmousemove=move } else{ themenu.captureEvents(Event.MOUSEMOVE) x2=e.x } } function stopit(){ if (document.all){ dragapproved=false } if (document.layers) themenu.releaseEvents(Event.MOUSEMOVE) } if (document.all){ document.all.slidemenubar2.onmousedown=drags document.all.slidemenubar2.onmouseup=new Function("dragapproved=false") document.onselectstart=new Function("return false") } else if (document.layers){ themenu.onmousedown=drags themenu.onmousemove=move themenu.onmouseup=stopit } </script>

Other Options
Configuring the menu 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.