Vertical CSS menu: do it yourself

Some webmasters do not want to waste time developing from scratch simple elements that already exist. They believe that it makes no sense to waste their time on what has long been there. In fact, for those who are just learning HTML and CSS, it's important to do many things yourself to understand their work well. This applies to the menu. Create a vertical CSS menu. It will be based only on HTML and CSS, without using Javascript and JQuery. Each menu is a list of links that lead to the pages of the site.

Basic Steps

To create an uncomplicated vertical CSS menu , you need the following sequence of steps:

1. First, determine the list of links (using the HTML code) from which the menu will consist. Give them names, for example, such:

1. Home.
2. Our history.
3. Leadership.
4. Services.
5. Contacts.

2. Then we will stylize the links at will with CSS.

We'll write the HTML code, save it in my_Vmenu.html and see how it will look in the browser:

This is the basis (skeleton) of our menu. # 1, # 2, etc. Must be replaced by links. Look at how things look in the browser. You will not like the picture. Now we need to start describing the styles of the elements to make a full vertical CSS menu.

Description of styles

Create a file called my_Vmenu.css, in which you can set whatever you want to improve the appearance of such an important element of the site. Below is the code, the implementation of which will revive the vertical CSS menu. Write it into the created file, and then we'll take a closer look at what the main lines that are listed here mean.

Detailed description of used styles

Now consider in detail our CSS vertical menu:

List-style-type allows to remove list markers. Using the setting "0" for margin and padding, remove the extra indentation from the list. As you can see from the HTML code, our menu is a list, and CSS sets the styles.

Ul # my_Vmenu - the general style of the entire list.

Ul # my_Vmenu li a - the style of the link between the li tags.

Ul # my_Vmenu li a: hover is a description of the type of items in the menu at a time when one of the men is pointing at the cursor.

Ul # my_Vmenu li a span - description of the text (menu names).

Remember that the files my_Vmenu.css and my_Vmenu.html must be saved in one directory. However, they can be located in different folders, but then it is important to assign the path to my_Vmenu.css in the file my_Vmenu.html. Be careful, since newbies often have problems with this.

The style should be connected between the head tags in the html-file. Menu_1.png and menu_2.png are images for displaying the menu item in the normal state and when hovering over the cursor.

It is better to save the pictures in a separate folder for drawings, name it my_images, but then correct the CSS code. Write where these images are indicated, that they are in this directory: url (my_images / menu_1.png) and url (my_images / menu_2.png).

The rest of the properties described in the CSS code are easy to understand. They set the appearance of our menu. It is easy to see that the width and height of points is set to the same for points in the normal state and when you hover the mouse over them. The font size is 18px, padding specifies indents from different sides of the names of the items. The display property allows you to set the display by blocks to specify width and indents.

Our Vertical Menu

As you can see, the vertical CSS menu is easy to create. On the basis of knowledge, you can make it beautiful and attractive for visitors to your online resource! Use your imagination, and then a stylish menu will decorate your site.