Someone recently saw one of my previous posts about the changes I have made to the site’s navigation panels and suggested that I should write another post going into more detail, so here I go. For the navigation panels I am using a dreamweaver spry accordion, so the first step is to modify the accordion stylesheet so the panel looks how you want it to, in my case I set a width and added background images to the accordion panels.
Next you need to add an unordered list to each panel, so you will have a bullet point for each page that looks something like this
<div id=”Menu” class=”Accordion”>
<div class=”AccordionPanel”>
<div class=”AccordionPanelTab”>Company</div>
<div class=”AccordionPanelContent” >
<ul>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”contactus.html”>Contact Us</a></li>
</ul>
</div>
</div>
Now you need to style that list, to remove the bullets etc.
#Menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#Menu li {
width:180px;
height:20px;
background-image: url(../Images/back4.png);
line-height: 20px;
text-indent: 5px;
font-family:arial, verdana, sans-serif;
font-size:0.6em;
cursor:pointer;
}
#Menu li a {
display: block;
color: #000;
text-decoration: none;
}
That will give your menu the look your after but now I want the active page to be highlighted in someway or another, so this is what makes it dynamic. The first step is to add a unique id to the opening body tag of each page e.g. <body class=”twoColFixLtHdr” id=”company1″> and then you need to add unique ids to the links in your menu e.g.
<li><a href=”about.html” id=”c1″>About Us</a></li>
<li><a href=”contactus.html” id=”c2″>Contact Us</a></li>
Now you need to go back to your stylesheet and create a new style like this:
#Menu li:hover { font-weight:bold; }
body#company1 a#c1, body#company2 a#c2{
display: block;
background-image:url(../Images/openpage.png);
font-weight: bold;
}
What those two styles do are change the text to bold and the background of the link for the open page, the main advantage this has is that you can use the same code for the menu on each page without having to manually change the style for each pages own link.
