PDA

View Full Version : Switch Menu II --> Horizontal



rchiu5hk
02-18-2013, 05:08 AM
Dear all,

I am using switch menu II from below link. Is it possible and how to change it to be horizontal menu?
http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm

vwphillips
02-18-2013, 03:05 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >

<link rel="stylesheet" type="text/css" href="sddm.css" >
<style type="text/css">
<!--
.navbar
{
}

.mainDiv
{
position:relative;
width:700px;
height:20px;
}

.topItem
{
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url("arrow-up-title.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
border: none;
width: 185px;
float:left;
height: 25px;
color: #215dc6;
cursor:pointer;
text-indent:10px;
}

.topItemOver
{
text-indent:10px;
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url("arrow-up-title-on.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #428eff;
cursor:pointer;
}

.topItemClose
{
text-indent:10px;
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url("arrow-down-title.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #215dc6;
cursor:pointer;
}


.topItemCloseOver
{
text-indent:10px;
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url("arrow-down-title-on.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #428eff;
cursor:pointer;
}



.dropMenu
{
font: bold 11px tahoma,verdana,sans-serif;
background-color: #D6DFF7;
color: #000;
border: 1px solid #FFFFFF;
border-width: 0 1px 1px 1px;
filter:alpha(opacity=100);
padding-top:0px;
width:500px;
height:20px;
padding-bottom:5px;
float:left;
}

.subMenu
{
background-color: #D6DFF7;
float:left;
display:block;
height:20px;
width:500px;
}

.subItem
{
float:left;
margin-top:0px;
width:80px;
height:18px;
font: 11px tahoma,verdana,sans-serif;
text-Align:center;
text-decoration:none;
color: #215dc6;
border:solid #215dc6 1px;

}

.subItem a
{
margin-left:0px;
font: 11px tahoma,verdana,sans-serif;
text-decoration:none;
color: #215dc6;
}


.subItemOver a
{
font: 11px tahoma,verdana,sans-serif;
cursor:pointer;
color: #428eff;
text-decoration:underline;
background-Color:#99FFFF;
cursor:pointer;
}


.drop
{
border-left:1px solid black;
border-right:1px solid black;
}





-->
</style><title>JSwitch Slide Menu</title>
</head>

<body>

<div class="navbar">
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv Animate:1000 TopOver:topItemCloseOver TopClose:topItemClose ItemOver:subItemOver" >

<div class="topItem" >Demo Menu 1</div>

<div class="dropMenu" ><!-- -->
<div class="subMenu">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Tool Box</a></div>
<div class="subItem"><a href="#">Contact Us</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
<div class="subItem"><a href="#">Sub Menu 5</a></div>
</div>
</div>

</div>
<!-- *********************************End Menu****************************** -->

<script type="text/javascript">
<!--

function zxcInitMenu(cls){
var reg=new RegExp('\\W'+cls+'\\W'),els=document.body.getElementsByTagName('DIV'),o,z,i,z0=0,z0a;
for (;z0<els.length;z0++){
if(reg.test(' '+els[z0].className+' ')){
o={};
s=els[z0].className.split(' ');
for (z0a=0;z0a<s.length;z0a++){
i=s[z0a].indexOf(':');
if (i>2){
o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
}
}
new zxcHVMenu(els[z0],o);
}
}
}

function zxcHVMenu(obj,o){
var clds=obj.childNodes,objs=[],top,sub,min,max,cls,z0=0,z1=0;
obj.style.visibility='hidden';
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
objs.push(clds[z0]);
}
}
top=objs[0];
top.style.float='left';
objs[1].style.float='left';
sub=objs[1].getElementsByTagName('DIV')[0];
sub.style.position='absolute';
sub.style.left=top.offsetWidth+'px';
sub.style.top='0px';
sub.style.float='left';
obj.style.width=objs[1].style.width=sub.style.width='1000px';
clds=sub.childNodes;
for (;z1<clds.length;z1++){
if (clds[z1].nodeType==1){
clds[z1].style.float='left';
cls=clds[z1].className;
this.addevt(clds[z1],'mouseover','itemmse',[clds[z1],cls,cls+' '+o.itemover,2]);
this.addevt(clds[z1],'mouseout','itemmse',[clds[z1],cls,cls+' '+o.itemover,1]);
max=clds[z1].offsetLeft+clds[z1].offsetWidth;
}
}
min=top.offsetWidth;
obj.style.overflow='hidden';
obj.style.width=min+'px';
sub.style.visibility=top.style.visibility='visible';
cls=top.className;
this.top=top;
this.topcls=[cls,cls+' '+o.topclose,cls+' '+o.topover];
top.className=this.topcls[1];
this.ary=[true,'width',min,min+max,min,max];
this.ms=isFinite(o.animate*1)?o.animate*1:500;
this.obj=obj;
this.addevt(top,'mouseup','toggle');
this.addevt(top,'mouseover','topmse',2);
this.addevt(top,'mouseout','topmse',1);
}


zxcHVMenu.prototype={


toggle:function(){
var o=this,ud=o.ary[0],t=o.ary[ud?3:2];
o.animate(o.ary[4],t,new Date(),o.ms*Math.abs((t-o.ary[4])/o.ary[5]));
o.top.className=o.topcls[ud?0:1];
o.ary[0]=!o.ary[0];
},

itemmse:function(ary){
var o=this;
ary[0].className=ary[ary[3]];
},

topmse:function(ud){
var o=this;
o.ary[0]?o.top.className=o.topcls[ud]:null;
},

animate:function(f,t,srt,mS){
var o=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
clearTimeout(o.ary[6]);
if (isFinite(now)){
o.ary[4]=Math.max(now,f<0||t<0?now:0);
o.obj.style[o.ary[1]]=o.ary[4]+'px';
}
if (ms<mS){
o.ary[6]=setTimeout(function(){ o.animate(f,t,srt,mS); },10);
}
else {
o.ary[4]=t;
o.obj.style[o.ary[4]]=t+'px';
}
},

addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}

}


zxcInitMenu('mainDiv');

//-->
</script>
</body>
</html>