Google Adwords Simple Tabs

**mrt1008** · 05-19-2012, 06:00 PM

I'm trying to replicate Google Adwords homepage, particularly their simple "tab menu" found on the bottom of the below page. Take a look:

https://accounts.google.com/ServiceL...ww-et-canal-v1

If that does't work, a screenshot is attached

Here's the closest I've found so far, but it's pretty far off:
http://www.dynamicdrive.com/dynamici...tabcontent.htm

Clicking 1 of their different 5 "tabs" simply shows a different "preview" of information.

**vwphillips** · 05-20-2012, 12:50 PM

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[*/

#tst {
 position:relative;width:500px;height:300px;border:solid red 1px;
}

#tst .tabs{
 position:absolute;overflow:hidden;width:100px;height:300px;border-Right:solid red 1px;
}

#tst .tab{
 width:100px;height:75px;background-Color:#FFFFCC;border-Bottom:solid red 1px;cursor:pointer;
}

#tst .tabactive{
 background-Color:#FFCC66;color:#FFFFCC;
}

#tst .tabmouse{
 background-Color:#FFFF99;
}

#tst .content{
 position:absolute;left:100px;top:0px;width:400px;height:300px;
}

#tst .page{
 width:400px;height:300px;background-Color:#FFFFCC;
}

/*]]>*/
</style></head>

<body>
 <div id="tst">
   <div class="content" >
    <div class="page" >page 1</div>
    <div class="page" >page 2</div>
    <div class="page" >page 3</div>
    <div class="page" >page 4</div>
   </div>
   <div class="tabs" >
    <div class="tab" >Tab 1</div>
    <div class="tab" >Tab 2</div>
    <div class="tab" >Tab 3</div>
    <div class="tab" >Tab 4</div>
   </div>
 </div>

<script type="text/javascript">
/*<![CDATA[*/
// Tab Menu (20-May-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcTabMenu={

 init:function(o){
  var id=o.ID,p=document.getElementById(id),pages=this.bycls(o.PageClass,p),cls=o.TabDefaultClass,tabs=this.bycls(cls,p),acls=o.TabActiveClass,mcls=o.TabMouseClass,cls=[cls,cls+(acls?' '+acls:''),cls+(mcls?' '+mcls:'')],z0=0;
  p.style.overflow='hidden';
  this[id]={
   pages:pages,
   tabs:tabs,
   cls:cls,
   nu:0
  }
  for (var z0=0;z0<pages.length;z0++){
   if (tabs[z0]){
    pages[z0].style.position='absolute';
    pages[z0].style.zIndex=z0>0?'0':'1';
    pages[z0].style.left='0px';
    pages[z0].style.top='0px';
    tabs[z0].className=cls[z0>0?0:1];
    this.addevt(tabs[z0],'mouseup','Page',id,z0);
    this.addevt(tabs[z0],'mouseover','mse',id,z0);
    this.addevt(tabs[z0],'mouseout','mse',id,z0);
   }
  }
 },

 Page:function (id,nu){
  var obj=this[id];
  if (obj&&obj.tabs[nu]){
   obj.tabs[obj.nu].className=obj.cls[0];
   obj.tabs[nu].className=obj.cls[1];
   obj.pages[obj.nu].style.zIndex='0';
   obj.pages[nu].style.zIndex='1';
   obj.nu=nu;
  }
 },

 mse:function (id,nu,e){
  var obj=this[id];
  if (obj&&obj.tabs[nu]&&obj.tabs[nu].className!=obj.cls[1]){
   obj.tabs[nu].className=obj.cls[e.type=='mouseout'?0:2];
  }
 },

 bycls:function (nme,el){
  for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
   if(reg.test(els[z0].className)){
    ary.push(els[z0]);
   }
  }
  return ary;
 },

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


}

zxcTabMenu.init({
 ID:'tst',                  // the unique ID name of the parent DIV.   (string)
 PageClass:'page',          // the common class name of the pages.     (string)
 TabDefaultClass:'tab',     // the common class name of the tabs.      (string)
 TabMouseClass:'tabmouse',  //(optional) the tab mouseover class name. (string, default = no mouseover class)
 TabActiveClass:'tabactive' //(optional) the tab active class name.    (string, default = no active class)
});

/*]]>*/
</script>
</body>

</html>

**mrt1008** · 05-28-2012, 02:23 AM

Thanks Vic for your script. Nice site, too.

I must be installing it wrong. Here's what I did:

My result:
http://tinyurl.com/7h9tpkb

To my style sheet I added:

Code:

#tst {
 position:relative;width:500px;height:300px;border:solid red 1px;
}

#tst .tabs{
 position:absolute;overflow:hidden;width:100px;height:300px;border-Right:solid red 1px;
}

#tst .tab{
 width:100px;height:75px;background-Color:#FFFFCC;border-Bottom:solid red 1px;cursor:pointer;
}

#tst .tabactive{
 background-Color:#FFCC66;color:#FFFFCC;
}

#tst .tabmouse{
 background-Color:#FFFF99;
}

#tst .content{
 position:absolute;left:100px;top:0px;width:400px;height:300px;
}

#tst .page{
 width:400px;height:300px;background-Color:#FFFFCC;
}

WordPress html body I added:

Code:

<div id="tst">
   <div class="content" >
    <div class="page" >page 1</div>
    <div class="page" >page 2</div>
    <div class="page" >page 3</div>
    <div class="page" >page 4</div>
   </div>
   <div class="tabs" >
    <div class="tab" >Tab 1</div>
    <div class="tab" >Tab 2</div>
    <div class="tab" >Tab 3</div>
    <div class="tab" >Tab 4</div>
   </div>
 </div>

In the HEAD of the page I added:

Code:

<script type="text/javascript">
/*<![CDATA[*/
// Tab Menu (20-May-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcTabMenu={

 init:function(o){
  var id=o.ID,p=document.getElementById(id),pages=this.bycls(o.PageClass,p),cls=o.TabDefaultClass,tabs=this.bycls(cls,p),acls=o.TabActiveClass,mcls=o.TabMouseClass,cls=[cls,cls+(acls?' '+acls:''),cls+(mcls?' '+mcls:'')],z0=0;
  p.style.overflow='hidden';
  this[id]={
   pages:pages,
   tabs:tabs,
   cls:cls,
   nu:0
  }
  for (var z0=0;z0<pages.length;z0++){
   if (tabs[z0]){
    pages[z0].style.position='absolute';
    pages[z0].style.zIndex=z0>0?'0':'1';
    pages[z0].style.left='0px';
    pages[z0].style.top='0px';
    tabs[z0].className=cls[z0>0?0:1];
    this.addevt(tabs[z0],'mouseup','Page',id,z0);
    this.addevt(tabs[z0],'mouseover','mse',id,z0);
    this.addevt(tabs[z0],'mouseout','mse',id,z0);
   }
  }
 },

 Page:function (id,nu){
  var obj=this[id];
  if (obj&&obj.tabs[nu]){
   obj.tabs[obj.nu].className=obj.cls[0];
   obj.tabs[nu].className=obj.cls[1];
   obj.pages[obj.nu].style.zIndex='0';
   obj.pages[nu].style.zIndex='1';
   obj.nu=nu;
  }
 },

 mse:function (id,nu,e){
  var obj=this[id];
  if (obj&&obj.tabs[nu]&&obj.tabs[nu].className!=obj.cls[1]){
   obj.tabs[nu].className=obj.cls[e.type=='mouseout'?0:2];
  }
 },

 bycls:function (nme,el){
  for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
   if(reg.test(els[z0].className)){
    ary.push(els[z0]);
   }
  }
  return ary;
 },

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


}

zxcTabMenu.init({
 ID:'tst',                  // the unique ID name of the parent DIV.   (string)
 PageClass:'page',          // the common class name of the pages.     (string)
 TabDefaultClass:'tab',     // the common class name of the tabs.      (string)
 TabMouseClass:'tabmouse',  //(optional) the tab mouseover class name. (string, default = no mouseover class)
 TabActiveClass:'tabactive' //(optional) the tab active class name.    (string, default = no active class)
});

/*]]>*/
</script>

Thread: Google Adwords Simple Tabs

Thread Tools

Search Thread

Google Adwords Simple Tabs

Bookmarks

Bookmarks

Posting Permissions