Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts

    navigation like this

    Hello

    I'd like to make a navigation very similar to this site: www.wacom.com
    Anyone can give me some tips on how to make this?

    THanks

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    .menu {
      position:absolute;left:0px;top:0px;width:300px;height:700px;border:solid red 1px;background-Color:#FFCC66;
    }
    
    .menutabs {
      position:absolute;overflow:hidden;z-Index:2;left:50px;top:0px;width:250px;height:700px;background-Color:#CCFFFF;
    }
    
    .menutab {
      position:relative;left:0px;top:0px;width:250px;height:100px;border:solid red 1px;background-Color:#CCFFFF;
    }
    
    .active {
      width:50px;border-Left-Width:0px;background-Color:#FFFFCC;
    }
    
    .reveal {
      position:absolute;left:50px;top:0px;width:250px;height:700px;background-Color:#CCFFFF;
    }
    
    -->
    </style>
    
    </head>
    
    <body>
    <div id="m1" class="menu" >
     <div class="menutabs" >
      <div class="menutab" ></div>
      <div class="menutab" ></div>
      <div class="menutab"  ></div>
     </div>
     <div class="reveal" >1</div>
     <div class="reveal" style="background-Color:#00CCCC;" >2</div>
     <div class="reveal" style="background-Color:#99CC66;" >3</div>
    </div>
    
    <script type="text/javascript">
    <!--
    
    var zxcTabMenu={
    
     init:function(o){
      var id=o.MenuID,p=document.getElementById(id),tc=o.TabClass,rc=o.RevealClass,ms=o.Animate,d=p?this.bycls(o.TabParentClass,p)[0]:null;
      if (d){
       var tabs=this.bycls(tc,d),r=this.bycls(rc,p),c,cls,ary=[],z0=0;
       if (tabs[0]){
        c=tabs[0].cloneNode(false);
        c.className=tc+' active';
        p.appendChild(c);
        for (;z0<tabs.length;z0++){
         if (r[z0]){
          cls=tabs[z0].className;
          ary=[tabs[z0],r[z0],cls,cls+' active'];
          this.addevt(tabs[z0],'mouseover','mse',o,ary,true);
          this.addevt(r[z0],'mouseover','mse',o,ary,true);
          tabs[z0].style.width=this.int(tabs[0],'width')+'px';
          r[z0].style.display='none';
         }
        }
        o.d=[[d,'left',this.int(d,'left'),0,this.int(d,'left')],[d,'width',this.int(tabs[0],'width'),this.int(c,'width'),this.int(tabs[0],'width')]];
        p.removeChild(c);
        o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
        o.tc=tc;
        this.addevt(p,'mouseout','out',o);
       }
      }
     },
    
     out:function(o){
      var oop=this;
      o.to=setTimeout(function(){ oop.mse(o); },510);
     },
    
     mse:function(o,a,ud){
      clearTimeout(o.to)
      if (o.a&&o.a!=a){
       o.a[0].className=o.a[2];
       o.a[1].style.display='none';
      }
      this.animate(o,o.d[0],o.d[0][4],o.d[0][ud?3:2],new Date(),o.ms);
      this.animate(o,o.d[1],o.d[1][4],o.d[1][ud?3:2],new Date(),o.ms);
      if (ud){
       a[0].className=a[3];
       a[1].style.display='block';
       o.a=a;
      }
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[4]=Math.max(f<0||t<0?n:0,n);
       a[0].style[a[1]]=a[4]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[4]=t;
       a[0].style[a[1]]=t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null;
     },
    
     int:function(o,p){
      return parseInt(this.style(o,p));
     },
    
     style:function(o,p){
      if (o.currentStyle){
       return o.currentStyle[p.replace(/-/g,'')];
      }
      return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
     },
    
     bycls:function (nme,el){
      for (var els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if((' '+els[z0].className+' ').match(' '+nme+' ')){
        ary.push(els[z0]);
       }
      }
      return ary;
     }
    
    }
    
    zxcTabMenu.init({
     MenuID:'m1',
     TabParentClass:'menutabs',
     TabClass:'menutab',
     RevealClass:'reveal',
     Animate: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/

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow! That's impressive! Thanks, I might find a use for that somewhere myself.

  • #4
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts
    wow thanks a lot

    you handwrote all that code?



  •  

    Posting Permissions

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