views:

223

answers:

8

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.

+5  A: 

If ASP.NET is your flavor, Sitemaps work great

RandomNoob
Perl/Catalyst here, but thank you, this is useful.
zoul
Yes. They rely on an XML file containing the sitemap. If you aren't using ASP.Net, you might still be able to use an XML-based solution.
DOK
+6  A: 

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.

cballou
+1 for the link
Yacoby
Great resource, especially for nested set stuff.
mgroves
I’m marking this accepted, even though there is no ‘right’ solution. (I did not want to make this a CW to give people the reputation points for good answers.)
zoul
A: 

Google Webmaster Tools provides some useful ideas and support for creating and managing sitemaps:

Dave Paroulek
Sitemaps (in that context) are food for search engines, not navigation.
David Dorward
My bad, I misread the question...
Dave Paroulek
+1  A: 

SQL Server 2008 has a nifty new datatype called "HierarchyID", which takes away a lot of the headaches of working with hierarchal data.

mgroves
+3  A: 

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.

converter42
+3  A: 

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.

Adam Bellaire
+1  A: 

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;}

AmbroseChapel
This is what I do on static websites, but I (1) don’t like the volume of the rules I have to type and (2) feel a bit guilty each time I change the `cursor` property to pretend the current menu item is not clickable :)
zoul
I don't get why you would have to change the cursor -- surely the headword at the top of a hidden list IS clickable? And you can combine rules in CSS! One long rule with commas.
AmbroseChapel
Sorry, missed your comment. Sometimes the whole menu is visible, only the current item is highlighted and not clickable. This is when I have to ‘cheat’ with the `cursor` property. And there is no way to combine the `body.foo #foo` rules, is it? If there were 10 pages with a submenu, I would have to write 10 `body.foo #foo` rules. (With a shared `display` clause, sure.) This gets old quickly, I’d rather write a reusable class that generates the menus from a file.
zoul
A: 

You may find this useful:

Storing Hierarchical Data in a Database

Alan Haggai Alavi