Website Navigation

Navigation systems are  central and vital to a website.   Navigation needs to be highly efficient  and intuitive for human visitors and search engine robots and adaptable for the productivity of the web designer.

The approach I take in this example  uses a SPRY Menu widget together with PHP server side includes, which offers several benefits:

• the code for all navigation elements is in one file – the sitemap file
• the sitemap can be updated and uploaded in one file
• the sitemap markup is simple & straightforward, and can be easily extended

Scraping a Sitemap with Dreamweaver CS5

Most navigation systems  are  based on a nested UL list structure.   For this exercise we are going to start with a nav structure (sitemap) from a public website with a fair number of pages that are organized in three levels.

Visit the White House website.    Explore the navigation in the top menu, the side submenus, the footer on each page.   Visit several pages and notice how the navigation is consistent and represents the breadth of content in a structured and sensible way.

• View the page code source of the White House homepage.
• Select the sitemap data from  the page – from line 57 through line 327.
• Create a new php page with no layout and with HTML5 document type – insert the HTML code that you copied from the White House homepage and save the page.
• The white house navigation structure is based on nested ULs, but it has alot of extra markup that we are going to strip out. There are several global edits we are going to make to do this.    Dreamweaver CS5 turns out to be the perfect tool for making complex global edits to a structured file. First, apply source formatting to the document so it is easier to follow the structures. Follow these steps:
  • Remove all the class attributes. Using the SPECIFIC TAG dialog in the Find & Replace tool is pretty easy and powerful. You need to be a little careful and archive your work along the way (save as…)

  

  • Remove all the id attributes. Same idea as above.
  • Remove all the div tags (but leave the content).  In this case we stay with the specific tag dialogn and use the STRIP TAG action
  • Remove all the span tags.   Same idea as above.
  • Remove the UL breaks.  The white house navigation uses mutliple ULs within a subnav to break them into columns.    we are going to remove these with one find & replace.   This time we use the Source Code option and ignore whitespace!
  • Add the absolute URL references, again find & replace of source code:

  At this point you should have a clean structure of nested unnumbered lists.   Now all you need to do to to HOOK IT UP to the SPRY Menu widget is to give the top level UL an id attribute. The default for SPRY Menu widget is id=”MenuBar”.

Save the file as a PHP with just the list markups.    We will be using this sitemap as an include file.

Styling the SPRY Menu widget Navigation

David Powers explained how to design a SPRY Menu in the Widget Browser in the previous post.   The SPRY Menu can also be styled using CSS after it is inserted into a website or page.   Dreamweaver inserts most of the rules you need right into the document head.  I suggest you create a new CSS file and move them into it.    Here is a list of the CSS Rules.   Note that these rules do NOT require markup – the classes are added dynamically, which makes using this menu system so easy.   However, look at all the files it requires – a big negative!

ScriptTiny DropDown Menu by Leigber

By contrast, there are some Javascript Drop Down menu scripts that require much less code and work just as well as the SPRY Menu widget.    This script by Leigber is very small in terms of code, but works very nicely and can be highly stylized.   It does require you to use class attributes within the markup.   There are  rules in the style sheet that can be applied to the classes and sub structures.

JQuery Menus

JQuery is a very popular Javascript library that enables very rich, animated effects using CSS and a variant of Javascript that is very easy to learn and fun to use.   JQuery is beyond the scope of this week’s lesson, but here are some resources for JQuery menu systems that may inspire you:

JQuery Plugins: Menus that plug in to the JQuery UI library

33 JQuery Tutorials for Navigation Menus – These are some of the classics – superfish, lava lamp, accordion and garagedoor.

Adding a Footer Sitemap

One of the advantages of using a simple navigation system such as Leigber is that it is a bit easier to   ‘specialize’ the sitemap for difference uses throughout the site.   In this example, we will add a footer sitemap.    First, we need to  wrap the top menu in a NAV tag and the footer sitemap in a FOOTER tag – and insert the PHP include call into the footer.   This will allow us to specialize the menu styles for each element.   The menu is aleady styled by it’s own style sheet, all we need to do is PREPEND each rule with the nav rule selector.   Next we can create some rules for the footer element and the elements within the structure.  Nore the child specific rule for the top level LI tags – the main menu, which are floated to create the columns, pretty cool.   Check out the result.