I am interested in how other people handle website navigation. Not the styling or usability part, but the generation part. Most websites have some kind of “navigation tree” that is displayed in form of one or more menu levels – in what form do you save and process this tree? The simplest solution is a static menu template, something like this:
<ul id="menu">
<li><a href="…">One</a></li>
<li><a href="…">Two</a></li>
<li><a href="…">Three</a></li>
</ul>
But this is not very flexible. You can’t simply mark the current page in the menu and there’s no simple way of showing or hiding a part of the menu tree depending on the current page. (Or is it?)
I came up with a navigation tree, something like this:
- title: Fruits
nodes:
- title: Apples
- title: Oranges
- title: Bananas
- title: Music and Stuff
url: music
nodes:
- title: Classical
- title: Jazz
This tree gets loaded by a special Navigation
class that can serve parts of the navigation depending on the current request path. This seems to work a bit better, but still I am very curious about other people’s solutions.
MySQL has an article entitled "Managing Hierarchical Data in MySQL" which I have previously found to be quite invaluable. It discusses two common techniques to storing dynamic navigation and their limitations.
If ASP.NET is your flavor, Sitemaps work great
You might find one of my modules useful: CatalystX::Menu::Suckerfish
The menu structure is generated from method attributes. It lacks a way to alter the state of the current page's menu entry, but that shouldn't be difficult to add.
The method attributes are arbitrary strings MenuPath and MenuTitle which specify a slash-delimited path for the menu option in the tree and a string that is used as the menu option label and an html title attribute, where applicable.
We use an approach similar to yours with the menu hierarchy stored in the database. It would be nice to auto-generate the menu structure based on the dispatch methods instead, but there are other advantages to the DB approach. For example, we can alter/restrict access without rebuilding the application, and we can create menu items that don't map to the dispatch tree, such as external links. We can also provide arbitrarily verbose labels that don't necessarily map to the dispatch path, to make things easier for the humans.
The main disadvantage (besides having to duplicate the dispatch tree) is that actually managing the hierarchical data in MySQL is slightly awkward. See cballou's answer for a good resource on that topic.
When it comes to the showing and hiding of parts of the tree, CSS is your friend.
For example, your fruits submenu can be
id="fruitmenu"
you set all submenus to
display:none;
at the top of your style sheet.
Then you use an ID in the body tag of each page to make them visible according to a more specific rule.
So for instance on your fruits page, which has
<body id="fruitpage">
the fruit submenu is visible because it's governed by a rule like
#fruitpage #fruitmenu {display:block;}
SQL Server 2008 has a nifty new datatype called "HierarchyID", which takes away a lot of the headaches of working with hierarchal data.
You may find this useful:
Storing Hierarchical Data in a Database
Google Webmaster Tools provides some useful ideas and support for creating and managing sitemaps:
- Webmaster Tools Sitemaps
- Apache/IIS Plugin that generates
sitemaps based on logs, files on
server, or traffic.