How To Create A Simple Vertical Menu Using HTML

If someone says menu on a website, we remember the horizontal menu which runs across the site. People prefer designing the site that way. But, placing menus on your sidebars can be as effective to be clicked as well. We are going to discuss about the vertical menus, which can be even placed in the header or sidebars. Some people place them on the footer as well.

You can learn how to create a simple horizontal menu from here.

The menu is very straightforward and is designed using very simple CSS and HTML markups. The best part of this menu is we are not going to use the “List HTML structures“.

OBJECTIVE OF THE TUTORIAL:

1) Create a simple vertical menu.

2) Design the menu using only CSS.

3) Avoid using lists .

DEMO | DOWNLOAD

Explanation

We start by adding “div” elements one by one with the links embedded into them as shown below:

HTML Structure:

This is how it would look:

We can see that the lists have been generated by the div tags. Now it is very easy. We need to only help ourselves design these div elements and the links using CSS as shown below:

CSS Structure:

We first design the “div” tag by keeping a common width of 120px and height of 20px; We set a background color as well. Next we design the “div” tag on mouse hover as well by change the text/link color plus the change of background color.

On a safer side we design a color for the “a” tag as well by setting a font color of white and font size of 14px, and we also set the text-decoration to none.

The final product would look something nice and simple and can be viewed on the demo page. You can view the demo and download the example as well.

DEMO | DOWNLOAD

Hope this tutorial helped you set up your own simple menu on your sidebar more preferably. If you have any concerns please let us know by comment or contact us directly.

Vinod

Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...