Tab list box : tab « CSS Controls « HTML / CSS

Tab list box

   


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style id="ss" rel="stylesheet" type="text/css">
#tabs { 
  float:left; 
  position:relative;
  width:455px; 
  margin-bottom:10px;
}
#tabs #buttons { 
  position:absolute; 
  top:0; left:0; 
  width:150px;
  margin:0; padding:0;
  background-color:#ddd; 
  color:#888; 
  border-top:1px solid #999;
  list-style:none;
}
#tabs #buttons li { 
  border-bottom:1px solid #999; 
  border-left:1px solid #999;
}
#tabs #buttons a {
  text-decoration:none;
  color:#888; 
  display:block; 
  border-right:1px solid #999;
  padding:5px;
}
#tabs #buttons a:hover { background-color:#eee; }
#tabs #buttons a.selected { 
  color:black; 
  background-color:#FDE9F0; 
  border-right-width:0px;
}
#tabs #buttons a.selected:hover { background-color:#FDE9F0; }

#tabs .infobox {
  margin-left:150px;
  padding:6px 12px;
  border:1px solid #999;
  border-left-width:0px;
  background-color:#FDE9F0;
  display:none;
}
#tabs .enabled { display:block; }
#tabs .infobox ul { margin-left:20px; padding-left:0px; }
</style>
<script language="JavaScript" type="text/javascript">
function selectTab(num) {
  for (var i=1; i <= 4; i++) {
    document.getElementById("tab" + i).className = "";
    document.getElementById("box" + i).className = "infobox";
  }
  document.getElementById("tab" + num).className = "selected";
  document.getElementById("box" + num).className = "infobox enabled";
}
</script>
</head>

<body onload="selectTab(1);">
  <div id="tabs"> 
      
    <ul id="buttons">
        
      <li><a href="#" id="tab1" onclick="selectTab(1); return false;" onfocus="blur();">Tab 1</a></li>
      <li><a href="#" id="tab2" onclick="selectTab(2); return false;" onfocus="blur();">Tab 2</a></li>
      <li><a href="#" id="tab3" onclick="selectTab(3); return false;" onfocus="blur();">Tab 3</a></li>
      <li><a href="#" id="tab4" onclick="selectTab(4); return false;" onfocus="blur();">Tab 4</a></li>
    </ul>
    <div id="box1" class="infobox"> 
        
      <p>such as:</p>
      <ul>
          
        <li>N</li>
        <li>M</li>
        <li>A</li>
        <li>F</li>
        <li>A</li>
      </ul>
    </div>
    <div id="box2" class="infobox"> 
        
      <p>box 2 <BR/><BR/><BR/><BR/><BR/><BR/></p>
    </div>
    <div id="box3" class="infobox">
        
      <p>this is a test. this is a test. </p>
      <ul>
        <li>H</li>
        <li>W</li>
        <li>E</li>
        <li>S</li>
      </ul>
    </div>
    <div id="box4" class="infobox"> 
        
      <p>this is a test. this is a test. </p>
      <p>this is a test. this is a test. </p>
    </div>
  </div>
  </div>
</body>
</html>

1.	Simple Tab Menu
2.	Use UL and LI to create tab bar
3.	Tab menu with bottom bar highlight
4.	Tab bar with bottom image
5.	Anchor based tab
6.	Dynamic tab without javascript
7.	Horizontal tab bar
8.	CSS only tab bar with content
9.	Simple Tab Menu with UL LI
10.	CSS tab
11.	Image tab menu 1
12.	Image tab menu 2
13.	Image tab menu 3
14.	Image tab menu 4
15.	Image Tab menu 5
16.	Image tab menu 6
17.	Tab pages
18.	Tab menu bar with image
19.	Tab like top menu bar
20.	Pure css based top tab menu
21.	Footer with tab menu
22.	Top tab menubar
23.	Tab menu bar
24.	Tab bar
25.	Variable-Width Tab Navigation
26.	Fixed-Width Tab Navigation
27.	Tab like top layout bar
28.	Card layout with top tab menu bar
29.	Tab like top menu bar 2
30.	Tab menu bar with round corner

Tab list box : tab « CSS Controls « HTML / CSS

Related examples in the same category