Home / the Internet / Web design / How to make a menu on the site

How to make a menu on the site


How to make a menu on the site</a>

The menu is used to facilitate navigation to the user by sections on the site.

To attract the attention of the visitor, the menu should be functional, user-friendly and at the same time combined with the design of the entire resource.



Before creating a menu, determine its type. You can create a dropdown horizontal or vertical block, which will be shown to the user when you hover over it with the mouse cursor. When choosing a particular menu, you can be guided by the extent to which visitors will be comfortable to use it and how it will be combined with the design.


After selecting the menu type, open your page fileUsing any text editor that you use to edit HTML. Navigate to the desired area of ​​code in which you want to insert your interface element.


After this, make a list of options by creating a block & lt-div> and making a numbered list with the id assigned to it. For example:

& Lt-div id = "panel">
& Lt-ul> & lt-li> & lt-a href = "address"> Reference 1 & lt- / a> & lt- / li>
& Lt-li> & lt-a href = "address"> Reference 2 & lt- / a> & lt- / li>
& Lt-li> & lt-a href = "address" id = "open"> Reference 3 & lt- / a> & lt- / li> & lt- / ul> & lt- / div>

In this example, a bulleted list of three elements was created, which is placed in the div layer with the assigned panel identifier.


Go to the & lt-style> section of the section& Lt-head> & lt- / head> of your page and create an appropriate menu cascading style sheet. If you want to create a horizontal menu, for the resulting list you can include the inline attribute:

& Lt-head> & lt-style type = "text / css">
#panel ul li {display: inline-}


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-}


Then you can make a visual division into rectangles:

#panel ul li a {margin-left: 3px-border: 1px-padding: 2px 3px-background: blue-}

This code sets the text indent from the elementsBorders through margin-left and padding attributes, and also assigns a background color for each of the list items. In this example, the color is blue, but you can change it at your own discretion.


To point to the point of the current page that is selected in the tab, set the open class to the appropriate parameters:

#menu ul li a # open {background: red-border-bottom: 1px-}
& Lt- / style>
& Lt -! - Further code ->
& Lt- / head>

The current page selected in the panel will now be displayed in red.


Save changes to the file and verifyThe efficiency of the written code by opening your page through the browser. To set additional display options, you can always add CSS or HTML code to improve the appearance of the object.

How to make a menu on the site Was last modified: June 20th, 2017 By Quowuesz
It is main inner container footer text