Share

I already wrote about horizontal menus so now I will start with some basic principles on how to decide whether to use a horizontal navigation bar or a vertical web site navigation menu system:

a) If the number of main links on the web site is less than 10 and they can fit horizontally on a screen resolution of 1024x768pixels, you should use a horizontal menu. If the number of links on the web site are more than 15, then you have to use a vertical navigation bar on the left side.

b) The contents (text or graphics) of the web site also dictate which navigation system you should use. If most pages have a lot of content then it`s better to use a left-side vertical navigation menu system.

c) If the site has dynamic JavaScript drop down menu then it is more appropriate to use horizontal web site navigation.

d) Vertical web site navigation menus are easy to update. If a site has 10 main links in a left-side vertical navigation system and the client decides (after about 6 months) that they want to add 5 more, we can simply expand the vertical menu without disrupting the design template. However, in case of a horizontal menu, it would change the design template because the 15 links would surely flow to 2 lines and create two rows of links.

Topic of this inspiration list is Vertical menu. So, here you will find 21 example of vertical menus. Enjoy!

1. http://www.mysterytin.com/



Mysterytin has a very interesting design of menu. This vertical list uses a single background image to create 2 distinct states, by shifting the image horizontally to reveal a different hover style (green and blue color).

2. http://www.globetrotterstravelclinics.com/



This is a very simple vertically based menu. The background image is thin and it`s repeated by X axis and for every new link the same picture with small red bullet on the left side and bottom border is used.

3. http://www.greatexpectationschurch.org/



This is a CSS vertical menu that uses an unordered list. Background is a thin, repeating image that changes when the mouse moves over a link. The links are separated with border.

4. http://folietto.at/



Not really new, but still beautiful menu. Folietto uses the free area effectively and sparingly. You may notice an interesting visual effect when hovering the links.

5. http://pacificwingsmagazine.com/

6. http://www.typechart.com/

7. http://www.leandropontes.com/metodista/

8. http://worshipleaderinsights.com/



To make the perception of information easier, the navigation is often structured by using blocks of the same height and width; large icons are used quite often. “Soft” hover-effects often support the navigation design by making the browsing more pleasant.

9. http://rawnet.com/



To make navigation more efficient and interesting, designers often make use of appealing icons. In such cases it’s important to make sure that the icon is easily recognizable, clearly conveys the message, corresponds to the link it stands for and isn’t too small. Attractive icons are, of course, always preferred to the boring ones.
Icons can be placed on the left or right side in the sidebar. This one used right-hand side.

10. http://phonophunk.com/



Very, very interesting hover effect but strange color combinations on the menu.

11. http://www.carbonstudio.co.uk/



Carbon studio delivers a Flash-based navigation menu with sound-effects. It may sound annoying, but it isn’t: every navigation option has its own sound. If you train yourself a little bit you can even play your own melody while listening to birds in the background.

12. http://www.noamdesign.com/

13. http://www.uniquexports.com/

14. http://www.cobahair.co.uk/



This menu uses only big typography. For every page color of the menu is different (Home – green, Salon – blue, Treatments –brown, rituals – pink and Contact – orange). Of course, for each link, there are two different states, which are made with one background image. To display that different link status CSS positioning is used.

15. http://godbit.com/

16. http://oink.elrellano.com/



Very funny and unique menu with hand written and hand drawn style. This manu has very surprising and interesting hovers.

17. http://www.kkmedia.org/

18. http://www.wards-exchange.co.uk/



The navigation on Wards-Exchange fits to the brochure design. Or the other way around. It`s made of two images for every link. The first for initial state and the second for hover state.

19. http://www.porsche.com/usa/



The menu is as good-looking as the car. Even though sub-menus are generally more usable as drop-downs than they are as fly-outs, Porches dynamic JavaScript fly-out menu on the left side of a vertical navigation is very nicely fitted into overall site look because of its transparency.

20. http://enviramedia.com/



This vertical menu is very attractive and funny. It`s made of a one background image to create 3 distinct states with CSS positioning to display them all where needed. This is called CSS sprites method. Using this, your pages will load faster since you'll save bandwidth, HTTP requests, and more.

21. http://www.from-the-couch.com/

The claim is that using left-hand vertical navigation is an out-of-date method in modern web design. The dominance of horizontal navigation over vertical is obviously due to the design and content limitations of the latter. Notably, CNN discovered those limitations before switching from vertical to horizontal a few years back. Naturally there are exceptions to every rule. So it is with a vertical menu.