Tabs are getting more and more popular in Web design. And many sites will recommend using JavaScript to create the tabbed navigation automatically. But it's possible to create a tabbed navigation using just HTML codes and CSS.
Use a Unique Page ID
By identifying each page on your site with a unique ID you can create tabbed navigation and style page elements based on the page. While it's quite possible to do this with inline styles, there are many reasons why you might want to avoid inline styles for your Web pages. A page ID allows you to create page-specific effects within an external style sheet.
To create page IDs you use the id attribute on the body tag of your Web page:
<body id="homepage">
Create Your Tabs with an Unordered List
Once you have a page ID, add your tabs to the page using an unordered list. You can create a horizontal tab menu or a vertical tab menu. For my example, I will create a horizontal tab menu across the top of the page.
<ul id="tabs">
<li id="tab1"><a href="ztab1.htm">Tab 1</a></li>
<li id="tab2"><a href="ztab2.htm">Tab 2</a></li>
<li id="tab3"><a href="ztab3.htm">Tab 3</a></li>
<li id="tab4"><a href="ztab4.htm">Tab 4</a></li>
</ul>
As you can see, I've given the UL an id as well as each tab (LI). That makes it possible to connect each tab with the page ID in my CSS. I use the CSS from the horizontal menu template to turn the list into a menu:
#tabs {
border-bottom: .5em solid #03c;
margin: 0;
padding: 0;
}
#tabs li {
display:inline;
border-top: .1em solid #03c;
border-left: .1em solid #03c;
border-right: .1em solid #03c;
}
#tabs li a {
text-decoration: none;
padding: 0.25em 1em;
color: #000;
}
Match the Page ID with the Tab ID in the CSS
This basic menu will work on most Web pages, but to turn it into a tabbed menu bar, you need to add CSS that combines the page ID with the tab ID.
#page1 #tabs li#tab1 a, #page2 #tabs li#tab2 a, #page3 #tabs li#tab3 a, .page4 #tab4 a{
padding: 0.25em 1em;
background-color: #03c;
color: #fff;
}
I match the page id (#page1) with the tab id (#tab1) in a descendant CSS selector. In the above style property, I made the style very specific. But it's not required that it be that specific. You can connect the IDs with just the body ID and the tab ID as a descendant.
#page1 #tab1 a, #page2 tab2 a{ ... }
And because each tab is identical, I can use commas to separate the selectors and ensure the same styles for each tab.
Use a Body Class Instead of an ID
If you don't want to ID your body tag, you can do the same thing with a unique class on the body tag:
<body class="page4">
Then call the CSS in a similar way to when you use the ID, but use a class selector:
.page4 #tab4 a{ ... }
