PC Services

"From Payroll to Body Scanners"

Some PHP Tips and 'Tricks'

Thinking beyond each page and DESIGNING your web site

Horizontal or Vertical menus

The most common method involves a row or column of menu links using any type of representing the menu items as buttons, images or text, as in the following sections.

Your choice these days normally would be to use a column (vertical) of menu link items. The main reason is that as computer screens get larger and larger resolution (pixels), they are also normally becoming predominantly WIDEscreen, so more text is displayed across the screen than down the screen. This also applies to images, so images may 'appear' smaller on larger resolution screens, or on WIDEscreen format 'push' the text off the viewed part of the screen.

To keep as much text as possible on the screen at page loading time, having a vertical menu allows for all sorts of styles to be used, but still leaves room for a lot more text to FILL the browser window. As the page is scrolled through, part of the menu stays visible.

The pitfall of the vertical system is making sure you get all menu items the same width on all pages and watch how the menu items wrap in all modes of being selected or not. This is not insurmountable, as described later.

For Horizontal menus, you lose height on the viewable area of the screen, and the menu quickly disappears, when the page is scrolled, also depending on how many menu items you have the user may have to scroll the browser window left/right for all the items to fit. I would generally recommend NO more than about SIX items across the screen to avoid this. The only advantage is your menu items do not have to be the same width.

Some sites employ BOTH directions, and sometimes top/bottom and left/right menus using different methods on each.