CSS Tabbed Navigation - Correct Approach?

I'm trying to create a tabbed navigational menu using HTML and CSS.

I have 6 pages and I put the navigation menu in each page - is this the correct approach? It seems like it would be more efficient to load the nav menu once, then load the appropriate body when the corresponding tab is clicked.

My 6 pages contain the following HTML (the class is the only thing that varies depending on the page - e.g. in the page-3.html, the code below would have the active class moved to look like this:

<li id="tab-page-3"><a href="page-3.html">PAGE 3</a></li>

Code (markup):

.

The problem I'm having is that the whole page turns white for a second as the new page is loaded. I want the navigation menu to look static. I'm I going about this the correct way?

Please help!
Thank you!!

Here's the HTML:

<ul id="nav" class="nav">
			<li class="active" id="tab-home"><a href="home.html">HOME</a></li>
			<li id="tab-page-1"><a href="page-1.html">PAGE 1</a></li>
			<li id="tab-page-2"><a href="page-2.html">PAGE 2</a></li>
			<li id="tab-page-3"><a href="page-3.html">PAGE 3</a></li>
			<li id="tab-page-4"><a href="page-4.html">PAGE 4</a></li>
			<li id="tab-page-5"><a href="page-5.html">PAGE 5</a></li>		
		</ul>

Code (markup):

Here's the CSS:

#nav {
	position: relative;
	height: 33px;
	font-size: .9em;
	background: url(img/nav-bg.gif) top right;
}
		
#nav li {
	position: relative;
	float: left;
	height: 33px;	
	padding-right: 2px;
	background: url(img/nav-divider.gif) top right no-repeat;
}

#tab-home {
	width: 87px;
}
#tab-page-1 {
	width: 118px;
}
#tab-page-2 {
	width: 148px;
}
#tab-page-3 {
	width: 174px;
}
#tab-page-4 {
	width: 139px;
}
#tab-page-5 {
	width: 126px;
}
			
#nav li a {
	width: 100%;
	position: relative;
	float: left;
	font-weight: bold;
	color: #fff;
	padding-top: 10px;
	height: 23px;
	text-transform: uppercase;
}
			
#nav li a:hover, #nav li.active a{
	color: #222;
	text-decoration: none;
}
		
#nav li.active a {
	background: url(img/nav-active.gif) top left;
}

Code (markup):

By the way, each li has an ID so I can resize each tab (the words vary in length).

 

Well there are several approaches you can use, your way being one of them. If you wanted the navigation menue to be loaded just once whenever a new page is requested, you will have to use AJAX to load everything other than the nav tab.

Look through this article it may help you: AJAX Refresh Page

You could use a PHP include to cut down on the code but it would still reload the navigation on each page: PHP Includes Tutorial

 

Thank you for your reply.

I've noticed the page only turns white in FF; works fine in Safari and IE.

Thanks for the PHP article; looks like a great approach.

Is there no common CSS-only solution? I guess the only problem with the one I'm using is that there's a flash of white when the new page loads (seems the cached portion shouldn't have to reload).

Thanks again for your help!