Welcome to the
Build It Yourself Website .com

Menu Bar Code

Now that the images are ready to go, let's look at the code that pulls it all together. Open up HomeSite and open the file called "menubar.inc.php" located in the "includes" folder. Here is the code:

This may look like a small amount of code, but it is very powerful. Let's look at each line.

The first line says <center>. This tag tells the computer to center everything on the page until told to stop.

The next line says <div id="topmenu">. This tells the computer to follow the instructions in the cascading style sheet under the topmenu directions.

The next line of code is the important one. What this code does is this. The <li> tells the computer that this is a single item for the menu. The <a href="index.php"> tells the computer to link the <span>Home</span> to the index page of your website. The <span> tells the computer to follow the directions in the cascading style sheet to create the actual tab. The text "Home" tells the computer what to print on the tab. The tag </span> stops creating the tab. The tag </a> ends the hyperlink. And the </li> tells the computer that the item to create is done.

Each time and item needs to be added to the top menu bar, simply copy this line and change the hyperlink location and the name. For example, there is a contact page and it needs to be added to the top menu. Just add another line so that the code says this:

For every new line of this series of tags that is created, a new tab will appear on the top menu. This makes it very easy to update your website.

The </div> tells the computer that it can stop following the directions from the cascading style sheet under topmenu.

The </center> will tell the computer to stop the centering.

After the changes are made to the menu code, save it and upload it to the web server. Then, open up a new browser window to see your handiwork.

<< Back    Next >>