Web 2.0 Navigation Crash Course

This is a beginners guide to creating a site-wide navigation that is consistent from page to page.

Tired of keeping track of multiple Menu’s on different pages? As your site grows, adding 1 new page to 25 other pages’ navigation can become a full time job. I’ll show you how easy it really is to make a single navigation that will save you time and headaches!

For this you’ll need:

1. Guts
2. A little understanding of HTML CSS and PHP (Not Really)
3. Notepad++ (Or any HTML editor)
4. A copy of DDtabmenu From Dynamic Drive (This file)

1. Let’s start off with the code you’ll need. The Three Parts are:

A. The CSS include, paste this in the header of your html.

<link rel="stylesheet" type="text/css" href="/solidblocksmenu.css">

B. The Javascript Magic,  paste this near the top of your html.

<script type="text/javascript" src="/ddtabmenu.js"></script>
<script type="text/javascript">ddtabmenu.definemenu("ddtabs1", auto)
</script>

To make adjustments, you can change the tab_menu_id to whatever HTML id your using for your menu, and the number after the comma will select which link is highlighted.
SYNTAX: ddtabmenu.definemenu(“tab_menu_id”, integer OR “auto”)
//initialize Tab Menu with ID “ddtabs1″ and select 1st tab by default

C. The HTML for the Links

<div id="ddtabs1" class="basictab">
<ul>
<li><a href="http://green.cx/" rel="sc1">Home</a></li>
<li><a href="http://green.cx/Link1.htm" rel="sc2">Link1</a></li>
<li><a href="http://green.cx/Link2/" rel="sc3">Link2</a></li>
<li><a href="http://green.cx/Link3/">Link3</a></li>
<li><a href="http://green.cx/Link4">Link4</a></li>
</ul>
</div>

D. The HTML for the Subtitles

<DIV class="tabcontainer">

<div id="sc1" class="tabcontent">Sub contents here</div>
<div id="sc2" class="tabcontent">Sub contents here</div>
<div id="sc3" class="tabcontent">Sub contents here</div>

</DIV>

2. Now The Required files you need on your server

Download this file and extract the contents to the root of your webserver, using a FTP client like FileZilla.

And, Volia! You should have a nice HTML/CSS Navigation on your site, but you don’t want to copy/paste this to EVERY page on your site right?
What if you needed to change a link or fix a typo? That would be a LOT of editing for a site with more than a hand full  of pages.

So we get around that using a simple PHP include file.

Woah! Don’t get nervous, this is actually really easy, just keep following along!

Now making that nice flashy menu and making it a PHP include is really quite easy.

First off I feel the need to make it clear, your server needs to support PHP. (Of course)

Start off Coping the HTML code for the MENU and the Subtitles, into a new document, named nav.inc

nav.inc Contents

<div id="ddtabs1">
<ul>
<li><a href="http://green.cx/" rel="sc1">Home</a></li>
<li><a href="http://green.cx/Link1.htm" rel="sc2">Link1</a></li>
<li><a href="http://green.cx/Link2/" rel="sc3">Link2</a></li>
<li><a href="http://green.cx/Link3/">Link3</a></li>
<li><a href="http://green.cx/Link4">Link4</a></li>
</ul>
</div>
<DIV>
<div id="sc1">Sub contents here</div>
<div id="sc2">Sub contents here</div>
<div id="sc3">Sub contents here</div>
</DIV>

Now rename your index.html file to index.php

Keep the CSS and Javascript in the header as per usual.

But where the Menu was located, replace it with this code.

<?php
include ("/nav.inc");
?>

That should put the contents of the navigation include file whenever this line is called. But notice! It will only work when the index (or any file on the server) ends with .php

Give it a try!