linked list alternative to nested menus

I'm contemplating an alternative to the usual nested-list nav menu 
structure and solicit your opinions.

First, here's a standard nested menu.  Opinions vary as to whether 
it's kosher to include all the sub-menus nested inside the parent and 
conceal the inactive sub-menus from visual users.  I've included all 
the sub-menus in this markup for the sake of illustration:

<h3>Navigation</h3>
<ul>
	<li><a href="home.php">Home</a></li>
	<li><a href="products.php">Products</a>
		<ul>
			<li><a href="widgets.php">Widgets</a>
			<li><a href="whatsits.php">Whatsits</a>
			<li><a href="thingummies.php">Thingummies</a>
		</ul>
	</li>
	<li><a href="philosophies.php">Philosophies</a>
		<ul>
			<li><a href="tao.php">Tao</a>
			<li><a href="zen.php">Zen</a>
		</ul>
	</li>
</ul>

This makes semantic sense but could wear on your patience if you're 
hearing the page through a screen-reader.  If you activate a link in 
the parent menu and bring up a new page that again contains the 
navigation menu, how do you know that a sub-menu exists inside the 
parent item?  Do you have to listen through all the menu options 
you've already heard in order to discover and hear the new sub-menu?

As an alternative, I'm considering a series of linked lists instead 
of one complex nested list.  In the following example, the Products 
and Philosophies sub-menus appear after, not nested inside, the 
top-level menu.  The Products and Philosophies items in the top-level 
menu now contain URI fragment identifiers (same-page anchors) linking 
to their sub-menus farther down the page.  If you've navigated to the 
Products home page, I'd also add a skip link to the Products sub-menu 
so you wouldn't be forced to hear the top-level nav menu again:

<p><a href="#products">Skip to Products</a></p>

<h3>Navigation</h3>
<ul>
	<li><a href="home.php">Home</a></li>
	<li><a href="#products">Products</a></li>
	<li><a href="#philosophies">Philosophies</a></li>
</ul>

<div id="products">
	<h3>Products</h3>
	<ul>
		<li><a href="widgets.php">Widgets</a>
		<li><a href="whatsits.php">Whatsits</a>
		<li><a href="thingummies.php">Thingummies</a>
	</ul>
</div>

<div id="philosophies">
	<h3>Philosophies</h3>
	<ul>
		<li><a href="tao.php">Tao</a>
		<li><a href="zen.php">Zen</a>
	</ul>
</div>


Advantages:

1) faster & easier for non-visual users to navigate (I hope).

2) lends itself easily to visual layouts in which the sub-menu lies 
in a column or row adjacent to the parent menu.

3) sub-menus can be displayed or concealed for visual users in the 
same ways as nested sub-menus are.

Disadvantages:

1) The semantic relationship of parent menu item to sub-menu is 
obscured if not lost.

2) Because the sub-menu is not structurally nested within the parent 
item, some visual layouts of the menu will be difficult or 
impossible, such as the nested folder metaphor.

Your comments?

Paul

Received on Friday, 10 March 2006 19:34:27 UTC