Web templates, whether they are made in Dreamweaver or Expression, have always been a tremendous time saver when it comes to updating your website site wide. Until today, I always thought that the only drawback to using a template is it made it very difficult, if not impossible, to have dynamic menus. If you are wondering what I mean when I say dynamic menu let me explain. Simply put, dynamic menus are menus that highlight the link depending on which page your website visitor is on.

Well… today the light bulb came on and I want to share my solution with you.

I made a template in Dreamweaver then created four pages based on this template. The source code for the navigation menu in my template looks like this:

<div class="navigation">
<a href="../index.html" id="link1">Home</a>
<a href="../demographics.html" id="link2">Demographics</a>
<a href="../family-friendly.html" id="link3">Family Friendly</a>
<a href="../entertainment.html" id="link4">Entertainment</a>
</div>

Attached to my template is an external CSS file in which I have created these styles:

.navigation a {
	display:block;
	padding:10px;
	width:100px;
	background:#666666;
	text-decoration:none;
	color:#FFCC66;
}
.navigation a:hover {
	background:#999999;
	text-decoration:underline;
}

Now all the links will look the same in the navigation menu across the entire site but we are not finished yet. That id=”link#” is what is going to make this menu dynamic. All you have to do is place these style declarations in the appropriate pages. Dreamweaver automatically creates an editable region in the head section of the HTML document. This is where we will insert some CSS.

In the page index.html, this code is in the head section’s editable region:

#link1 { background:#111111; color:#99CC66; text-align:right; }

In the page demographics.html, this code is in the head section’s editable region:

#link2 { background:#111111; color:#CC6666; text-align:right; }

In the page family-friendly.html, this code is in the head section’s editable region:

#link3 { background:#111111; color:#9999FF; text-align:right; }

In the page entertainment.html, this code is in the head section’s editable region:

#link4 { background:#111111; color:#FF66FF; text-align:right; }

And that’s it. I’ve created a standard look for the menu links in an external CSS file. I have created a different look for each link which was then placed in the page associated with that link.

For an example, click here.

Related posts:

1. Display the Latest Posts with WordPress
2. Neat Pop-up Windows for Images
3. Website Value Calculator