A good website should have a convenient navigation system. The menu is one of the options for choosing the desired action. The orientation of the menu items in space is not so much important as the ease of use. The good design of the control logic and its continuity across all elements of the dialogue makes the site a compact-comfortable provider of the necessary functionality.
Menu: familiar and comfortable
How to navigate a web resource is a theoretical question. How to make a menu for a site? HTML horizontal or vertical? How on each page to control the behavior of the visitor and provide him with real functionality?
A familiar and comfortable menu is relevant and in demand. The visitor is not interested in theory. The visitor needs a solution to his real problems.
As usual, the HTML document and the horizontal menu are located on the first page of the site and orient the visitor in a systematic view of the services, products or sections of the site, owner, news, contacts.
Orientation in space is not the main thing, but horizontal systematization of the proposed functionality is more familiar. Reading from left to right and from top to bottom is generally accepted not only on Russian-language sites.
Definitely the right sites and their menus
The figure shows the uniquely correct sites. Their menus can be considered examples of design, logic and functionality. However, the opinion of leaders is not so unshakable, sometimes there are exceptions.
As a sample, you can consider the sites:
- Forex international exchange;
- World Health Organization;
- financial system of Russia;
- oil and gas company.
But the amount of money or social significance are not criteria for the quality of web development.
Every menu is the work of a particular developer and the opinion of the team of developers of the popular site management system (CMS) used in the development of the web resource.
In the templates of the best CMS you never drive real life. The use of Internet technologies always necessitates in each case the need to carry out theoretical and practical work to create a comfortable menu.
Classic multifunctional example
As you can see in the image under the number 1, there are four different menus at once. Main page: first a movie, then an HTML document. Everything is horizontal, but each menu is made with a different ratio of HTML tags, load on CSS and use of JavaScript.
The topmost menu (1.1) refers to the visitor (private or legal entity, financial institution or investor). The lowest (1.4) depends on everyone else, and not HTML but the JavaScript and AJAX rules that dynamically form the desired variant of HTML tags.
The middle menus contain the functionality of the company depending on the visitor, the views of the owner and his interests.
Simple dynamic navigation
An example from Google (in the photo under the number 2) is a classic of simplicity of a switching menu. At the beginning of the search, it is one thing, in the search process it is completely different. There is no horizontal HTML drop-down menu, and CSS has a minimal role to play. The moment of switching the final selection variant is important here, and the menu is adjusted to this task.
The competitor of Google - Yandex (figure 3) builds its menu right away. Moreover, the search page here is immediately filled with additional functionality and offers the visitor not only a search function.
Yandex offers immediately:
- Search;
- money;
- mail and others
All functions in pure HTML. Horizontal menus for each functionality. A characteristic feature of Google and Yandex is settings that are performed automatically, but can be changed by the visitor through horizontally oriented functions.
Real static and general practice
The last example (under the number 4) is for developers on the Office XML platform. Documents of the “*. * X” format are in demand, popular, and a site offering a description of the standard uses pure HTML. The horizontal menu contains links to the main sections:
On the Internet you can find many other, less popular, sites. You can always find a modern confident desire for maximum simplicity and functionality.
The era when the developer and designer spent time on smart buttons, drop-down sub-sections, animation and other effects has passed.
Today a beautiful horizontal menu: HTML and CSS or JavaScript - is simplicity, comfort and functionality for the visitor.
Menu: from left to right and from top to bottom or ...
Different countries read differently. The option of moving from left to right and from top to bottom is a book, article, slogan or advertising booklet, but not a website. It is reasonable to focus on such a dialogue organization, but we are talking about a web-based presentation of information that defines the logic of the dialogue with the visitor.
Traditional HTML document: the menu is horizontal with drop-down sub-items for each item. Not only a list of links (points) can drop out, but lists of lists. When a site provides dozens of services (goods), and there can be more than a dozen lines in each position, both the menu itself and its sub-items become a problem.
Usually the problem of a large number of items and sub-items in the menu is solved by scrolling. However, each area of application allows the systematization of information. It is doubtful that there is such a problem for web programming that would not allow a limitation of three to four to seven to nine points.
This amount fits in the HTML page, the horizontal menu is compact and convenient.
If you combine the idea of organizing information and scrolling through a hierarchy of categories, you can implement the great idea of moving not by menu items, but by category of the created information presentation system.
In fact, a site is a systematic presentation of information, and the structure of this presentation is a category, that is, a menu.
Organization of the menu: lists, tables and divas
HTML for the horizontal menu does not divert any special syntax. You can use regular divs (div, span), tables (table, tr, td) and lists (ul, li). The latter is considered the most correct, but there are often designs in which everything is mixed into one: one menu item can be a table, each cell has several divs and a list to describe the subsections.
The HTML / CSS syntax when creating a menu item, if it is based on several divas (i.e., design images), becomes harsh. It is impossible to use a vector in a menu or its item: there is no connection between the meaning of the menu and the logic of the vector (stretching, compression, or other proportional resizing). It remains to use the raster, and this is some HTML. Horizontal menu (main), as well as:
- for a smartphone - its own;
- enlarged - for a large screen;
- contrast - when the monitor is already old;
- for the visually impaired and other options.
In this explanation, it is significant that the orientation in the space of HTML constructs via CSS rules is not so important, as the expression of the meaning of the menu item through JavaScript functionality.
Idea: the contents of the menu and its items determine how to make a horizontal menu in HTML, rather than the rigid construction of the most optimal combination of ul, li, div, table, etc.
Meaning is always important, not a rigid structure. Sense can always be delegated from the server via AJAX to the browser, where the JavaScript function will decorate it into the desired HTML tag and attach a CSS rule to it that determines the location, size and color scheme of the menu (menu item).
Virtual horizontal menu (HTML, CSS, JS)
Google is the undisputed leader in search and more. The idea of dynamically changing the menu appeared a long time ago, but the Google implementation is the simplest in a clear interpretation.
There is no capacious CSS, JavaScript is not expressed, but the search through the classic “google” is due not only to the laurels of the leader, but also to the actual execution.
The transition of a horizontal menu on HTML tags from one meaning to the meaning caused by the search results is a good solution.
Most likely, the Google developers had a completely different view, but the average visitor was used to his understanding of the search logic, the concept of comfort and control of the search engine. The habit has become a custom, and far from the first generation of information seekers uses it.
Raising the habit of visitors is a laborious process, but when it succeeds, they use it, and do not offer radically new doctrines. You cannot break the rules and skills.
If the developer of HTML / CSS / JS changes the technique of creating a horizontal menu to a logical menu of a meaningful one, endowed with elements of reality, perhaps his site will receive a different audience of visitors and a completely different rating among similar ones.