Web Development Tools

I wanted to create a way to use tabbed navigation, with rollover effects and current page indication, without using JavaScript or images. CSS and PHP provided a nice solution and cleaner code.

To create CSS tabs with a rollover effect, use the list elements <ul> and <li> within an id selector. The <ul> acts as a container and the <li>s are floating boxes that hold the navigation tabs individually:

HTML:

< div id="navigationblock">
<ul>
<li class="first"><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
< /div>

CSS:

/* A narrow horizontal container that centers its content */
#navigationblock {
background: #eeeeee;
padding: 2px;
text-align: center;
}

/* "navigation ul" styles turn an UL into a horizontal navigational bar */
#navigationblock ul {
display: inline;
font-size: 12px;
margin: 0; /* removes indent IE and Opera */
padding: 0; /* removes indent Mozilla and NN7 */
}

/* border-left adds a "|" seperator between links */
#navigationblock ul li {
border-left: 1px solid #999999;
display: inline; /* sets orientation across the containing element */
list-style: none; /* turns off display of bullet */
}

/* border-left removes the "|" seperator for the first link */
#navigationblock ul li.first {
border-left: none;
}

/* Adds padding and link color */
#navigationblock a {
color: #666666;
padding: 0.2em 0.5em;
}

/* Changes the background color when the link is hovered */
#navigationblock li a:hover {
background: #dddddd;
text-decoration: none;
}

The above code can be contained in a single document or linked from external documents. I like the linking method.

I link the style sheet to a document called style.css and a use a PHP Include to insert the navigational block into my document. The navigation block is a file named navigation.php that contains the <ul> and <li> tags mentioned above. The HTML looks something like this:

HTML:

< html>
< head>
<title>Company Name</title>
<link href="style.css" rel="stylesheet" type="text/css" />
< /head>
< body>
<div id="topblock">Some HTML code</div>
<div id="navigationblock">
<?php include("navigation.php"); ?>
</div>
<div id="contentblock">Some HTML code</div>
<div id="footerblock">Some HTML code</div>
< /body>
< /html>

Thanks to linked CSS and PHP documents, I can add a link or change the apperance of my navigation by altering these two documents.

Now all I have left to do is to have the navigational bar indiciate which link represents the current page. Meaning, if a user is currently looking a page2.html, the navigational bar should clearly indicate that "Page 2" is the current page by displaying that link with a different background color. PHP offers a great solution.

For starters, I'll add a rule to my CSS file that styles the current page link appropriately.

CSS ADDITION:

/* Changes the background color when PHP says this is the current page */
#navigationblock a#currentpage {
background: #dddddd;
}

Next, I have to add some PHP to my navigation.php file so that the Current Page link is assigned the ID "currentpage".

<ul>
<li class="first"><a href="page1.html"<?php if ($thisPage=="Page 1") echo " id=\"currentpage\""; ?>>Page 1</a></li>
<li><a href="page2.html"<?php if ($thisPage=="Page 2") echo " id=\"currentpage\""; ?>>Page 2</a></li>
<li><a href="page3.html"<?php if ($thisPage=="Page 3") echo " id=\"currentpage\""; ?>>Page 3</a></li>
< /ul>

Lastly, I have to add a single line of PHP to the top of every document to define the name of $thisPage. And while I'm at it, I can also use the delecaration to add the Current Page's name to the TITLE as well. The new HTML looks like this:

HTML:

< ?php $thisPage="Page 2"; ?>
< html>
< head>
<title>Company Name<?php if ($thisPage!="") echo " | $thisPage"?></title>
<link href="style.css" rel="stylesheet" type="text/css" />
< /head>
< body>
<div id="topblock">Some HTML code</div>
<div id="navigationblock">
<?php include("navigation.php"); ?>
</div>
<div id="contentblock">Some HTML code</div>
<div id="footerblock">Some HTML code</div>
< /body>
< /html>

Assuming a user clicks on the page2.html link, PHP will generate the following HTML code:

HTML:

< html>
< head>
<title>Company Name | Page 2</title>
<link href="style.css" rel="stylesheet" type="text/css" />
< /head>
< body>
<div id="topblock">Some HTML code</div>
<div id="navigationblock">
<ul>
<li class="first"><a href="page1.html">Page 1</a></li>
<li><a href="page2.html" id="currentpage">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>
<div id="contentblock">Some HTML code</div>
<div id="footerblock">Some HTML code</div>
< /body>
< /html>

And naturally, the CSS file will style the <ul> and <li> links as before, but will also add a different background color to the <a> tag that now contains ID="currentpage". Now you have a navigational bar that has rollover effects and current page indicators, yet is built using only simple CSS and PHP. Furthermore, you only have to modify two externally-linked documents to modify the navigational structure of your entire site.