PDA

View Full Version : two images for slide menu



fivel
03-30-2006, 12:08 PM
Hi there,

i was wondering if how to put two slide menu in a single page without using the code twice..

this is the script im talking about:
http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm

Im using a single image rather than a group of menu in order to slide each line rather than the whole group.

thanks.

simonf
03-30-2006, 12:27 PM
why!!! As the viewers cannot see whats on the menu, why split it up in seperate slides... I think it will be very frustrating for the viewers of your web site if you do it that way. Just a comment.. also it will make you page rather a large size due to all the seperate scripts etc...

jscheuer1
03-30-2006, 09:37 PM
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:


<!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>