Metachecker.net
|
FontsMadeEasy.com
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
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.