michaelsinterface.de

css.tabmenu

  • Ein horizontales CSS-Tabmenü, aktuell in 16 Farb-Variationen.
  • tabmenu 1
  • tabmenu 2
  • tabmenu 3
  • tabmenu 4
  • tabmenu 5
  • tabmenu 6
  • tabmenu 7
  • tabmenu 8
  • tabmenu 9
  • tabmenu 10
  • tabmenu 11
  • tabmenu 12
  • tabmenu 13
  • tabmenu 14
  • tabmenu 15
  • tabmenu 16
Quellcode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.tabmenu:::</title>

<style type="text/css">
<!--
div.wrapper {
margin:10px 80px 20px 80px;
font:bold 11px verdana, sans-serif;
}
/* ****** TABMENU 1 ****** */
ul#tabmenu1 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #cdd3dc;
}
ul#tabmenu1 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu1 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #cdd3dc;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu1 li a:link, ul#tabmenu1 li a:visited {
color:#cdd3dc;
}
ul#tabmenu1 li a#current_tabm1, ul#tabmenu1 li a#current_tabm1:hover, ul#tabmenu1 li a:hover {
color:#85A0B8;
background:#d3dae3;
border-color:#85A0B8;
}
/* ****** TABMENU 2 ****** */
ul#tabmenu2 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #aac0d5;
}
ul#tabmenu2 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu2 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #aac0d5;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu2 li a:link, ul#tabmenu2 li a:visited {
color:#889cb8;
}
ul#tabmenu2 li a#current_tabm2, ul#tabmenu2 li a#current_tabm2:hover, ul#tabmenu2 li a:hover {
color:#616d80;
background:#aac0d5;
border-color:#616d80;
}
/* ****** TABMENU 3 ****** */
ul#tabmenu3 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #91a3bc;
}
ul#tabmenu3 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu3 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #91a3bc;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu3 li a:link, ul#tabmenu3 li a:visited {
color:#91a3bc;
}
ul#tabmenu3 li a#current_tabm3, ul#tabmenu3 li a#current_tabm3:hover, ul#tabmenu3 li a:hover {
color:#fff;
background:#91a3bc;
border-color:#3c4e68;
}
/* ****** TABMENU 4 ****** */
ul#tabmenu4 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #6b7e9d;
}
ul#tabmenu4 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu4 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #6b7e9d;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu4 li a:link, ul#tabmenu4 li a:visited {
color:#6b7e9d;
}
ul#tabmenu4 li a#current_tabm4, ul#tabmenu4 li a#current_tabm4:hover , ul#tabmenu4 li a:hover {
color:#fff;
background:#6b7e9d;
border-color:#23385a;
}
/* ****** TABMENU 5 ****** */
ul#tabmenu5 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #ffbf00;
}
ul#tabmenu5 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu5 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #ffbf00;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu5 li a:link, ul#tabmenu5 li a:visited {
color:#ffbf00;
}
ul#tabmenu5 li a#current_tabm5, ul#tabmenu5 li a#current_tabm5:hover, ul#tabmenu5 li a:hover {
color:#fff;
background:#ffbf00;
border-color:#ff5f00;
}
/* ****** TABMENU 6 ****** */
ul#tabmenu6 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #ff7f00;
}
ul#tabmenu6 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu6 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #ff7f00;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu6 li a:link, ul#tabmenu6 li a:visited {
color:#ff7f00;
}
ul#tabmenu6 li a#current_tabm6, ul#tabmenu6 li a#current_tabm6:hover, ul#tabmenu6 li a:hover {
color:#fff;
background:#ff7f00;
border-color:#FF1F00;
}
/* ****** TABMENU 7 ****** */
ul#tabmenu7 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #ff3f00;
}
ul#tabmenu7 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu7 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #ff3f00;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu7 li a:link, ul#tabmenu7 li a:visited {
color:#ff3f00;
}
ul#tabmenu7 li a#current_tabm7, ul#tabmenu7 li a#current_tabm7:hover, ul#tabmenu7 li a:hover {
color:#fff;
background:#ff3f00;
border-color:#9f0000;
}
/* ****** TABMENU 8 ****** */
ul#tabmenu8 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #00C615;
}
ul#tabmenu8 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu8 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #00C615;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu8 li a:link, ul#tabmenu8 li a:visited {
color:#00C615;
}
ul#tabmenu8 li a#current_tabm8, ul#tabmenu8 li a#current_tabm8:hover, ul#tabmenu8 li a:hover {
color:#fff;
background:#00C615;
border-color:#007f00;
}
/* ****** TABMENU 9 ****** */
ul#tabmenu9 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #007F00;
}
ul#tabmenu9 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu9 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #007F00;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu9 li a:link, ul#tabmenu9 li a:visited {
color:#007F00;
}
ul#tabmenu9 li a#current_tabm9, ul#tabmenu9 li a#current_tabm9:hover, ul#tabmenu9 li a:hover {
color:#fff;
background:#007F00;
border-color:#003f00;
}
/* ****** TABMENU 10 ****** */
ul#tabmenu10 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #00470E;
}
ul#tabmenu10 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu10 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #00470E;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu10 li a:link, ul#tabmenu10 li a:visited {
color:#00470E;
}
ul#tabmenu10 li a#current_tabm10, ul#tabmenu10 li a#current_tabm10:hover, ul#tabmenu10 li a:hover {
color:#fff;
background:#00470E;
border-color:#000f00;
}
/* ****** TABMENU 11 ****** */
ul#tabmenu11 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #4dd3ff;
}
ul#tabmenu11 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu11 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #4dd3ff;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu11 li a:link, ul#tabmenu11 li a:visited {
color:#4dd3ff;
}
ul#tabmenu11 li a#current_tabm11, ul#tabmenu11 li a#current_tabm11:hover, ul#tabmenu11 li a:hover {
color:#fff;
background:#4dd3ff;
border-color:#006080;
}
/* ****** TABMENU 12 ****** */
ul#tabmenu12 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #088CCE;
}
ul#tabmenu12 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu12 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #088CCE;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu12 li a:link, ul#tabmenu12 li a:visited {
color:#088CCE;
}
ul#tabmenu12 li a#current_tabm12, ul#tabmenu12 li a#current_tabm12:hover, ul#tabmenu12 li a:hover {
color:#fff;
background:#088CCE;
border-color:#004F6D;
}
/* ****** TABMENU 13 ****** */
ul#tabmenu13 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #25569a;
}
ul#tabmenu13 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu13 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #25569a;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu13 li a:link, ul#tabmenu13 li a:visited {
color:#25569a;
}
ul#tabmenu13 li a#current_tabm13, ul#tabmenu13 li a#current_tabm13:hover, ul#tabmenu13 li a:hover {
color:#fff;
background:#25569a;
border-color:#02052e;
}
/* ****** TABMENU 14 ****** */
ul#tabmenu14 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #909090;
}
ul#tabmenu14 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu14 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #909090;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu14 li a:link, ul#tabmenu14 li a:visited {
color:#909090;
}
ul#tabmenu14 li a#current_tabm14, ul#tabmenu14 li a#current_tabm14:hover, ul#tabmenu14 li a:hover {
color:#fff;
background:#909090;
border-color:#404040;
}
/* ****** TABMENU 15 ****** */
ul#tabmenu15 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #505050;
}
ul#tabmenu15 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu15 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #505050;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu15 li a:link, ul#tabmenu15 li a:visited {
color:#505050;
}
ul#tabmenu15 li a#current_tabm15, ul#tabmenu15 li a#current_tabm15:hover, ul#tabmenu15 li a:hover {
color:#fff;
background:#505050;
border-color:#101010;
}
/* ****** TABMENU 16 ****** */
ul#tabmenu16 {
margin:0;
padding:3px 10px;
border-bottom:1px solid #101010;
}
ul#tabmenu16 li {
margin:0;
list-style:none;
display:inline;
}
ul#tabmenu16 li a {
margin-left:3px;
padding:3px 5px;
background:#fafafa;
border:1px solid #101010;
border-bottom:none;
text-decoration:none;
}
ul#tabmenu16 li a:link, ul#tabmenu16 li a:visited {
color:#101010;
}
ul#tabmenu16 li a#current_tabm16, ul#tabmenu16 li a#current_tabm16:hover, ul#tabmenu16 li a:hover {
color:#fff;
background:#101010;
border-color:#000;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <ul id="tabmenu1">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm1">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu2">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm2">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu3">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm3">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu4">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm4">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu5">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm5">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu6">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm6">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu7">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm7">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu8">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm8">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu9">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm9">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu10">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm10">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu11">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm11">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu12">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm12">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu13">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm13">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu14">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm14">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu15">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm15">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>
<div class="wrapper">
     <ul id="tabmenu16">
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#" id="current_tabm16">Lab</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Resources</a></li>
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>

</body>
</html>