Results 1 to 2 of 2

Thread: Switch Menu II --> Horizontal

  1. #1
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switch Menu II --> Horizontal

    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/dynamici...witchmenu2.htm

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Replies: 0
    Last Post: 06-22-2006, 11:56 PM
  2. Persistance Problem When Installing Both Switch Content and Switch Menu Script
    By Crimsonbat in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-29-2006, 06:00 AM
  3. make switch menu not switch?
    By Doomtomb in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-20-2006, 09:06 PM
  4. Switch Menu II -- Horizontal instead of Vertical Layout
    By voxbox13 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-21-2006, 07:14 AM
  5. Horizontal Switch Menu
    By soundwave in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-18-2005, 06:50 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •