Results 1 to 2 of 2

Thread: Where can I find some example like this website drop down menu

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

    Default Where can I find some example like this website drop down menu

    Where can I find some example like this website drop down menu
    http://tntrailsandbyways.com/

    I need to slide down menu with multi column

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 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[*/
    
    .banner {
      position:absolute;left:0px;top:0px;width:100%;height:50px;background-Color:#FFCC66;
    }
    
    .banner UL{
    
    }
    
    .banner UL LI{
     list-Style:none;display:inline;margin-Left:20px;width:200px
    }
    
    .drop {
      position:absolute;left:0px;top:50px;width:100%;height:150px;background-Color:red;
    }
    
    .droplink {
     float:left;width:100px;height:30px;background-Color:#FFFFCC;margin-Left:20px;margin-Top:10px;
    }
    
    .active {
     background-Color:#CCFFCC;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <div id="banner" class="banner" >
     <ul>
      <li><div class="droplink" >Tom</div></li>
      <li><div class="droplink" >Joe</div></li>
     </ul>
     <div class="drop" ></div>
     <div class="drop" style="background-Color:green;" ></div>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Drop Menu (19-September-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcDropMenu={
    
     init:function(o){
      var id=o.ID,ms=o.DropDuration,lkcls=o.LinkClass,obj=document.getElementById(id),objs=obj.getElementsByTagName('*'),cls,lary=[],ary=[],z0=0,z1=0;
      for (;z0<objs.length;z0++){
       cls=objs[z0].className;
       if (cls){
        if ((' '+cls+' ').indexOf(' '+lkcls+' ')>=0){
         lary.push(objs[z0]);
        }
        if ((' '+cls+' ').indexOf(' '+o.DropClass+' ')>=0){
         ary.push([objs[z0],0,objs[z0].offsetHeight,'dly'+z0]);
         objs[z0].style.height='0px';
        }
       }
      }
      for (;z1<ary.length;z1++){
       this.addevt(ary[z1][0],'mouseover','clear',id,z1);
       this.addevt(ary[z1][0],'mouseout','toggle',id,-1);
       if (lary[z1]){
        ary[z1][4]=lary[z1];
        this.addevt(lary[z1],'mouseover','toggle',id,z1);
        this.addevt(lary[z1],'mouseout','close',id,500);
       }
      }
      this['zxc'+id]={
       ary:ary,
       ms:typeof(ms)=='number'?ms:1000,
       nu:-1,
       cls:[lkcls,lkcls+' '+o.LinkActiveClass]
      }
     },
    
     toggle:function(id,nu){
      var o=this['zxc'+id];
      if (o&&nu!==o.nu){
       clearTimeout(o.dly);
       if (o.ary[o.nu]){
        clearTimeout(o.ary[o.nu][3]);
        o.ary[o.nu][4].className=o.cls[0];
        this.animate(o,o.ary[o.nu],o.ary[o.nu][1],0,new Date(),o.ms,nu);
        o.nu=-1;
       }
       else if (o.ary[nu]){
        o.ary[nu][4].className=o.cls[1];
        this.open(o,nu);
       }
      }
     },
    
     open:function(o,nu){
      clearTimeout(o.dly);
      clearTimeout(o.ary[nu][3]);
      this.animate(o,o.ary[nu],o.ary[nu][1],o.ary[nu][2],new Date(),o.ms);
      o.nu=nu;
     },
    
     close:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.dly=setTimeout(function(){ oop.toggle(id,-1); },ms||200);
      }
     },
    
     clear:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.dly);
      }
     },
    
     animate:function(o,ary,f,t,srt,mS,nu){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       ary[1]=Math.max(now,0);
       ary[0].style.height=ary[1]+'px';
      }
      if (ms<mS){
       o[ary[3]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,nu); },10);
      }
      else {
       ary[1]=t;
       ary[0].style.height=t+'px';
       if (o.ary[nu]){
        o.ary[nu][4].className=o.cls[1];
        this.open(o,nu);
       }
      }
     },
    
     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); });
      }
     }
    
    }
    
    zxcDropMenu.init({
     ID:'banner',              // the unique ID of the parent DIV.                                   (string)
     LinkClass:'droplink',     // the common class name of the link elements.                        (string)
     DropClass:'drop',         // the common class name of the menu drop elements.                   (string)
     LinkActiveClass:'active', //(optional) the additional class name of the active link elements.   (string, default = no active class)
     DropDuration:1000         //(optional) the drop duration in milli seconds.                      (number, default = 1000)
    });
    
    /*]]>*/
    </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. Can't find a very spicific menu.
    By robin9000 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-29-2009, 06:44 PM
  2. adding drop-down menus to an existing website
    By legalwalleye in forum CSS
    Replies: 10
    Last Post: 09-18-2008, 05:14 PM
  3. Where to find Drop down Menu?
    By toplisek in forum CSS
    Replies: 2
    Last Post: 12-04-2007, 08:51 PM
  4. Sweet drop menu, anyone find this?
    By Chadi in forum JavaScript
    Replies: 11
    Last Post: 08-07-2006, 01:23 AM
  5. Replies: 1
    Last Post: 07-04-2005, 06:07 PM

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
  •