The menu is used to facilitate user navigation through the sections on the site. To attract the attention of the visitor, the menu should be functional, easy to use and at the same time be combined with the design of the entire resource.
Instructions
Step 1
Before creating a menu, decide on its type. You can create a drop-down horizontal or vertical box that will be shown to the user when the user hovers over it with the mouse cursor. When choosing a particular menu, you can be guided by how convenient it will be for visitors to use it and how it will be combined with the design.
Step 2
After choosing a menu type, open your page file using whatever text editor you use to edit HTML. Navigate to the desired section of code where you want to insert your interface element.
Step 3
After that, make a list of options by creating a block and making a numbered list with id assigned to it. For example:
- Link 1
- Link 2
- Link 3
In this example, I created a bulleted list of three elements and placed it in a div layer with the ID panel ID.
Step 4
Go to the section block of your page and create the appropriate cascading style sheet menu. If you want to create a horizontal menu, you can include the inline attribute for the resulting list:
#panel ul li {display: inline; }
Step 5
To create a horizontal line along the entire length of the page, you can use the following code:
#panel ul {margin-left: 0; padding: 2px 0; }
Step 6
Then you can do the visual division into rectangles:
#panel ul li a {margin-left: 3px; border: 1px; padding: 2px 3px; background: blue; }
This code sets the indents of the text from the border elements through the margin-left and padding attributes, and also sets the background color for each of the list items. In this example, the color is blue, but you can change it at your own discretion.
Step 7
To point to the item on the current page that is selected in the tab, set the appropriate parameters to the open class:
#menu ul li a # open {background: red; border-bottom: 1px; }
The current page selected in the panel will now be displayed in red.
Step 8
Save the changes in the file and check the functionality of the written code by opening your page through a browser. To set additional display options, you can always add CSS or HTML to enhance the appearance of the object.
