Make page navigation. Using the Navigation Pane in MS Word. Obtaining a satellite image or map of the area

A high-quality website should be good from all sides. It is enough to visit several popular projects to understand that each of them was great job, on setting up absolutely all components.


In this article we will highlight such an important factor as navigation, which beginners often forget about.

Correct site navigation is not just about setting up menu items and their location, it is about ensuring a comfortable transition through the resource. It is unlikely that visitors who will not be comfortable making transitions within the site will spend much time on it, much less will constantly visit the resource.

What kind of navigation should be done on the site?

To make site navigation convenient, you will first have to develop the structure of your resource. You can take a regular piece of paper and indicate on it all the important pages that your visitors will go to. When developing the structure, remember the golden rule - each material should be accessible in 3 clicks from the main page.

Developing convenient navigation site, be sure to install a site map. This will help visitors benefit from the content of your resource.

The site navigation system should become a guide for every visitor. How competent, thoughtful and convenient it is depends behavioral factors. Will the visitor find necessary information whether he will spend a lot of time on the site and whether he will return to it in the future.

For a site's navigation bar to be useful, it must be simple and effective. The level of traffic conversion even depends on this. This applies not only to the main menu, correct navigation should be on every page. Visitors should have hints on where to go and what to click.

Rules for good navigation

Navigation should lead visitors to targeted actions. If this is an online store, then you need to build the structure so that it guides the user to purchase. It will take a lot of time to set up, and you still need to do testing, but it's worth it.

So as not to miss important points, consider the following recommendations:

  1. Intuitiveness. Navigation doesn't have to be complicated, so no matter how much you might like it, it's better not to complex shapes and menus written, for example, in Flash. It is better to use standard navigation with a familiar interface.
  2. Significance. There is no point in adding new menu items, links and blocks to present content that is not important to your visitors. Each navigation element should be useful; you should not overload the resource.
  3. Identity. Some webmasters deliberately try to show their creativity and create different navigation for individual pages of the site. It is better not to do this, as visitors can easily get confused.
  4. Harmony. All navigation elements that you install on the site should fit well into the overall design of the resource. This applies not only to the menu, but also to elements such as breadcrumbs or blocks with links.

Correct site navigation is important factor any resource, and for webmasters who do not want to do everything in standard form, you need to understand that not a single visitor will waste time studying your interface. It is much easier to go to another site.

Convenient site navigation starts from the main menu

Work on improving usability should begin with the main menu. It is the content of the project for visitors. Each user will pay attention to the main menu and from it will draw conclusions about what data can be found here. That is why the main menu should have the best items.

Just don’t rush to add as many points as possible to show how much various information Online. Numerous tests have shown that visitors perceive only 5-7 menu items. What happens to the rest? They simply don't get taken into account.

For example, if you are preparing a menu for an online store, the optimal main menu items will be: services, prices, contacts, catalog, about the company.

The menu block must be placed on each page and used in a prominent area. As a rule, this is the upper left corner of the screen, but it all depends on the design of the site (the menu can be horizontal). There is no need to be creative here, users are already accustomed to a certain format, so use it.

Page-by-page site navigation – internal linking

On each separate page, it is necessary to work out the amenities separately. When adding new pages, it is better to immediately put links to other materials. We have already told you... This is very important for an information site, and it is also convenient to link to articles relevant to the topic.

Owners of services and online stores can add various blocks where they will present similar products, additional tools and so on. the main objective all this is to increase the number of internal transitions, some of the visitors may simply not know what else is on the site.

What else should I use? Additional menus on each page. While listing, we mentioned bread crumbs. Installing such functionality is not difficult; plugins have been created for all engines:

This is an example of an additional menu with which the visitor can easily navigate the structure and understand where he is in this moment. Perhaps a person will get to the page directly from search engine, in this case he will definitely need such a menu. Just make it noticeable.

Site page navigation

Not long ago I decided to improve my blog and now many articles have content. Such site navigation elements help you quickly navigate the page if it contains a lot of information. Users may be looking for something specific, why force them to read lengthy materials.

As for online stores, it is better not to load the pages with information, but to divide it into several parts. The ideal option is to add extra menu with navigation to the most important data - characteristics, reviews, prices, similar products, and so on:

Navigation of a website used for sales should be as convenient as possible. The fewer clicks a client makes on the website to order, the better. Therefore, in addition to different menus On the product page there must be buttons for ordering, going to cart, payment and other buttons (links).

How to make website navigation: additional menus

While some webmasters fill sidebars with banners, others install additional links and menu. I chose the second option; under the main menu on each page of my blog there are several more types of menus, which provide links to the most useful materials.

Ideally, it is advisable to make such menus linked to certain sections. For example, if a person is interested in Forex, then show him one menu, and if he creates a website, then show him completely different items. So far, on the Workion blog, everyone is shown the same menu, where the best articles are collected.

Again, let's say a few words about commercial sites. You can also create blocks on them, and if there are no articles on the site, start from what is there. Make a selection of best-selling products, popular services, product categories with promotions, hot offers and much more.

The ease of navigation of the site needs to be constantly improved. To figure out what needs to be worked on, ask your friends to use the site and express their opinion regarding the convenience. Let them express their opinion, just don’t run to fix everything, use your head, you need to listen to the majority and professionals.

You might also be interested in:


I would be grateful if you share this article on social networks:

Last update: 04/27/2016

The navigation bar plays an important role on the site, as it provides transitions between pages of the site or to external resources. Let's look at how to create a simple navigation bar.

Essentially, a navigation bar is a collection of links, often in the form of an unnumbered list. Navigation bars come in a variety of forms: vertical and horizontal, single-level and multi-level, but in any case, at the center of each navigation is an element . Therefore, when creating a navigation bar, we may encounter a number of difficulties that arise from the limitations of the link element. Namely, the element is lowercase, which means that we cannot specify width, height, or padding for it. The width of the link automatically takes up the space it needs.

Vertical menu

A common solution to this problem for creating a vertical menu is to make the link a block element.

Navigation Bar in HTML5

After setting the display: block property, we can determine the width, padding, etc. of the link block.

Horizontal menu

For creating horizontal menu There are two methods. The first is to use float properties and creating floating elements from links that flow around each other from the left. And the second way is to create a link line by setting the display: inline-block property.

Using floats

The algorithm for creating a navigation bar using float is divided into two stages. At the first stage, the li element containing the link is set to float: left; . This allows all list items to be lined up with enough width that the right list item wraps around the left list item.

The second stage is to set the display: block link to the element, which gives us the opportunity to set the width, padding, and in general all those features that are typical for block elements.

Navigation Bar in HTML5

inline and inline-block

To create a horizontal navigation bar, we need to make each li element inline, that is, set its display: inline . After that, for the link element that is located in the li element, we can set display: inline-block:

Navigation Bar in HTML5

In order to conveniently navigate the site, you need navigation, which I did using HTML scripts and CSS. As a result of my work, you can see 2 types of menus (vertical and horizontal). And now, I’ll try to talk about the tasks that, in my opinion, a menu for a site should perform:

  • Ease of use;
  • Navigation must be created for all sections of the site;
  • Each page of the site should have access to home page;
  • Go to any page of the site in a maximum of 3 clicks.

Here I will try to present as much material as possible on creating a menu, get ready, many may have difficulties, at least I did. So, let's begin!

First of all, I'll tell you how to do it. First we write the script in the style sheet:

#navigation ( width: 560px; height: 50px; margin: 0; padding: 0; background-image: url(img/gor_menu.jpg); background-repeat: no-repeat; background-position:center; ) #navigation ul ( list-style: none; margin: 0; padding: 0; ) #navigation ul li ( display: inline; margin: 0px; ) #navigation ul li a ( height:28px; display: block; float: left; color: #333333; text-decoration: none; font-size: 12px; background-image: url(img/menu_separatorline.jpg); position: right center; padding-right: 15px; padding-left: 15px ) #navigation ul a:hover ( color: #FFF; background-image: url /button_hover.jpg); background-repeat: repeat-x; background-position: left top; ) #navigation ul li#active a ( background-image: url(img/button_hover.jpg); background-repeat: repeat-x ; background-position: left top;

Don't be alarmed, there's nothing wrong with this code. To make it clearer for you, I’ll immediately write the HTML code for of this menu:

As you can see, we are dealing with a list, which without a style sheet is nothing worthwhile. The div statement calls variables from an external table CSS styles, then our list is transformed and turns into what I think is a pretty horizontal menu.

Now we need to explain a little what this refers to, then I think you’ll figure it out on your own:

— contains the entire menu structure. The top image, which I prepared in advance in Photoshop, will be inserted into it;

— the body of the menu, contains an unordered list. An image will be inserted into it, which will be repeated vertically and create a background. Maybe I chose too bright colors, but in my opinion they do not hurt the eyes;

— contains the frame of the menu itself;

  • Creating a site menu
  • - this is one of the positions where you will need to insert the necessary link into a href="#";