CSS: Classic CSS Tab Bar

Author: MikeW    Date: 2016-06-05 19:04   

This page is a demo of a classic Tab bar using CSS. The code if fairly straightforward. However, this is no a responsive design as the tabs do no look good when the viewing area is shrunk.


Here is what it looks like with 6 tabs.

Source Code

Here is the source code with a link to downloadable text.

 9 <div id="TaskBarDemo">
10 <style>
11 #NavList{ padding:1em 1em 0em 1em; margin:0; font-family: Verdana, Arial, sans-serif; font-weight: normal; font-size: 1.2em; }
12 #NavList ul{ margin:0; padding:1em 1em 0.2em 1em; background-color:white;}
13 #NavList li{ list-style: none; display:inline; padding:0; }
14 #NavList li a{ padding:0.2em; margin:0; margin-left:0.2em; border: 2px solid black; border-bottom:none; background:lightgray; text-decoration: none; color:black; }
15 #NavList li a:link { color:black; }
16 #NavList li a:visited { color:black; }
17 #NavList li a:hover { background:#EAEAEA; text-decoration: underline; cursor:pointer; }
18 #NavList li a#current{ background: white;}
19 </style>
21 <div id="NavList">
22   <ul>
23     <li><a href="#Tab1">Tab1</a></li>
24     <li><a href="#Tab2">Tab 2</a></li>
25     <li><a href="#Tab3">Tab 3</a></li>
26     <li><a href="#Tab4">Tab 4</a></li>
27     <li><a href="#Tab5">Tab 5</a></li>
28     <li><a href="#Tab6">Tab 6</a></li>
29   </ul>
30 </div>
32 </div>

Source Code text