HTML/CSS/CSS Controls/tab — различия между версиями

Текущая версия на 08:16, 26 мая 2010

Содержание

1 Anchor based tab
2 CSS only tab bar with content
3 CSS tab
4 Dynamic tab without javascript
5 Horizontal tab bar
6 Simple Tab Menu
7 Simple Tab Menu with UL LI
8 Tab bar with bottom image
9 Tab list box
10 Tab menu with bottom bar highlight
11 Use UL and LI to create tab bar

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>

HTML/CSS/CSS Controls/tab — различия между версиями

Текущая версия на 08:16, 26 мая 2010

Содержание

Anchor based tab

CSS only tab bar with content

CSS tab

Dynamic tab without javascript

Horizontal tab bar

Simple Tab Menu

Simple Tab Menu with UL LI

Tab bar with bottom image

Tab list box

Tab menu with bottom bar highlight

Use UL and LI to create tab bar

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Версия 09:21, 26 мая 2010 (просмотреть исходный код) (обсуждение) ← Предыдущая правка	Текущая версия на 08:16, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)