Web Design Basics
Tutorials
Web Products
Tabbed Navigation
This tutorial will teach you how to make a tabbed navigation for your site using lists and css.
- HTML and CSS: Design and Build Websites
- A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics
- HTML and CSS: Visual QuickStart Guide
- Head First HTML and CSS
- HTML & CSS: A Beginner's Guide
- JavaScript & JQuery: Interactive Front-End Web Development
- CSS3: The Missing Manual
- Murach's HTML5 and CSS3
To begin, create a new .html document, and add the following information into the <head> section of your page.
| <style type="text/css">
#tabs{ padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; font-weight:bold; } #tabs ul{ list-style:none; margin:0; padding:0; } #tabs ul li{ display:inline; margin:0; text-transform:capitalize; } #tabs ul li a{ padding:5px 16px; color:#FFF; background:#E7A272; float:left; text-decoration:none; border:1px solid #D17B40; border-left:0; margin:0; text-transform:capitalize; } #tabs ul li a:hover{ background:#EAEAEA; color:#7F9298; text-decoration:none; border-bottom:1px solid #EAEAEA; } #tabs ul li a.active{ background:#EAEAEA; color:#7F9298; border-bottom:1px solid #EAEAEA; } #content{ background:#EAEAEA; clear:both; font-size:11px; color:#000; padding:10px; font-family:Arial, Helvetica, sans-serif; } </style> |
This code gives us the styling we need to make out navigation tabs. It uses lists, and each part of the list has been styled to create the tab like effect.
Feel free to modify/experiment with any of the above code to suit your needs.
After you have added that, create a div with the tabs id, and make a list with links inside. My example is shown below.
| <div id='tabs'>
<ul> <li><a href='#'>Home</a></li> <li><a href='#'>Forums</a></li> <li><a href='#' class='active'>Tutorials</a></li> <li><a href='#'>Downloads</a></li> <li><a href='#'>Links</a></li> </ul> </div> <div id='content'>Your main content goes here!</div> |
This will create something VERY similar to the menu we have here at TutorialFx.com. My final example is here.
Good luck!
SHARE THIS POST
subscribe to newsletter