Some webmasters do not want to waste time developing from scratch simple elements that already exist. They believe that it makes no sense to spend your time on what has long been. In fact, for those who are only mastering HTML and CSS, it’s important to do many things themselves in order to understand their work well. This also applies to the menu. Create a vertical CSS menu. It will be based only on HTML and CSS, without the use of Javascript and JQuery. Each menu is a list of links that lead to the site’s pages.
Main steps
To create a simple vertical CSS menu , you need the following sequence of actions:
1. First, define a list of links (using HTML code) that the menu will consist of. Give them names, such as:
- Home.
- Our history.
- Leadership.
- Services
- Contacts.
2. Then we style the links as desired using CSS.
We’ll write the HTML code, save it in the file my_Vmenu.html and see how it will look in the browser:
This is the basis (frame) of our menu. # 1, # 2, etc. need to be replaced with links. See how everything looks in the browser. You won’t like the picture. Now we need to start describing the styles of the elements in order to make a full-fledged vertical CSS menu.
Description of styles
Create a file my_Vmenu.css, in which specify whatever you want to improve the appearance of such an important element of the site. Below is the code whose implementation will enliven the CSS vertical menu. Write it to the created file, and then we will examine in more detail what the main lines that are shown here mean.
Detailed description of used styles
Now let's take a closer look at our vertical CSS menu:
list-style-type allows you to remove list markers. By setting "0" for margin and padding we remove the extra indentation from the list. As you can see from the HTML code, our menu is a list, and with the help of CSS we set styles.
ul # my_Vmenu - general style of the whole list.
ul # my_Vmenu li a - link style between li tags.
ul # my_Vmenu li a: hover - this is a description of the type of items in the menu in question at the moment when a person hovers over one of them.
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 the same directory. However, they can be located in different folders, but then it is important to write the path to my_Vmenu.css in the my_Vmenu.html file. Be careful, as beginners often have problems with this.
The style must be connected between the head tags in the html file. menu_1.png and menu_2.png are pictures for the image of the menu item in the normal state and when you hover over.
Better save the pictures in a separate folder for pictures, name it my_images, but then adjust 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 remaining properties described in the CSS code are easy to understand. They set the look of our menu. It is easy to see that the width and height of the points are set the same for the points in the normal state and when you hover over them. Font size 18px, padding sets padding on different sides of item names. The display property allows you to specify the display in blocks to specify the width and indentation.
Our vertical menu
As you can see, vertical CSS menus are easy to create. Based on the knowledge database, 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.