A Slacker's Guide to DHTML: Manual Pull Out Nav Menu

DHTML SCRIPTS

Menu/Navigation
Special Effects
Images
Forms
Text/Announcements
Windows/Pop-ups
Clocks/Countdowns
Miscellaneous

Manual Pull Out Nav Menu

Instructions:

This goes in the HEAD of your document.

Select All & Copy

This goes in the BODY of your document, right after the BODY tag.

Select All & Copy

/*
Sliding Menu Bar Script 3- © Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, and TOS
Visit http://dynamicdrive.com
*/

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:-150">')
else
document.write('<layer id="slidemenubar">')

var sitems=new Array()
var sitemlinks=new Array()

///////////Edit below/////////////////////////////////

//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"

//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""

/////////////////////////////////////////////////////////

for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+' target="'+target+'">'+sitems[i]+'</a><br>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
document.write('</layer>')
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
var dragapproved=false
var x1,x2
if (ns4)
themenu.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)

function move(e){
if (ie4&&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 (ns6&&dragapproved){
if(parseInt(themenu.left)+e.clientX-x2>leftboundary)
themenu.left=Math.min(rightboundary+2,temp1+e.clientX-x2)
else
themenu.left=Math.max(leftboundary-2,temp1+e.clientX-x2)
}

else if (ns4){
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 (ie4){
dragapproved=true
temp1=themenu.pixelLeft
x1=event.clientX
document.onmousemove=move
}
else if (ns6){
dragapproved=true
temp1=parseInt(themenu.left)
x2=e.clientX
document.getElementById("slidemenubar2").onmousemove=move
}
else{
themenu.captureEvents(Event.MOUSEMOVE)
x2=e.x
}
}

function stopit(){
if (ie4||ns6){
dragapproved=false
}
if (ns4)
themenu.releaseEvents(Event.MOUSEMOVE)
}

if (ie4){
document.all.slidemenubar2.onmousedown=drags
document.all.slidemenubar2.onmouseup=new Function("dragapproved=false")
document.onselectstart=new Function("return false")
}
else if (ns6){
document.getElementById("slidemenubar2").onmousedown=drags
document.getElementById("slidemenubar2").onmouseup=new Function("dragapproved=false")
}
else if (ns4){
themenu.onmousedown=drags
themenu.onmousemove=move
themenu.onmouseup=stopit
}

</script>

So now what?

To change the contents of the menu to your own, edit the text inside variables sitems[ ] and sitemlinks[ ] in the code of Step 2. You may now also specify a target for the links, if you wish them to be loaded in a new window or frame. 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.

Home - Sitemap
Complete HTML Guide - Free Downloads for Webmasters - Tips & Tricks - Tag Reference
Style Sheets Tutorial - JavaScript Library - Dynamic HTML Script Library - XHTML Primer

dhtml/autopullnavmenu.html

BIGGER ARCHIVES
MORE INFO
Everything I am not

http://www.dynamicdrive.com
http://www.dhtmlzone.com
http://www.dhtmlshock.com

Just about every Dynamic HTML script on this site is ©opyright Dynamicdrive.com, DHTML Zone, DHTML Shock, or the person whose name appears in the credits to the script. Let it be known that I wrote NONE of them.