Advantages of Vertical Navigation Designs

Navigation Menus are one of the most important elements in a website as they are usually the first thing visitors connect to, using them users can go from page to page exploring the website. These menus form a common link for users to ‘walk around the site’ using the navigation menu as a ‘map’.

Due to their pivotal role in a website designers, information architects, usability researchers and user experience specialists devote so much effort and resources into developing aesthetically pleasing and user-friendly navigation systems.

Along with functionality and visual appeal the placement of the navigation menu has to be kept in mind. To instantly attract the visitor’s eye they need to be placed in the most visible location of the homepage as well as any other page.

Website navigation menus have to predominant styles vertical and horizontal. The horizontal menu present items side by side, whereas Vertical navigation menus stack items on top of each other. Bothe styles have their pros but here we will focus on the advantages and designing scope of the vertical style navigation menu.

Advantages of Vertical Navigation Menus

• Vertical Navigation Menus are simple and clean in looks yet robust in functionality and interaction.


• Vertical Navigation style allow for highly compact and modular menus that appear distinct from the rest of the layout.


• A distinct advantage of vertical navigation menu is that it shows hierarchy and allows you to group menu items without resorting to drop-down menus.


• Vertical Navigation style is able to accommodate more menu items.


• Big font sizes with different font types can be used as there is more vertical space to work with in the vertical navigation menu.


• Images or animations can also be used due to the vertical space available in the vertical navigation menu.
  

VERTICAL CSS POP OUT MENU TUTORIAL

Requirements for Vertical CSS Menus

Grab HTML From Here

Vertical Pop Out Menu

#menu {
width: 12em; /* set width of menu */
background: #eee;
}

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

The CSS above removes the padding/margin and bullets from all the lists, sets the width of the the entire menu and styles the links and heading to suit.

Positioning the Pop Outs

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

The position: relative; applied to the #menu li makes the <li> elements into containing blocks for the nested <ul> elements.

We only want to apply positioning to third level nested lists and deeper so the #menu ul ul ul targets that and the popout is positioned over to the right edge of their containing block (parent <li> element)

Hiding and Revealing using :hover

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

This bit could be simplified with the use of child selectors, unfortunately we have to use more specific descendant selectors in order for IE to understand.

This now achieves what we want, in a non-IE browser.

Fixing it for IE!

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
/* if required use em's for IE as it won't resize pixels */
}
</style>
<![endif]-->

The above is the entire conditional CSS which we use to target IE/Windows only. It enables us to call the hover behaviour file and also to input some other IE "workaround" CSS without affecting other browsers.Providing the csshover.htc file has been saved to the same directory as the file you're working on you should see that the popouts are now appearing on hover as expected.