A Slacker's Guide to DHTML: Keyboard Controlled Slide In Menu

DHTML SCRIPTS

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

KB-Controlled slide In Nav Menu

Instructions: To bust it out hit "x", to close it hit "z", otherwise, look down.

This goes in the HEAD of your document.

Select All & Copy

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

Select All & Copy

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

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

function showtip(nulling){
if (ie4){
if (nulling==0&&slidemenubar2.style.pixelLeft==-150)
slidemenubar2.title='Press "x" to expand the menu, "z" to contract it'
else
slidemenubar2.title=''
}
else if (ns6){
if (nulling==0&&parseInt(document.getElementById("slidemenubar2").style.left)==-150)
document.getElementById("slidemenubar2").title='Press "x" to expand the menu, "z" to contract it'
else
document.getElementById("slidemenubar2").title=''
}
else if (ns4){
if (nulling==0&&!window.pullit)
window.status='Press "x" to expand the menu, "z" to contract it'
else
window.status=''
}
}
if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:-150" onMouseover="showtip(0)" onMouseout="showtip(1)">')
else
document.write('<layer id="slidemenubar" onMouseover="showtip(0)" onMouseout="showtip(1)">')

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 (document.layers)
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
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",50)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",50)
}
function pullengine(){
if (ie4&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5
else if (ns6&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+5
else if(ns4&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (ie4&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if (ns6&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-5
else if(ns4&&themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}

if (ns4)
document.captureEvents(Event.KEYPRESS)
function menuengine(e){
if (ns4||ns6){
if (e.which==120)
pull()
if (e.which==122)
draw()
}
else if (ie4){
if (event.keyCode==120)
pull()
if (event.keyCode==122)
draw()
}
}
document.onkeypress=menuengine
</script>

All of these things can be changed:

top
border
background-color
layer-background-color
font:bold
line-height

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/kbcontrollednavmenu.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.