Results 1 to 2 of 2

Thread: gooey menu vertical instead of horizontal

  1. #1
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default gooey menu vertical instead of horizontal

    1) Script Title: gooey menu

    2) Script URL (on DD):

    3) Describe problem: http://www.dynamicdrive.com/dynamicindex1/gooeymenu.htm

    I was just wondering how it would be possible to make this menu vertical instead of horizontal . any help would be greatly appreciated. cheers. Ed

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .parent {
      position:relative;left:100px;top:100px;width:500px;height:500px;border:solid #FFCC66 1px;
    }
    
    .div {
      position:relative;z-Index:1;left:100px;top:100px;width:100px;height:100px;background-color:#FFCC66;
    }
    
    .item {
      cursor:pointer;
    }
    
    .frame {
      position:absolute;z-Index:0;left:100px;top:100px;width:120px;height:120px;border:solid red 1px;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    <div id="tst" class="parent" >
     <a class="item" >Some Text</a>
     <div class="div item" >Tom</div>
     <br /><br />
     <div class="div item" style="left:200px;width:200px;height:200px;" >Joe</div>
    </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Frame Element (26-November-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcFrameElement={
    
     init:function(o){
      var id=o.ParentID,ms=o.MoveDuration,bms=o.BounceDuration,rsz=o.ReSizeBy,s=o.SelectElement,p=document.getElementById(id),obj=document.createElement('DIV'),ms=typeof(ms)=='number'?ms:1000,bms=typeof(bms)=='number'?bms:ms,reg=new RegExp('\\W'+o.ElementClass+'\\W'),els=p.getElementsByTagName('*'),ary=[],z0=0;
      for (;z0<els.length;z0++){
       if(reg.test(' '+els[z0].className+' ')){
        this.addevt(els[z0],'mouseup','goto',id,ary.length);
        ary.push(els[z0]);
       }
      }
      obj.className=o.FrameClass;
      o=zxcFrameElement['zxc'+id]={
       p:p,
       obj:obj,
       ary:ary,
       ms:ms,
       rsz:typeof(rsz)=='number'?rsz:false,
       blft:[10,3,bms],
       btop:[10,3,bms],
       i:Math.PI/(2*ms)
      }
      obj.style.visibility=ary[s]?'visible':'hidden';
      p.appendChild(obj);
      this.goto(id,ary[s]?s:0,20);
     },
    
     goto:function(id,nu,ms){
      var o=zxcFrameElement['zxc'+id];
      if (o&&o.ary[nu]){
       var mS=!ms?o.ms:ms,w=o.ary[nu].offsetWidth,h=o.ary[nu].offsetHeight,p=this.pos(o.p),pp=this.pos(o.ary[nu]),t;
       if (o.rsz){
        w+=o.rsz;
        h+=o.rsz;
        this.move(o,'width',o.obj.offsetWidth,w,new Date(),mS,null,'s');
        this.move(o,'height',o.obj.offsetHeight,h,new Date(),mS,null,'s');
       }
       t=pp[0]-p[0]+(o.ary[nu].offsetWidth-w)/2;
       this.bary(o.blft,t,w);
       this.move(o,'left',o.obj.offsetLeft,t,new Date(),mS,mS!=ms?o.blft:null,'s');
       t=pp[1]-p[1]+(o.ary[nu].offsetHeight-h)/2;
       this.bary(o.btop,t,h);
       this.move(o,'top',o.obj.offsetTop,t,new Date(),mS,mS!=ms?o.btop:null,'s');
      }
     },
    
     bary:function(b,t,sz){
      b[0]=sz/10;
      b[3]=[];
      for (var z0=0;z0<b[1];z0++){
       b[3].push(t+b[0]*(1-Math.sin((z0*90/b[1])*Math.PI/180))+.001);
       b[3].push(t+.001);
      }
     },
    
     move:function(o,mde,f,t,srt,mS,b,sc,inc){
      var oop=this,ms=new Date().getTime()-srt,now=Math.floor(sc=='s'?(t-f)*Math.sin(o.i*ms)+f:(t-f)/mS*ms+f);
      if (isFinite(now)){
       o.obj.style[mde]=now+'px';
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.move(o,mde,f,t,srt,mS,b,sc,inc); },10);
      }
      else {
       o.obj.style[mde]=t+'px';
       if (b&&b[3]&&b[3][0]){
        this.move(o,mde,t,b[3][0],new Date(),b[2]/(b[1]*2),b);
        b[3].splice(0,1);
       }
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     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); });
      }
     }
    
    }
    
    zxcFrameElement.init({
     ParentID:'tst',      // the unique ID name of the parent DIV.                                 (string)
     ElementClass:'item', // the common class name of the elements to frame.                       (string)
     FrameClass:'frame',  // the class name of the frame DIV.                                      (string)
     MoveDuration:1000,   //(optional) the move duration in milli seconds.                         (number. default = 1000)
     BounceDuration:500,  //(optional) the bounce duration in milli seconds.                       (number. default = MoveDuration)
     SelectElement:0,     //(optional) the index number of the  element to be framed.              (number. default = the frame DIV is hidden)
     ReSizeBy:20          //(optional) the frame is resized to the selected element plus ReSizeBy. (number. default = no resize)
    });
    
    /*]]>*/
    </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: 05-29-2010, 03:33 PM
  2. Horizontal Menu - Vertical Alignment
    By Geologist1724 in forum CSS
    Replies: 0
    Last Post: 01-05-2009, 06:31 PM
  3. horizontal MENU to Vertical
    By queerfm in forum CSS
    Replies: 2
    Last Post: 04-01-2008, 07:51 AM
  4. Change vertical menu into horizontal, please help!
    By Bluefame_Designer in forum CSS
    Replies: 5
    Last Post: 03-31-2008, 02:29 PM
  5. Vertical to Horizontal Menu?
    By chrisfromboji in forum JavaScript
    Replies: 0
    Last Post: 07-24-2007, 02:18 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
  •