List of Topics

SfC Home > Web Design >

 

Simple Tab Navigation

by Ron Kurtus (14 September 2013)

Many websites use tabs above the content area for navigation to other pages and sections. A simple version is seen in the School for Champions website.

The first things to do is to define a design scheme for the tabs.

A tab container DIV ID tag is placed in the page HTML between the header DIV tag and main content DIV. A simple list is coded in HTML Then the CSS used for the page defines the tabs, colors, and borders.

Questions you may have include:

This lesson will answer those questions.



Scheme for tabs

A DIV container for the tabs is placed below the header and above the main content DIVs.

The CSS code defines the tabs size, colors, and borders.

For the design, I set the tabs colored gray with black text. The active tab will be white. The background of the tab container is same as page background. Each tab has a border that is the same color as the content border, except for the bottom of the active tab, which is white.

HTML code for tabs

The HTML code for the tabs is very simple. The <div id="tab_container"> code follows the <div id="header"> ... </div> code and precedes the <div id="container"> ... </div> code.

<div id="tab_container">

<ul id="tab_menu">
<li><a class="active" href="this_page.htm">Lesson</a></li>
<li><a href="mini-quiz_this_page.htm">Mini-Quiz</a></li>
<li><a href="feedback.cfm?tab=this_page">Feedback Comments</a></li>
</ul>

</div>

CSS code

The code in the cascading style sheet (CSS) for the page defines position, size, margins, colors and borders for the tabs. Certain items are explaed as notes.

Tab container

#tab_container {
position: relative;
width:1000px; /* width of page container */
margin:0 auto;
text-align:left;
padding: 0px;
background-color:#FFFADD; / * color of page background - light yellow */
border-bottom-color:#FFF; /* color of page - white */
}

Tab menu

#tab_menu {
border-bottom: 1px solid #003300; /* same as border of main container */
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1; /* stack order of items */
padding-left: 10px;
}

List definitions

#tab_menu li {
display: inline;
overflow: hidden;
list-style-type: none;
}

Tabs including active

#tab_menu a, a.active {
color: #000; /* black text for all tabs */
background: #CCC; /* gray background of tabs */
font: bold 1em Arial, sans-serif;
border: 2px solid #003300; /* same as border of main container */
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none;
}

Active tab

#tab_menu a.active {
background: #FFF; /* white background of active tab */
border-bottom: 2px solid #FFF; /* white bottom border of active tab */
}

Summary

The first things to do to add tabs above the content area for navigation is to define a design scheme for the tabs.

Add a tab container DIV ID tag between the header DIV tag and main content DIV. A simple list is coded in HTML Then use CSS for the page to define the tabs, colors, and borders.


Seek improvement


Resources and references

Ron Kurtus' Credentials

Websites

Web Design Resources

Books

Top-rated books on Website Design


Questions and comments

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. I will try to get back to you as soon as possible.


Share

Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:

 

Students and researchers

The Web address of this page is:
www.school-for-champions.com/web/
simple_tab_navigation.htm

Please include it as a link on your website or as a reference in your report, document, or thesis.

Copyright © Restrictions


Where are you now?

School for Champions

Web Design topics

Simple Tab Navigation




Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



The School for Champions helps you become the type of person who can be called a Champion.