Simple Tabbed Navigation with CSS

May 9th, 2008 | Design & Development |

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.

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4.   <title>CSS Tabbed Navigation</title>
  6.     /*
  7.       First, a very minimal css reset as I don't
  8.       want any default margins or padding messing
  9.       up the layout.
  10.     */
  11.     h1, ul{margin:0;padding:0;}
  12.  
  13.     body{background-color:#eee;}
  14.  
  15.     /*
  16.       the main wrapper controls the overall width of the page and centers it
  17.     */
  18.     #wrapper{
  19.       width: 800px;
  20.       margin: 0 auto;
  21.     }
  22.  
  23.     /*
  24.       Here you can change the tab border and background in one place
  25.     */
  26.     #page, #tabs li a{
  27.       background-color:#fff;
  28.       border:solid 1px #333;
  29.     }
  30.  
  31.     /*
  32.       The important thing here is that bottom:-1px
  33.       This pulls the page element up to sit flush
  34.       with the bottom of the list items while the .active
  35.       list item is allowed to overlap the top border of the
  36.       page element by 1px.
  37.     */
  38.     #tabs{
  39.       float:left; /* makes the positioning work properly in IE */
  40.       list-style-type:none;
  41.       position:relative;
  42.       bottom:-1px;
  43.     }
  44.  
  45.     /*
  46.       make the tabs line up horizontally and space them out
  47.     */
  48.     #tabs li{
  49.       float:left;
  50.       margin:0 0 0 5px;
  51.       display:inline; /*fixes double margin (IE bug)*/
  52.     }
  53.  
  54.     /*
  55.       not too much going on here
  56.       just makes the link expand
  57.       to fill the tab
  58.     */
  59.     #tabs li a{
  60.       display:block;
  61.       line-height:24px;
  62.       padding:0 10px;
  63.       text-decoration:none;
  64.       border-bottom:none;
  65.     }
  66.  
  67.     /*
  68.       this makes the active tab protrude
  69.       1px more than the other tabs,
  70.       thus allowing it to cover the top
  71.       border of the page element.
  72.     */
  73.     #tabs li a.active{
  74.       padding-bottom:1px;
  75.     }
  76.  
  77.     /*
  78.       force the page element to sit beneath the floated list
  79.     */
  80.     #page{
  81.       clear:both;
  82.       padding: 10px;
  83.     }
  84.   </style>
  85.   </head>
  87.   <div id="wrapper">
  88.     <ul id="tabs">
  89.       <li><a class="active" href="#tab1">Tab 1</a></li>
  90.       <li><a href="#tab2">Tab 2</a></li>
  91.       <li><a href="#tab3">Tab 3</a></li>
  92.     </ul>
  93.     <div id="page">
  94.       <h1>Simple Tabbed Navigation with CSS</h1>
  95.       <p>
  96.       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.
  97.       </p>
  98.     </div>
  99.   </div>
  100. </body>
  101. </html>


Leave a Reply