Menu Vs. Contents HyperText.  comment

 

One problem I have had for years now is how to differentiate between a sidebar menu on a web page which is referring to different pages and one which refers to sections within the same document, in other words the difference between a menu of articles and a contents list for an article.

 

The solution I am using here is to visually separate the sidebar when it points to different documents- when it is a menu- and to visually integrate the sidebar when it's an internal list or contents.

Here you see close-up screen grabs of two side bars. If you are reading this through the www.liquidinformation.org web site you'll recognize the first one as being the Articles section on the site and the second is the Doug Engelbart Documentary pitch page.

This side bar separates the menu from the article which is on the right, by having the article cast a drop shadow onto the menu.

The contents list on the other hand (below), works to integrate the side bar with the document. This is done by having a simple line separating them, but stopping before it goes to the top of the page and features the same background color. And no drop shadow. It is designed to look like a printed piece of paper:

With the contents side bar above, a new issue arises: When is a contents menu item a pointer/anchor to a spot in in the article on the right and when does it open a sub-menu, a drop-down menu? In this example there are no drop downs. But in the example below there is:

In this example the words are anchored to sections in the document- click on one and the document scrolls to the section...

And below, the user has clicked the ~ symbol, the tilde, to give them a drop down menu. Not an obvious feature, just a cool and useful extra for trained or explorative users...

Clearly there is more to this, but I find this to be a useful start.

 

 

©1995-2001 The Liquid Information Company    www.liquidinformation.org