Using SSI to Boost Efficiency - Navigation Menus

(Page 5 of 7 )

Every website has, or should have, navigation menus to make getting around the site easy. For the most part, these menus are the same on every page.  Even with a complex site, you'll have large numbers of pages with the same menus. That makes them a natural for managing with SSI.

A good example of a navigation menu from my site is below:

<span class="menuitem">
 <a href="/">Home</a>
</span>
<span class="menuitem">
 <a href="index.html">miniCMS</a>
</span>
<span class="menuitem">
 <a href="screenshots.html">Screen Shots</a>
</span>
<span class="menuitem">
 <a href="ptml.html">PTML</a>
</span>
<span class="menuitem">
 <a href="download.html">Download</a>
</span>

If I save this to the file "menu.shtml" I can now put the menu in all of my pages with the directive:

<!--#include virtual="menu.shtml" -->

The files included by a #include directive are also parsed for include directives. This means I can put a uniform page header on all my pages and make the menu part of that header. I'll put this bit of code in a file called "top.shtml":

<div class="banner">
<img src="images/miniCMS.jpeg" alt="miniCMS Logo">
</div>
<div class="menu">
<!--#include virtual="menu.shtml" -->
</div>

Through the magic of CSS we can also use our menu to make a nice navigation bar at the bottom of the page in "bottom.shtml":

<div class="footer">
<hr align="center">
<div class="menu">
<!--#include virtual="menu.shtml" -->
</div>
<p>&copy; 2004 by Megacorp Inc.</p>
<p><a href="mailto:webmaster@megacorp.net">Comments &amp; Questions</a></p>
</div>

Now when we add new pages to our website, the only place where we have to add a link to the page is in "menu.shtml". It will automatically appear in both the main menu at the top of the page and at the little bottom menu.

I have also successfully used a CGI program to generate my menus dynamically. Given how easy it is to maintain a single include file, I only recommend the CGI approach in situations where you're looking to generate a menu that changes based on context.  This could be good, for instance, where the menu shouldn't have an active link for the current page. In that case you'd use #exec instead of #include.

Next: Common HTML Blocks >>
 

More HTML Articles
More By Clay Dowling

Comments On: Using SSI to Boost Efficiency

>>> Be the FIRST to comment on this article!