Today I modified the navigation panel slightly by renaming the ‘Roofing’ section ‘Trussed Rafters’ and the ‘Flooring’ section ‘easi-joist’, I also moved … As I wrote this post I was distracted by a smell of burning and the hallway filling with smoke, it seems my idiot brother put something under the grill and then decided to leave it unattended, disaster averted now back to the topic at hand.
… As I was saying I have also moved the easi-joist Roofing page out of the now ‘Trussed Rafter’ section and into the now ‘easi-joist’ section, I have also updated the breadcrumbs at the top of each page. I am planning on starting work on a new page for the easi-joist attic truss, I don’t know which section I will put it in yet because it is both a trussed rafter and an easi-joist, I could always put it in both sections I suppose. One option would be to put it in the trussed rafter section and then create a link to it from the easi-joist roofing page where some information about the easi-joist attic truss already exists.
After a few hours trying to get a php if… else statement working I was finally able to extend the dynamic highlighting effect for the navigation panel into the blog, so if you are on the 2006 archive page the 2006 archive will be highlighted in the navigational panel. I have also moved the header, search box, menu, and page footer for the main site into separate files, to make it easier to update them and to reduce the size of the individual pages. At the same time I have converted most of the site to php rather than html, this means if I need to include something from the blog in the main site I can without any problems, the only part of the site that isn’t php now are the error pages which will remain asp for now.
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.
Yesterday I started re-coding the navigation panel on the left side of the site, it used to be table based, then it was paragraph based. and now well it's list based, like the majority of navigation panels on the web today. As well as making that switch from paragraphs to lists I have also re-coded the styles to make them more efficent and to add a dynamic highlighting effect, the highlight effect changes the navigation panels background of the page that is currently open, previousley this had to be coded onto each page which made the code for the navigation panel bigger than it needed to be. Anyway I have now made the change sitewide.
Something I am planning on doing sometime in the coming weeks is to re-write the style sheets and seperate them, one for layout, one for the side panel, one for the main content area, one for enquiry forms, and one for tables. I do have someting similar at the moment but the styles are all over and not easy to find.
To make room for more downloads I have moved all the downloads from the Links and Downloads page located at http://www.eandhbaxendale.com/links.html to a new dedicated downloads page located at http://www.eandhbaxendale.com/downloads.html
At the same time I have also re-organised the navigation panel by moving the two Links and Downloads pages out of the Company panel and into the Services panel.
A big SORRY to visitors using firefox, i have only just become aware of a problem with the site navigation not displaying correctly, this problem has now been fixed, believe it or not, by adding one of these ;
