HTML/CSS/CSS Controls/tab

Материал из Web эксперт
Версия от 08:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Anchor based tab

 
<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Styling &lt;body&gt;</title>
  <style type="text/css" media="screen">
  .container {
    width: 500px;
    padding: 15px;
    margin: 3px 0 20px 0;
    border: 1px solid #ccc;
    background: #fff;
  }
  
  #nav {
    margin: 0;
    padding: 0 0 20px 10px;
    border-bottom: 1px solid #9FB1BC;
  }
  
  #nav li {
    margin: 0; 
    padding: 0;
    display: inline;
    list-style-type: none;
  }
    
  #nav a:link, #nav a:visited {
    float: left;
    font-size: 10px;
    line-height: 14px;
    font-weight: bold;
    padding: 0 12px 6px 12px;
    text-decoration: none;
    color: #708491;
  }
  
  #nav a:hover { 
    color: #000; 
  } 
  </style>
</head>
<body id="spag">

<div class="container">
<ul id="nav">
  <li id=""><a href="#">Item 1</a></li>
  <li id=""><a href="#">Item 2</a></li>
  <li id=""><a href="#">Item 3</a></li>
  <li id=""><a href="#">Item 4</a></li>
</ul>
</div>

</body>
</html>



CSS only tab bar with content

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
<style type="text/css" media="screen">
#navContainer {
    padding: 20px 0 0;
    border-bottom: 1px solid #000000;
    background: #dddddd;
}
#navigation ul {
    padding: 0 0 5px;
}
#navigation li {
    display: inline;
}
#navigation a:link, #navigation a:visited {
    text-decoration: none;
    background: #bbbbbb;
    border: 1px solid #898989;
    padding: 5px 10px;
    position: relative;
    margin-right: 5px;
}
#navigation a:hover {
    text-decoration: underline;
    background: #cccccc;
}
a:link, 
a:visited, 
{
    background: #ffffff;
    border-bottom-color: #ffffff;
}
</style>
</head>
<body id="homePage">
    <div id="masthead">
      <div id="navContainer">
        <div id="navigation">
          <ul>
            <li id="homePageLink"><a href="#">Home page</a></li>
            <li id="servicesPageLink"><a href="#">Services</a></li>
            <li id="customerSupportPageLink"><a href="#">Customer support</a></li>
            <li id="contactDetailsPageLink"><a href="#">Contact details</a></li>
          </ul>
        </div>
      </div>
  </div>
</body>
</html>



CSS tab

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#navsite {
  border: 1px dashed white;
}
body {
  margin: 0 15% 0 15%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 10px solid black;
  padding: 0 0 5em 0;
}
#header {
  background-color: white;
  border-top: 10px solid #333;
}
#navsite {
  background-color: white;
}
#navsite ul {
  background-color: white;
  padding: 0 0 3px 0;
  margin-left: 0;
  margin-top: 0;
  border-bottom: 1px solid #669;
}
#navsite ul li {
  list-style: none;
  margin: 0;
  display: inline;
}
#navsite ul li a {
  padding: 3px 0.5em;
  margin-left: 3px;
  border: 1px solid #669;
  border-bottom: none;
  background-color: #ccf;
  text-decoration: none;
}
#navsite ul li a:link {
  color: #339;
}
#navsite ul li a:visited {
  color: #666;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
  color: #000;
  background: #AAE;
  border-color: #336;
}
#navsite ul li a#current {
  background: white;
  border-bottom: 1px solid white;
}
#header, #content {
 padding: 0 2% 0 2%;
}
#content {
 background-color: white;
}
#contentMain {
  background-color: white;
}
</style>
</head>
<body>
<div id="navsite">
<ul>
    <li><a href="http://www.wbex.ru" id="current">Home</a></li>
    <li><a href="http://www.wbex.ru">Products</a></li>
    <li><a href="http://www.wbex.ru">Services</a></li>
    <li><a href="http://www.wbex.ru">About Us</a></li>
    <li><a href="http://www.wbex.ru">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="contentMain">
<h2><a href="http://www.wbex.ru">link</a></h2>
<p>Text <a href="http://www.wbex.ru">Link</a></p>
<p>Text.</p>
<p>Text <a href="http://www.wbex.ru">Link</a></p>
</div>
</div>
<div id="footer">
<p>Copyright 2003 .</p>
</div>
</body>
</html>



Dynamic tab without javascript

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
      <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
      <meta http-equiv="content-language" content="en-us" />
        <style type="text/css">
            div {
                background: lightgrey;
                padding: 0.7em;
                clear: left;
            }
            ul#navigation {
                list-style: none;
                background: gray;
                margin: 0.1em;
                padding: 0;
            }
            ul#navigation li {
                float: left;
                margin: 0.4em;
            }
            ul#navigation li a {
                padding: 0.3em;
            }
            ul#navigation li a:link {
                background: gray;
            }
            ul#navigation li a:active {
                background: orange;
            }
            ul#navigation li a:visited {
                background: black;
            }
            ul#navigation li a:hover, li a:focus {
                background: white;
                color: black;
            }
            ul#navigation div {
                position: absolute;
                right: 0;
                top: 0;
                background: gray;
                display: none; 
            }
            ul#navigation li:hover > div {
                display: block;
            }
            
            ul#top li a {
                color: #eee;   
            }
        </style>
    </head>
    <body>
        <ul id="navigation">
            <li>
                <a href="">home</a>
                <div>home</div>
            </li>
            <li>
                <a href="">contact us</a>
                <div>contact us.</div>
            </li>
            <li>
                <a href="">products</a>
                <div>product</div>
            </li>
            <li>
                <a href="">services</a>
                <div>service</div>
            </li>
            <li>
                <a href="">faq</a>
                <div>faq</div>
            </li>
        </ul>
    </body>
</html>



Horizontal tab bar

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
      <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
      <meta http-equiv="content-language" content="en-us" />
        <style type="text/css">
            ul#navigation {
                list-style: none;
                background: gray;
                margin: 0.1em;
                padding: 0;
            }
            ul#navigation li {
                float: left;
                margin: 0.4em;
            }
            ul#navigation li a {
                padding: 0.3em;
            }
            ul#navigation li a:link {
                background: gray;
            }
            ul#navigation li a:active {
                background: orange;
            }
            ul#navigation li a:visited {
                background: black;
            }
            ul#navigation li a:hover, li a:focus {
                background: white;
                color: black;
            }
        </style>
    </head>
    <body>
        <ul id="navigation">
            <li><a href="">home</a></li>
            <li><a href="">contact us</a></li>
            <li><a href="">products</a></li>
            <li><a href="">services</a></li>
            <li><a href="">faq</a></li>
        </ul>
    </body>
</html>



Simple Tab Menu

 

<!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">
<head>
<title>Simple Tab Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer {
  background: #bbb;
  padding: 10px;
}
#content {
  width: 700px;
  min-height: 300px;
  border: 1px solid #eee;
}
* html #content {
  height: 300px;
}
#tab {
  line-height: 2em
}
#tab a {
  color: #fff;
  padding: 0 10px;
  border: 1px solid #fff;
  text-transform: uppercase;
  border-bottom: none;
  position: relative;
  top: 4px;
  height: 20px;
  text-decoration: none;
  top: 2px;
  height: auto;
  padding: 3px 10px 4px;
}
#tab a:hover {
  background: #bbb
}
#tab a.current {
  background: #aaa;
  color: #ddd;
}
#subnav {
  background: #999;
  height: 2em;
  color: white;
  padding: 5px 5px;
}
#subnav a {
  color: white;
  text-decoration: none;
}
#subnav a:hover {
  color: red
}
</style>
</head>
<body>
<div id="outer"> 
  <div id="tab">
    <a class="current" href="#">Home</a> 
    <a href="#">About us</a> 
    <a href="#">Contact</a> 
    <a href="#">links </a>
  </div>
  <div id="content"> 
    <div id="subnav">
       <a href="#">Link 1</a> | 
       <a href="#">Link 2</a> | 
       <a href="#">Link 3</a> | 
       <a href="#">Link 4</a> 
    </div>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</div>
</body>
</html>



Simple Tab Menu with UL LI

 

<!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">
<head>
<title>Simple Tab Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul {
  list-style: none;
}
#outer {
  background: #88B3AD;
  padding: 10px;
  margin: 10px;
}
#content {
  width: 700px;
  min-height: 300px;
  border: 1px solid #ccc;
}
ul#tab {
  line-height: 2em
}
ul#tab a {
  color: #fff;
  background: red;
  border: 1px solid #aaa;
  text-transform: uppercase;
  border-bottom: none;
  position: relative;
  padding: 3px 10px 4px;
  top: 2px;
  text-decoration: none;
}
ul#tab a:hover,ul#tab a.current {
  background: #669;
  color: #FFE6B7;
  padding-bottom: 5px;
}
ul#subnav {
  background: #669;
  height: 2em;
  color: white;
  padding: 5px 5px;
}
ul#subnav li,ul#tab li {
  display: inline
}
ul#subnav a {
  color: white;
  text-decoration: none;
}
ul#subnav a:hover {
  color: #FFE6B7
}
</style>
</head>
<body>
<div id="outer">
  <ul id="tab">
    <li><a class="current" href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">links </a></li>
  </ul>
  <div id="content">
    <ul id="subnav">
      <li><a href="#">Link One</a> |</li>
      <li> <a href="#">Link 2</a> |</li>
      <li> <a href="#">Link 3</a> | </li>
      <li> <a href="#">Link 4</a> </li>
    </ul>
  </div>
</div>
</body>
</html>



Tab bar with bottom image

 

<!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" lang="en" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Lists</title>
  <style type="text/css" media="screen">
  #myNav #minitabs {
    margin: 0;
    padding: 0 0 20px 10px;
    border-bottom: 1px solid #9FB1BC;
  }
  
  #myNav #minitabs li {
    margin: 0; 
    padding: 0;
    display: inline;
    list-style-type: none;
    }
    
  #myNav #minitabs a {
    float: left;
    line-height: 14px;
    font-weight: bold;
    font-size: 10px;
    padding: 0 12px 6px 12px;
    text-decoration: none;
    color: #708491;
    }
  
  #myNav #minitabs a.active, #myNav #minitabs a:hover {
    color: #000;
  }  
  </style>
</head>
<body>

<div id="myNav">
  <ul id="minitabs">
    <li><a href="">A Item</a></li>
    <li><a href="">B Item</a></li>
    <li><a href="" class="active">C Item</a></li>
    <li><a href="">D Item</a></li>
  </ul>
</div>

</body>
</html>



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>



Tab menu with bottom bar highlight

 

<!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" lang="en" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Lists</title>
  <style type="text/css" media="screen">
  
  #divID #minitabs {
    margin: 0;
    padding: 0 0 20px 10px;
    border-bottom: 1px solid #696;
    }
  
  #divID #minitabs li {
    margin: 0; 
    padding: 0;
    display: inline;
    list-style-type: none;
    }
  
  #divID #minitabs a {
    float: left;
    line-height: 14px;
    font-weight: bold;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    font-size: 10px;
    color: #9c9;
    }
  
  #divID #minitabs a.active {
    border-bottom: 4px solid #696;
    padding-bottom: 2px;
    color: #363;
    }
  
  #divID #minitabs a:hover {
    color: #696;
  }
  </style>
</head>
<body>

<div id="divID">
  <ul id="minitabs">
    <li><a href="">A Item</a></li>
    <li><a href="">B Item</a></li>
    <li><a href="" class="active">C Item</a></li>
    <li><a href="">D Item</a></li>
  </ul>
</div>

</body>
</html>



Use UL and LI to create tab bar

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#tabContainer {
  padding: 25px 15px 0 15px;
  background: #67A897;
}
ul#topTab {
  list-style-type: none;
  width: 100%;
  position: relative;
  height: 27px;
  font-size: 13px;
  font-weight: bold;
  margin: 0;
  padding: 11px 0 0 0;
}
ul#topTab li {
  display: block;
  float: left;
  margin: 0 0 0 4px;
  height: 27px;
}
ul#topTab li.left {
  margin: 0;
}
ul#topTab li a {
  display: block;
  float: left;
  color: #fff;
  background: #4A6867;
  line-height: 27px;
  text-decoration: none;
  padding: 0 17px 0 18px;
  height: 27px;
}
ul#topTab li a.right {
  padding-right: 19px;
}
ul#topTab li a:hover {
  background: #2E4560;
}
ul#topTab li a.current {
  color: #2E4560;
  background: #fff;
}
ul#topTab li a.current:hover {
  color: #2E4560;
  background: #fff;
}
</style>
</head>
<body>
    <div id="tabContainer">
        <ul id="topTab">
            <li><a href="" title="Home" class="current">Home</a></li>
            <li><a href="" title="Home">Resources</a></li>
            <li><a href="" title="Home">Inspiration</a></li>
            <li><a href="" title="Home">Forums</a></li>
            <li><a href="" title="Home">About Us</a></li>
            <li><a href="" title="Home">Contact Us</a></li>
        </ul>
    </div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Controls/tab&oldid=5407»