Elements of a web site menu

Menus may have categories (pages with sub pages). Our options need to accommodate multiple sub sets of pages.

Logically one should accommodate for up to three levels in our menu style options, four maximum - more starts to look bad.

We encourage users to create a second menu elsewhere on the sub pages themselves to provide access to the deeper pages.

There are several horizontal styles for doing this:

1. Top level menu options are displayed in a row horizontally on one line, second level menu options are displayed in a row horizontally below the first row (and so on). The background color of the second row (selected sub menu) might be the same color as the background of the 'selected' top level menu item - this clarifies their relationship.



2. Top level menu options are displayed in a row horizontally on one line, second level menu options are displayed in a vertical list - (javascript drop down box) below the selected option. Third level menu options are displayed in line within that list, but are inset slightly.. generally with some kind of image or '>' character.



3. There is also a variation of #2 above in which second and third sub menus each appear in separate vertical lists, each one to the right of the parent sub menu... I don't particularly like this and would prefer people avoided it.



4. Top level menu options are displayed in a row horizontally on one line, second level menu options are displayed in a vertical list directly beneath the selected item, but not in a javascript drop down box. Instead they are within the same media block.

Similarly there are three types of vertical menu style i would like to offer:

1. Top level menu options are displayed in a vertical list, in one column. second level menu options are displayed in the same column but are inset slightly... generally with some kind of image or '>' character. Third and fourth level menu options are inset slightly more, but are still in the same column.



2. Top level menu options are displayed in a vertical list, in one column. second level menu options are displayed in a second column to the right of the first.
   Third and Fourth level menu options are displayed within this second column but are inset slightly... generally with some kind of image or '>' character.



3. There is also a variation of $2 above in which third and fourth level sub menus each appear in separate columnar lists, each one to the right of the parent sub menu... I don't particularly like this and would prefer to avoid it.

Menus often have a descriptive line below the menu option / page name eg.

Contact Us

Need Help


or

Shopping

View our Products





Height or width of menus and their background areas

This will vary based on the number of sub categories / sub pages
but generally speaking there are three couple of options:

1. Menus can either be approximately the same height / width as the menu text itself.. plus some margin and padding



2. They can be as tall / wide as the media block that contains them. (assuming that there is no other visual item above or below the menu in the media block).
   
   
   Default color treatment in this case: Choosing to make the hover color on menu items 'blue' for example will make a larger area go blue when a site visitor hovers over a menu item.
   
   
   Note however that if the menu has sub categories (and is using horizontal menu style 1 above) , then the height / width of the menu may have to be split between the first level menu options and second / third level menu options, with their own background colors.



3. . Horizontally displayed Menu options can be dispersed accross the row on the page according to the width of the page names, or they can be on fixed width backgrounds.


Menu options can be aligned



1. left
   
2. right
   
3. distributed evenly accorss the available space. (applies to horizonotal menus only)
   


Menus often have some type of divider between the options>/b>
eg a line or a small image like an arrow or similar.

Menu options sometimes appear as simplified buttons
ie not on a rectangular background but instead on an oval background.

Menus often indicate which options have sub options
by placing some sort of image or arrow infront of or behind that menu option.

Menus often highlight the selected option by:




1. Changing either the 'divider' image or character
   
   
2. Changing the image or character associated with sub options
   
   
3. Adding a new image or character before, after, above or below the selected option.
   
   
4. changing the background color of the selected option / button color.
   


Sub menu drop down boxes often have a border and lines between the options (cell borders).