How To Make A Navigation Menu

Table of contents:

How To Make A Navigation Menu
How To Make A Navigation Menu

Video: How To Make A Navigation Menu

Video: How To Make A Navigation Menu
Video: Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox 2024, April
Anonim

To prevent visitors from getting lost on the site and from any page they can access the desired section of the resource, it is necessary to create a navigation menu. Pointing elements should be placed on web pages in such a way that they do not interfere with the reading of the text and at the same time can be easily found on the site. Visitors can get to the necessary parts of the resource by clicking on the corresponding words or images. To supply the resource with such a menu, it is enough to enter a simple code in the necessary parts of the site.

How to make a navigation menu
How to make a navigation menu

Necessary

  • - the presence on your own site of several pages or sections
  • - several small icons on the theme of the site
  • - know how to upload pictures to the site

Instructions

Step 1

To make a menu bar a link, write it like this:

MAIN PAGE

In this entry, replace http: ⁄ ⁄website.ru with the URL of the page you want.

Step 2

The code for a horizontal menu consisting of text links is written as follows:

MAIN PAGE

|

GALLERY

|

FORUM

|

GUEST BOOK

Step 3

Vertical strokes serve as delimiters between menu items in a line. To set the character "|" from the keyboard you need to press and hold the Shift key with one finger on the English layout, and with the other - select the "| / " button, which is located to the right of the letter "b". Be sure to put a space before and after the stroke so that the menu items are spaced from each other.

Step 4

You can create a vertical menu from links using the following entry:

MAIN PAGE

GALLERY

FORUM

GUEST BOOK

Step 5

In this case, the separator of the menu parts is the tag, which wraps the text following it to a new line.

Step 6

If you want to make menu items not in the form of words or phrases, but in the form of images that will act as links, then first fill in the site with all the images that will be used in the navigation of the resource.

Step 7

To place an image on a web page, you need to put this code in the right place: To place your own image, instead of http: ⁄ ⁄website / images / 1.png, write the path to the desired image uploaded to your site.

Step 8

Write each item of the graphical menu in this way:

In this code, replace http: ⁄ ⁄website.ru with the desired address, and with the code of the desired picture.

Step 9

You can create a horizontal menu consisting of images in this way:

Step 10

In this code, all the pictures in the cells are located in one row of the table. The width of the table, set not in pixels, but in percentage, allows the table contents to be stretched to the full width of the window, regardless of the screen resolution. Tags:

and

form a table row, and

and

- one of the cells.

Step 11

To place such a graphical menu on the site, replace links, paths to images and names of resource sections with your own in the code.

Recommended: