Easy Dynamic(ish) navigation
Its not rocket science, but I get asked about it a fair amount so here is a very rough and ready over view of how I develop an updatable, portable and search engine friendly navigation. I’m calling it the eclipse method because it relies on setting up the html and css so that when certain classes and sub classes align beautiful things happen.
Overview
We are all pretty much convinced of the accessible benefits of using lists for web site navigation or at least we should be, however its not always easy to get your head around how to make this work for relatively large navigation’s without the use of a database.
Over my many years of designing and building web sites I have developed a system that allows me to create navigation system that in one place holds all the primary navigation elements needed for a site but that allows me to hide and show relevant subsections dependent or requirements and can then be re-utilised for a no maintenance site map.
I am assuming that if you are going to use any of the stuff I talk about here you at least have some knowledge of html & css structure as I don’t want to bog things down with a discussion of minutia.
Benefits of this approach
- Building and maintaining web sites can become pretty time consuming so anyway we can make publishing new pages and sections as easy and quick as possible can only be a good thing, and by using this method you simply add your new page to a centralised list of pages and it will automatically update the navigation on all pages and keep your site map up to date at the same time.
- By having all links on all pages you open the web site up to being indexed by search engines without compromising the user experience.
Tools
Now in order to do this you will need the following
- A basic understanding of HTML & CSS
- A web site that can run either asp, php or Coldfusion
- An understanding of how to do a server side include
- A computer of some description and your favourite html editing and ftp software
- A functioning mind, pair of fingers eyes and a modicum of patience
Now please ask your parents to leave the room or it wont be a surprise now will it?
Build the list
The first thing we need to do is build the list in a blank html file with no html or body definitions as we are going to reference this page as either a php or asp server side include (make sure you make all links relative to the root of the website though), for example I will use the following.
<ul class=”primary_navigation”>
<li class=”navigation_section01″><h3><a href=”section01.php”>Main Heading 01</a></h3>
<ul>
<li><a href=”page0101.php” class=”navigation_subsection01″>Page 01.01</a></li>
<li><a href=”page0102.php” class=”navigation_subsection02″>Page 01.02</a></li>
<li><a href=”page0103.php” class=”navigation_subsection03″>Page 01.03</a></li>
</ul>
</li>
<li class=”navigation_section02″><h3><a href=”section02.php”>Main Heading 01</a></h3>
<ul>
<li><a href=”page0201.php” class=”navigation_subsection01″>Page 02.01</a></li>
<li><a href=”page0202.php” class=”navigation_subsection02″>Page 02.02</a></li>
<li><a href=”page0203.php” class=”navigation_subsection03″>Page 02.03</a></li>
</ul>
</li>
<li class=”navigation_section03″><h3>Main Heading 03</h3></li>
</ul>
Which will give us this:
Quieting down the children
The first thing that must happen is to close down all the nested lists and we do this in the css (cascading style sheet) like thus:
ul.primary_navigation ul li. ul {display: none;}
This then makes the navigation as displayed to the viewer like this:
But search engines still see everything, all the links the whole ka boodle!
Speak in turn
This is all well and good but now we need to turn on the relevant navigation sub sections for the right sections? Glad you asked I was just getting to that bit, We do this but inserting a unique class in the body tag of each section for example for section two we change <body> to this:
<body class=”section_02″>
And in the CSS we add this array to take care of all instances up to three sections you can carry on and add as many as your site demands, what this is doing is creating conditions so that if elements such as the correct site section and navigation group are aligned then the correct sub navigation will be displayed:
body.section_01 ul.primary_navigation ul li. navigation_section01 ul,
body.section_02 ul.primary_navigation ul li. navigation_section02 ul,
body.section_03 ul.primary_navigation ul li. navigation_section03 ul
{display: show;}
This way we can simply turn on and off sub navigation sections by altering the class in the body of the HTML document, so for section 2 we get.
Identifying the speaker
But why stop there? Why not also height the current page through the navigation? We do this by adding an extra class to identify the page in the section so the body tag for the first page in section 2 will look like so:
<body class=”section_02 subsection01″>
then in the CSS we create a section to deal with the styling when all the elements are aligned like this
body.subsection01 li.navigation_subsection01 a,
body.subsection02 li.navigation_subsection02 a,
body.subsection03 li.navigation_subsection03 a
{
font-weight: bold;
text-decoration: none;
color: #000;
}
this should give us this:
Recycling the navigation
Now we can use the same navigation to dynamically build the Site map simply by pulling in the same server side include, changing the body class like so in the html we go.
<body class=”section_sitemap”>
and in the CSS we sing.
body.section_sitemap ul.primary_navigation ul li ul
{display: show;}
For illustration and variations of styling and usage please take a wonder around:
This very site you are looking at & Shopping-Organic.Com