Simple Tabbed Navigation with CSS

I had to create some tabbed navigation for a project at work recently. Not anything new really, lots of people implement it in lots of different ways. A colleague recommended a method demonstrated on SimpleBits for creating simplified css tabs however it uses background images to get the tab effect and I don't like that.

I'd much prefer to use a pure CSS method that doesn't involve editing an image if I want to make changes. So here I have it, a simple CSS only method of doing tabbed navigation. I've tested it in IE6, IE7, FF2, Opera 9 and Safari 3.1, all fine.

You can view/download the example here: Simple CSS Tabbed Navigation (to download: right click > save link as)

OR copy the code from below.

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.   <title>CSS Tabbed Navigation</title>
  3.     /*
  4.       First, a very minimal css reset as I don't
  5.       want any default margins or padding messing
  6.       up the layout.
  7.     */
  8.     h1, ul{margin:0;padding:0;}
  9.  
  10.     body{background-color:#eee;}
  11.  
  12.     /*
  13.       the main wrapper controls the overall width of the page and centers it
  14.     */
  15.     #wrapper{
  16.       width: 800px;
  17.       margin: 0 auto;
  18.     }
  19.  
  20.     /*
  21.       Here you can change the tab border and background in one place
  22.     */
  23.     #page, #tabs li a{
  24.       background-color:#fff;
  25.       border:solid 1px #333;
  26.     }
  27.  
  28.     /*
  29.       The important thing here is that bottom:-1px
  30.       This pulls the page element up to sit flush
  31.       with the bottom of the list items while the .active
  32.       list item is allowed to overlap the top border of the
  33.       page element by 1px.
  34.     */
  35.     #tabs{
  36.       float:left; /* makes the positioning work properly in IE */
  37.       list-style-type:none;
  38.       position:relative;
  39.       bottom:-1px;
  40.     }
  41.  
  42.     /*
  43.       make the tabs line up horizontally and space them out
  44.     */
  45.     #tabs li{
  46.       float:left;
  47.       margin:0 0 0 5px;
  48.       display:inline; /*fixes double margin (IE bug)*/
  49.     }
  50.  
  51.     /*
  52.       not too much going on here
  53.       just makes the link expand
  54.       to fill the tab
  55.     */
  56.     #tabs li a{
  57.       display:block;
  58.       line-height:24px;
  59.       padding:0 10px;
  60.       text-decoration:none;
  61.       border-bottom:none;
  62.     }
  63.  
  64.     /*
  65.       this makes the active tab protrude
  66.       1px more than the other tabs,
  67.       thus allowing it to cover the top
  68.       border of the page element.
  69.     */
  70.     #tabs li a.active{
  71.       padding-bottom:1px;
  72.     }
  73.  
  74.     /*
  75.       force the page element to sit beneath the floated list
  76.     */
  77.     #page{
  78.       clear:both;
  79.       padding: 10px;
  80.     }
  81.   </style>
  82.   </head>
  83.   <div id="wrapper">
  84.     <ul id="tabs">
  85.       <li><a class="active" href="#tab1">Tab 1</a></li>
  86.       <li><a href="#tab2">Tab 2</a></li>
  87.       <li><a href="#tab3">Tab 3</a></li>
  88.     </ul>
  89.     <div id="page">
  90.       <h1>Simple Tabbed Navigation with CSS</h1>
  91.       <p>
  92.       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elementum nulla. Vivamus ut sem sed turpis condimentum ultricies. Sed volutpat cursus sapien. Nulla arcu. Donec laoreet semper neque. Quisque elit purus, vestibulum sed, dignissim et, faucibus sit amet, magna. Donec lectus massa, facilisis eu, dictum eu, aliquet at, ante. Maecenas ut pede. Vestibulum fermentum pretium velit. Curabitur sit amet leo. Proin ultrices, tortor vitae bibendum ultrices, tortor turpis vestibulum nulla, a malesuada orci nibh ac nisi.
  93.       </p>
  94.     </div>
  95.   </div>
  96. </body>
  97. </html>

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>