Configuration may be hard if you want changes to the dimensions of some of the items, ask if you need help:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
border:1.5px solid black;
background-color:palegreen;
layer-background-color:palegreen;
font:bold 12px Verdana;
line-height:20px;
}
#menu {
background-color:#F2F2F2;
width:171px;
padding:0 5px;
}
-->
</style>
</head>
<body>
<script language="JavaScript1.2">
/***********************************************
* Sliding Menu Bar Script- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
***********************************************/
var slidemenu_width='200px' //specify width of menu (in pixels)
var slidemenu_reveal='20px' //specify amount that menu should protrude initially
var slidemenu_top='170px' //specify vertical offset of menu on page
var ns4=document.layers?1:0
var ie4=document.all
var ns6=document.getElementById&&!document.all?1:0
if (ie4||ns6){
var topA=document.body.filters?1 :2;
document.write('<div id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+';">')
document.write('<div id="control" title="Click to Open" style="font-family:cursive;cursor:pointer;text-align:center;position:absolute;right:-5px;top:-'+topA+'px;width:23px;border-left:1px solid black;" onclick="pull(this);"><div></div><div style="line-height:85%;position:relative;top:'+(5-topA*topA)+'px;">O <br>P <br>E <br>N </div></div><div id="menu">')
}
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' onMouseover="pull()" onMouseout="draw()" visibility=hide>')
}
var sitems=new Array()
///////////Edit below/////////////////////////////////
//siteitems[x]=["Item Text", "Optional URL associated with text"]
sitems[0]=["<big><font face='Arial'>Site Menu</font></big>", ""]
sitems[1]=["Menus And Navigation", "http://www.dynamicdrive.com/dynamicindex1/"]
sitems[2]=["Document Effects", "http://www.dynamicdrive.com/dynamicindex3/"]
sitems[3]=["Scrollers", "http://www.dynamicdrive.com/dynamicindex2/"]
sitems[4]=["Image Effects", "http://www.dynamicdrive.com/dynamicindex4/"]
sitems[5]=["Links And Buttons", "http://www.dynamicdrive.com/dynamicindex5/"]
sitems[6]=["Dynamic Clocks & Dates", "http://www.dynamicdrive.com/dynamicindex6/"]
sitems[7]=["Text Animations", "http://www.dynamicdrive.com/dynamicindex10/"]
sitems[8]=["Browser Window", "http://www.dynamicdrive.com/dynamicindex8/"]
sitems[9]=["User System Information", "http://www.dynamicdrive.com/dynamicindex9/"]
sitems[10]=["Other", "http://www.dynamicdrive.com/dynamicindex11/"]
//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""
/////////////////////////////////////////////////////////
if (ie4||ns4||ns6){
for (i=0;i<sitems.length;i++){
if (sitems[i][1])
document.write('<a href="'+sitems[i][1]+'" target="'+target+'">')
document.write(sitems[i][0])
if (sitems[i][1])
document.write('</a>')
document.write('<br>\n')
}
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}
window.onload=regenerate2
rightboundary=0
leftboundary=(parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1
if (ie4||ns6){
document.write('</div></div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
document.getElementById('control').style.height=document.getElementById("slidemenubar2").offsetHeight+'px'
document.getElementById('control').firstChild.style.height=document.getElementById("slidemenubar2").offsetHeight/2-document.getElementById('control').firstChild.nextSibling.offsetHeight/2+'px'
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}
function pull(obj){
obj.firstChild.nextSibling.innerHTML='C <br>L <br>O <br>S <br>E '
obj.firstChild.nextSibling.style.top=(2-topA*topA)+'px'
obj.title="Click to Close"
obj.onclick=new Function('draw(this)')
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(obj){
obj.firstChild.nextSibling.innerHTML='O <br>P <br>E <br>N '
obj.firstChild.nextSibling.style.top=(5-topA*topA)+'px'
obj.title="Click to Open"
obj.onclick=new Function('pull(this)')
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10+"px"
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}
function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10+"px"
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}
</script>
</body>
</html>
Regular Coders
Need help with Slide-In Menu Bar
Originally Posted by emanuelle
Posting Permissions
Reply With Quote
Bookmarks