Simple Vertical Tabs

There are really two main ways (or a combination of them) to display menus on your web page: horizontally or vertically. Some sites have a combination of the two. For instance a main horizontal menu with vertically expanding sub options. All main menus are either vertical or horizontal.

Many sites have some form of horizontal menu selection across the top. Here are a few screen shots…

image

image 

image

These three example represent one of the most common ways to provide a user a menu of options. The other way of presenting a menu is vertically. Here are a few screen shots…

image  image  image

At some point a menu containing too many options will not fit horizontally. Vertical menu are much better at expanding. Theoretically you can extend your vertical menu forever (please don’t do this though).

When displaying menu options vertically, it is very common to see lists of items. I wanted to add a bit of style to the menu option. This post introduces a page with simple / minimalistic vertical tabs. Here is a screen shot:

image

The demo page itself contains all the code (HTML, CSS, and JavaScript) that you need to reproduce the result. The demo page also contains a brief summary of the key points. In addition you have a live example of a page using the vertical tabs.

Demo

Summary

Check out the demo page for the code. If you have improvements or suggestions please leave a comment.

Tags:, ,
Comments
  1. Luz Arrey
  2. New Developer
  3. ajay
  4. Kos
  5. e Park Ltd
  6. jerry hoang

Leave a Reply

Your email address will not be published. Required fields are marked *

*