Adaptive menu for a modern site - notjust a luxury, but a necessity. The abundance of modern devices requires webmasters of a typesetting that would be logically displayed on screens of different resolutions. And in some cases, creating an adaptive menu is much more difficult than the design itself, and therefore it is necessary to consider this question.
Menu for the big screen
To understand the general layout of adaptivemenu, you will first need to create a menu structure in HTML and style it with CSS. Then, based on the material obtained, an adaptive template can be improved. So, the HTML structure will look like this.
Menu for two items in HTML |
 |
You will need to add CSS styles to the resulting menu. They should indicate the size and color of the font, the background, the positioning of the blocks.
Adaptation process
Creating simple functionality for normalcomputer screen - a simple matter, and this can be seen in the example. The adaptive menu for the site is created only when there is something to work with, that is, when navigation points have already been added. The most optimal menu option for mobile devices and tablets will be the hamburger icon - a square box in which three vertical lines are drawn. When pressed, all menu items open. To create such a navigation, you need to add tags to the HTML document.
HTML document tags |
 |
Next you will need to add to these tagsrelevant styles to make a visually appealing and readable menu. In addition to the visual design of navigation and menu icons, you need to arrange the image position accordingly. Thus, the condition is entered menu_icon span: nth-child (1) {top: 0 px} ;. That is, the indentation of the image above will be zero pixels. Similarly, you need to set values for other parties.
Now the adaptive menu is almost ready.It is worth paying attention to the condition display: none. By default, the menu icon will not be visible on the site, so an additional class with the following condition must be added to the CSS document: .menu__icon {display: inline-block;}. This will make the navigation visible.
In addition, you must add to the cascade tablestylesheet task that will hide paragraphs and subparagraphs as needed. To do this in CSS, you need to set a fixed menu position, arrange the display and alignment. Items are hidden using overflow conditions: auto; opacity: 0; z-index: 1000. You can also add the menu__links-item class, which will indicate the style for the menu items, but this is optional by the developer.
Finishing touch
So the CSS responsive menu is almostit is finished. In order for it to be displayed when clicking on the icon, you need to add functions. For simplicity, it is better to use jQuery, but if you want, you can create pure JavaScript. Both the same condition will be used there:
- (function ($) {$ (function () $ (". menu__icon"). on ("click", function () $ (this) .closest (". menu"). toggleClass ("menu_state_open");}) ;});}) (jQuery).
On this layout of adaptive navigation ends. But this is only one of several options for creating this kind of functional, so it is worth considering the rest. At least a few of them.
Without changing standards
The main part of Internet users expectssee the navigation bar at the top of the site. This has already become a kind of standard, so the adaptive horizontal menu should have a decent look. It can be done using CSS, as in the examples above, or by connecting a handler script. In general, creating an adaptive menu consists of 3 steps:
- Writing HTML tags
- Their styling with cascading style sheet (CSS).
- Adaptation of an existing menu.
Naturally, all sites have their own menu lines, but if the resource is created on the CMS, then it will be much easier to create a new adaptive menu.
Bootstrap
Creating adaptive functionality is notsuch a serious problem if you use the Bootstrap tools. There are already laid out templates for creating a horizontal menu. You just need to connect to the resource file bootstrap.js. With this framework, a webmaster can create navigation of any complexity. Adaptive menu with Bootstrap is created using a specific code.
An example of a horizontal adaptive menu of 3 points |
 |
Features of the method
Let this code be cumbersome, but understandable. It is worth noting that the main role is played by the tag navthat is responsible for creating the navigation and its appearance. Also containers are connected here. container-fluid and containerthat set the width of the points. With their help, you can force the menu to expand on screens of different resolutions or leave it fixed.
An important role in the creation of adaptive functional classes here play collapse and navbar-collapsewho are responsible for the style. The menu itself is created by recording a bulleted list of items that are placed horizontally.
If you use this code to create navigationframes, it will look like a horizontal banner on wide screens. At the beginning will be the name of the resource, and then the items in a strictly defined sequence. On narrow screens, only the site name and the hamburger icon will be displayed, when clicked, which menu items are displayed in a vertical list.
Drop-down menu
Resource Bootstrap will be a great help to create an adaptive drop-down menu. To do this, simply replace the tag line
Drop down items |
 |
Similar can be done for one item, soand for a few. An arrow pointing down will appear near the position with drop-down items. When clicked, the created list will appear. If the navigation is displayed on a small screen, the item with a drop-down list will also be indicated by an arrow, but with a direction to the right. When clicked, another vertical list of sub-items will appear.
Multi-level menu
However, you cannot create drop-down lists.only with Bootstrap. If this library is not connected, you can create an adaptive multi-level menu using HTML and CSS, followed by connecting the PHP function.
First you need to create an HTML fileunnumbered list that includes other lists. For this you should use the standard tags
- and
- . We should not forget about the formation of classes, which will be further processed by the cascading style sheet CSS. In order to be more understandable, it is worth giving a small example of writing lists and creating classes.
HTML navigation bar list
An adaptive drop-down animation is setusing cascading style sheets. Here you need to specify the parameters for the menu when reducing the screen by 50, 75 and 25%. This approach to the creation of adaptive functionality provides a competent layout, in which the menu does not "move out."
And in conclusion, it is necessary to enter into the document the function indicated below.
Function
If the site is not thought to useany functions other than this, it is still necessary to create a separate script document for it. If you enter it in plain HTML, it will simply appear in the browser window as part of the text and will not work.
Jquery
Also a great solution would be to create a panel.navigation on the jQuery plugin. Adaptive menu on this service is just a few minutes. The plugin itself can be downloaded on the Internet, it has a simple and intuitive interface that is easy and simple to use. So there should be no problems connecting the stylesheet file.
After the style file is connected, you need to write a script to create adaptive navigation.
After that, you need to lay out the navigation, if it does not already exist. Here everything works according to the principle: “All ingenious is simple.” In an HTML document, you must create a bulleted list in the tag. nav. You can use the example given earlier or its simplified version, which looks like the one shown below.
HTML menu items
At this stage, only the logo will be displayed in the browser, and the menu itself will be hidden. For it to appear, you need to add a function that causes changes to the plug-in - okayNav.
Function
$ (function () {
var navigation = $ ("# nav-main"). okayNav ();
});
Now you can look at the results of the work.With a normal width of the browser window, this menu looks completely normal, but if you reduce the screen, the last items disappear. Instead, there are three large points located vertically. When pressed, they seem to turn over, taking a horizontal position, and the hidden menu items are revealed in a vertical list in the upper right corner of the screen.
This solution looks very modern, and the animated effect involved puts the resource in a favorable light in front of visitors.
Joomla
And the last option to create an adaptive menu withusing the Joomla system. This is a free website creation service, which is a CMS content management system. And as mentioned at the very beginning, if the site is created using a CMS, and you need to change the existing menu to adaptive, then it is best to start building the site’s functionality from the very first tag. Just as in the previous examples, you need to create a bulleted menu list in HTML. Only for each item you need to write your class. In total, everything looks as shown below.
Menu for jooble
Next you need to add styles.It is best to set all indents to 0 px and apply box-sizing: border-box. This will give the opportunity to save the specified width of elements regardless of how many indents will be. Further, for the parent menu item (div), it is necessary to set the width to 90% and then begin to stylize each item separately.
You can remove borders, change color and shading,make a design that will appear when you hover the cursor. In short, to do everything that will match the design of the resource. The final step in creating a responsive Joomla menu is to transform it. Most often on Joomla create such a menu, which, when the screen size is changed, is automatically rebuilt, dividing into several lines. All this is also done in CSS, the only function that should be enabled is the condition of cross-browser compatibility. It allows the menu to look the same in different browsers.
Cross-browser function
Creating an adaptive menu is really hardthis requires knowledge and experience. All the examples described are only a small part of the possible variations, but even they can be useful if the person has basic knowledge of HTML and CSS.
