HTML/CSS/CSS Controls/tab

Содержание

1 Anchor based tab
2 CSS only tab bar with content
3 CSS tab
4 <a href="http://www.wbex.ru">link</a>
5 Dynamic tab without javascript
6 Horizontal tab bar
7 Simple Tab Menu
8 Simple Tab Menu with UL LI
9 Tab bar with bottom image
10 Tab list box
11 Tab menu with bottom bar highlight
12 Use UL and LI to create tab bar

Anchor based tab

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Styling <body></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">

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>

</body> </html>

</source>

CSS only tab bar with content

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>

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">

</body> </html>

</source>

CSS tab

   <source lang="html4strict">

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>

<a href="http://www.wbex.ru" id="current">Home</a>
<a href="http://www.wbex.ru">Products</a>
<a href="http://www.wbex.ru">Services</a>
<a href="http://www.wbex.ru">About Us</a>
<a href="http://www.wbex.ru">Contact</a>

<a href="http://www.wbex.ru">link</a>

Text <a href="http://www.wbex.ru">Link</a>

Text.

Text <a href="http://www.wbex.ru">Link</a>

</body> </html>

</source>

Dynamic tab without javascript

   <source lang="html4strict">

<!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>

   </body>

</html>

</source>

Horizontal tab bar

   <source lang="html4strict">

<!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>

   </body>

</html>

</source>

Simple Tab Menu

   <source lang="html4strict">

<!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>

   <a class="current" href="#">Home</a> 
   <a href="#">About us</a> 
   <a href="#">Contact</a> 
   <a href="#">links </a>

      <a href="#">Link 1</a> | 
      <a href="#">Link 2</a> | 
      <a href="#">Link 3</a> | 
      <a href="#">Link 4</a>

item
item
item
item
item
item
item
item
item
item

</body> </html>

</source>

Simple Tab Menu with UL LI

   <source lang="html4strict">

<!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>

<a class="current" href="#">Home</a>
<a href="#">About us</a>
<a href="#">Contact</a>
<a href="#">links </a>

<a href="#">Link One</a> |
<a href="#">Link 2</a> |
<a href="#">Link 3</a> |
<a href="#">Link 4</a>

</body> </html>

</source>

Tab bar with bottom image

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <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>

<a href="">A Item</a>
<a href="">B Item</a>
<a href="" class="active">C Item</a>
<a href="">D Item</a>

</body> </html>

</source>

Tab list box

   <source lang="html4strict">

<!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);">

<a href="#" id="tab1" onclick="selectTab(1); return false;" onfocus="blur();">Tab 1</a>
<a href="#" id="tab2" onclick="selectTab(2); return false;" onfocus="blur();">Tab 2</a>
<a href="#" id="tab3" onclick="selectTab(3); return false;" onfocus="blur();">Tab 3</a>
<a href="#" id="tab4" onclick="selectTab(4); return false;" onfocus="blur();">Tab 4</a>

this is a test. this is a test.

 </div>

</body> </html>

</source>

Tab menu with bottom bar highlight

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <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>

<a href="">A Item</a>
<a href="">B Item</a>
<a href="" class="active">C Item</a>
<a href="">D Item</a>

</body> </html>

</source>

Use UL and LI to create tab bar

   <source lang="html4strict">

<!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>

<a href="" title="Home" class="current">Home</a>
<a href="" title="Home">Resources</a>
<a href="" title="Home">Inspiration</a>
<a href="" title="Home">Forums</a>
<a href="" title="Home">About Us</a>
<a href="" title="Home">Contact Us</a>

</body> </html>

</source>

HTML/CSS/CSS Controls/tab

Содержание

Anchor based tab

CSS only tab bar with content

CSS tab

<a href="http://www.wbex.ru">link</a>

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

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты