5. Master Page Navigation

Main Points

• Master Page Accessible Links Description of the simple code for the accessible page links section.
• Master Page Main Nav Bar Description of the code for the main nav bar at the top of the page.
• Master Page Secondary Nav Bar Description of the code for the general nav bar at the bottom of the page.
• ^{Skip to Main Points} links return to the Main Points menu.

Master Page Accessible Links

The page navigation is one of the most important sections of any website. Here are the components of Earth Chronicle ASP.NET navigation structure. These may make more sense to do as components if we wind up with more than a couple master pages. Otherwise, every time we need to make a change, we'll have to update it in two or more places. Also note that while all this code is at the end of the HTML file, each section appears at a different point on the web page that's rendered due to the CSS styling.

An important need of any page navigation is to be available in accessibility-critical situations. This group of links serves as our ultimate backup navigation. There's no javascript, little CSS, everything is grouped topically for ease and logic. These are semantic and should hold up even under the most demanding of circumstances. The nav bars are not so stable, but provide much more user friendly functionality. These links provide basic functionality to all.

If the page links are stable and user-friendly in situations where functionality is very limited, the nav bars are much more user-friendly in the more common situations where javascript and CSS can be assumed. Note that neither is particularly user-friendly in situations where they were not designed. Page links serve a basic SEO function when viewed in a fully functional browser, but aren't much good to a visitor. Likewise the navbars aren't effective without javascript. That's why both have their place on the page.

Master Page Main Nav Bar

Here is the code for the main navigation bar at the top. It is primarily geared to serve people in getting around the ASP.NET beta website.

The idea behind this kind of nav is that you set up an unordered list for the menu headings and then use nested lists for each menu (you can even do multiple levels of fly out menus as a nested list to an already nested list). Somehow I wound up with a limited version that's using divs for the main buttons which drop the menus. I'll need to repair that, but right now I'm just working on getting the ASP.NET master page together. Then I can pull the navbars out as components and link the components back into the page. Then I can fix this.

Master Page Secondary Nav Bar

My first navbar is section specific. It has the information and links most relevant to someone visiting this page, and currently the CSS brings this nav bar to the top. The next navbar - detailed below - is a general site wide navbar. A number of links are the same as is on the first, but these are the links that should be available on any page. Currently, the CSS pulls this navbar down to the bottom of the page rather than the top and there is more emphasis on providing access to Earth Chronicle pages.

There are still several things I need to do to finish this topic. I need to break out several sections of code that will be reused over and over again. (as components?) I'd expected to handle it from an XML sitemap, however I've discovered that a web.sitemap file will not allow you to reference the same page in two different places, all urls in the sitemap must be unique. This is completely impossible in any reasonable navigation structure where different categories need to reference the same file (e.g. does Beethoven belong in European history or the Enlightenment? Oh crap, he's both. No point in using a sitemap then is there? :S) So I'm somewhat betwixt and between how to set this up now.

It's also time to adjust the CSS, JS(?), and form <label> tags match up with the code. I've already renamed the CSS files so I can play with this test without breaking the entire site. Ultimately, I want the site based on this new template, but I want to square this away and figure out what I'm doing as a first step. I want to save taking the template site wide until I'm completely done with this part. Otherwise, I smell all kinds of problems. Address id and name scrambling and try to puzzle out the rules. I have a live working demo now, that will hopefully reveal some things. Fortunately even with the current scrambling, it basically seems to work. No javascript cutting out, etc. I also need to track down the errors in the header indents. And I should clean up the navbar code. The main nav bar is created as a series of divs, when really it should be a master list in which each of the other lists for the menus are nested. It's probably better to fix that before I go site wide although the master pages (and components?) should make it easy to modify. Should I just leave well enough alone for right now? I think I need to fix this before I have a second (www.EarthChronicle.com) site to worry about. (and a third, atlas.EarthChronicle.com?)