Well, I agree with simonf about the individual items each being a slide out, unless there is something on their 'always visible' portion that gives at least a clue as to what they are. Also, using images is never a good idea if styled text can be made to do. However, I am in the midst of learning this OOP stuff, which is one way of making scripts work more than once on a page. So, it is in that spirit that I have come up with the following mod of this script.
You will notice that the main script now goes in the head of the page and is still where you define your arrays. But, there is a small script that goes in the body to define each slide menu's array used, width, etc. There were a few bugs in the original script that I've also ironed out. The vibrating menu in Mozilla and the menu that disappears when the mouse leaves the browser headed left in IE both are fixed to my satisfaction for the time being:
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>
<!--
.slidemenu {
position:absolute;
border:1px solid black;
background-color:#F2F2F2;
font:bold 12px Verdana;
line-height:20px;
padding:3px;
}
-->
</style>
<script type="text/javascript">
/***********************************************
* Sliding Menu Bars Script- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
* Modified for Multiple Use and minor bug fixes by jscheuer1 in
* http://www.dynamicdrive.com/forums 3/30/2006
***********************************************/
///////////Edit below/////////////////////////////////
var sitems=new Array()
//siteitems[x]=['Item Text', 'Optional URL associated with text']
sitems[0]=['<span style="padding-left:33px;color:red;font:bold 150% arial">Site Menu</span>', '']
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/']
var sitems2=new Array()
//siteitems[x]=['Item Text', 'Optional URL associated with text']
sitems2[0]=['<span style="padding-left:28px;color:red;font:bold 150% arial">Links</span>', '']
sitems2[1]=['JavaScriptKit', 'http://www.javascriptkit.com/']
sitems2[2]=['CodingForums', 'http://www.codingforums.com/']
sitems2[3]=['Google', 'http://www.google.com/']
//////////////////////////Stop Editing///////////////////
var slidemenus=new Array();
var ns4=document.layers?1:0
var ie4=document.all
var ns6=document.getElementById&&!document.all?1:0
function slidemenu(sitemsar, slidemenu_width, slidemenu_reveal, slidemenu_top, target) {
if (!ie4&&!ns6)
return;
this.target=typeof target!=='undefined'? target : ''
this.slidemenu_array=sitemsar
this.slidemenu_width=slidemenu_width
this.slidemenu_reveal=slidemenu_reveal
this.slidemenu_top=slidemenu_top
this.slidemenuId=slidemenus.length
this.rightboundary=0
this.leftboundary=(slidemenu_width-slidemenu_reveal)*-1
slidemenus[slidemenus.length]=this
document.write('<div class="slidemenu" id="slidebar'+this.slidemenuId+'" style="left:'+[(this.slidemenu_width-this.slidemenu_reveal)*-1]+'px; top:'+slidemenu_top+'px; width:'+slidemenu_width+'px" onMouseover="pull('+this.slidemenuId+')" onMouseout="draw('+this.slidemenuId+')">')
for (var i=0;i<this.slidemenu_array.length;i++){
if (this.slidemenu_array[i][1]!=='')
document.write('<a href="'+this.slidemenu_array[i][1]+'" target="'+this.target+'">')
document.write(this.slidemenu_array[i][0])
if (this.slidemenu_array[i][1]!=='')
document.write('</a>')
document.write('<br>\n')
}
document.write('</div>')
this.themenu=(ns6)? document.getElementById("slidebar"+this.slidemenuId).style : document.all["slidebar"+this.slidemenuId].style
}
function pull(id){
if (window.event)
for (var i_tem = 0; i_tem < slidemenus.length; i_tem++)
if (i_tem!=id)
draw(i_tem)
var obj=slidemenus[id]
if (obj.drawit)
clearInterval(obj.drawit)
if (obj.pullit)
clearInterval(obj.pullit)
obj.pullit=setInterval("pullengine("+id+")",10)
}
function draw(id){
if(window.event&&window.event.clientX<2)
return;
var obj=slidemenus[id]
clearInterval(obj.pullit)
if (obj.drawit)
clearInterval(obj.drawit)
obj.drawit=setInterval("drawengine("+id+")",10)
}
function pullengine(id){
var obj=slidemenus[id]
if (parseInt(obj.themenu.left)<obj.rightboundary-10)
obj.themenu.left=parseInt(obj.themenu.left)+10+"px"
else if (obj.pullit){
obj.themenu.left=0
clearInterval(obj.pullit)
}
}
function drawengine(id){
var obj=slidemenus[id]
if (parseInt(obj.themenu.left)>obj.leftboundary+10)
obj.themenu.left=parseInt(obj.themenu.left)-10+"px"
else if (obj.drawit){
obj.themenu.left=obj.leftboundary+'px'
clearInterval(obj.drawit)
}
}
document.onmousemove=function(){
if(window.event) {
var x=event.clientX,
y=event.clientY
for (var i_tem = 0; i_tem < slidemenus.length; i_tem++){
if((x-1<=(parseInt(ie4['slidebar'+i_tem].style.left)+ie4['slidebar'+i_tem].offsetWidth))&&(y>=slidemenus[i_tem].slidemenu_top&&y-1<=(slidemenus[i_tem].slidemenu_top+ie4['slidebar'+i_tem].offsetHeight)))
return;
}
for (i_tem = 0; i_tem < slidemenus.length; i_tem++)
draw(i_tem)
}
}
</script>
</head>
<body>
<script type="text/javascript">
//Usage Example:
//new slidemenu(itemsArrayName, menuWidth, initialReveal, topOffset, optionalLinksTarget)
new slidemenu(sitems, 165, 12, 40)
new slidemenu(sitems2, 120, 12, 293, '_new')
</script>
</body>
</html>
New Comer (less than 5 posts)
two images for slide menu
Posting Permissions
Reply With Quote
Bookmarks