Front-end developer’s Guide: types of horizontal navigation panels
This article is aimed more at novice typesetters, but maybe seasoned professionals will also find something new in it or will refer to it as a reference.
The topic is structured as follows: first, the task is set — the type of the required navigation block is described, then the techniques that allow you to create just such navigation are considered.
It is assumed that the writing of styles is carried out under a semantically correct menu structure, which looks something like this:
When making up for a doctype other than html5, we omit the nav element or replace it with the corresponding div.
Well, let’s get started!..
Menu items located on the right/left side
This section discusses navigation blocks in which elements are placed on the right/left side. For the layout of such blocks, depending on the situation, you can use several ways:
display: inline;
float: left/right;
display: inline-block.
Display: inline
When we apply
This method is advisable to use when making up a simple-looking menu, in which the elements are presented as separate words, without padding and separated only by spaces between them.:
Live example
How is it done
For li elements in CSS, you need to set the display: inline property. By the way, this will also remove markers that are unnecessary in most menus of this type, since they are in additional blocks that are contained in elements with display: list-item, and there are no inlines.
For ul, we set the text-align property to right or left, respectively.
Notes
When using this option, it is worth remembering that vertical margins are not taken into account for inline elements, but horizontal ones work;
if you need pixel perfect layout, there is a chance of encountering a problem: in different browsers, the width of the space between the elements is different. To solve the problem, the distance between the elements is set to margin, and the spaces are removed;
if the underlining in the links of menu items is made lower border, in modern browsers you can get a beautiful animated on :hover menu (JSFiddle).
Float: left/right
When we apply
When it is necessary to make a menu with elements having padding and/or fixed height/width:
Live example
How is it done
Setting float: left or float:right to the li elements. If you need to remove markers, you need to add display: block or list-style: none.
Notes
It is necessary to “clean up” ul by giving it a class.clearfix or by placing an element with clear: both at its end, otherwise ul’s height will be zero; you can read about other ways to “clean” floats here;
an example of an interesting menu made by floats: html5guy.
Display: inline-block
When we apply
The tasks are the same as for layout with float. And yes, when solving such a problem, inline-block fell in an unequal battle. Firstly, the cross-browser compatibility of such a solution is lower than that of float, and secondly, gaps appear between inline blocks, as well as between inline elements, often unnecessary. These problems are solvable, but why create them?
How is it done
Setting display: inline-block to li elements. Well, for IE7 (if you support it) we prescribe *display:inline; *zoom: 1.
Symmetrical navigation blocks relative to the left and right sides
This section discusses the navigation blocks arranged symmetrically. There are several types of such menus; each of them has its own layout method:
menu items are centered;
the menu items are evenly distributed across the entire width, there is a gap between the elements;
the menu items are evenly distributed across the entire width, the elements fill the entire width of the ul.
Menu items are centered
When we apply
The menu is located in the center:
Live example
How is it done
Depending on the type of menu items, we set display: inline or display: inline-block (if padding is provided for menu items and width and/or height is set) to the li elements. To the parent (ul), set text-align: center.
Notes
Let me repeat myself: sometimes there is a need to remove spaces between inline and inline-block elements; several ways to solve this problem can be found here.
The menu items are evenly distributed across the entire width, there is a gap between the elements
When we apply
Menu items are evenly distributed across the entire width, there are gaps between individual items:
Live example
How is it done
Depending on the type of menu items, we set display: inline or display: inline-block to the li elements. To the parent (ul), set text-align: justify. But justify won’t work right away — you need to overflow the first line (if it’s not clear why this is the case, we launch the word and try to stretch a few words to the full width using justify). Therefore, at the end of the ul element, we add an additional element with display: inline-block and width: 100%, or, better, a pseudo-element ::after with the same characteristics.
Notes
Remember, in previous menu types we removed spaces between elements with the display property set to inline and inline-block? So, in this case, it is absolutely impossible to do this — the browser needs gaps between menu items. By the way, if you remove the spaces between some elements, you can group buttons (JSFiddle):
The menu items are evenly distributed across the entire width, the elements fill the entire width of the ul.
When we apply
There are no gaps between menu items, any number of menu items occupies the entire width:
Live example
How is it done
When solving this problem, there is a temptation to make up the menu with tables; but we are not going to violate the semantics of the document, are we? Therefore, we use display: table-cell for li and display: table for ul; then we set the width for ul
If you need support for older browsers, we use a polyfill script that replaces such blocks with tables for IE6 and IE7, or we organize a fallback in other ways.