CSS Codes
CSS Layouts

<html>
<head>
<style>
<!--

#slidemenubar, #slidemenubar2{
cursor:hand;
position:absolute;
left:-152px;
width:160px;
top:170px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>
</head>

<body>
<script language="JavaScript1.2">

/***********************************************
* Sliding Menu Bar Script 3- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var slidemenu_width='160px' //specify width of menu (in pixels)
var slidemenu_reveal='12px' //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)
document.write('<div id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+'; cursor:pointer;cursor:hand">')
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+' 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>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}


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

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=parseInt(themenu.left)
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>
</body>
</html>