How do you generate website navigation?

2019-04-06 12:08发布

问题:

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.

回答1:

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.



回答2:

If ASP.NET is your flavor, Sitemaps work great



回答3:

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.



回答4:

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.



回答5:

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



回答6:

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



回答7:

You may find this useful:

Storing Hierarchical Data in a Database



回答8:

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.