An adaptive menu for a modern site is not just a luxury, but a necessity. The abundance of modern devices requires webmasters to make such a layout that would logically be 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 issue.
Menu for the big screen
To understand the general layout layout of an adaptive menu, you will first need to create a menu structure in HTML and style it with CSS. Then, based on the received material, you can improve the adaptive template. So, the HTML structure will look like this.
You will need to add CSS styles to the resulting menu. They should indicate the font size and color, background, positioning of the blocks.
Adaptation process
Creating simple functionality for a regular computer screen is a simple matter, and this can be seen in an example. An adaptive menu for the site is created only when there is something to work with, that is, when navigation items 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 are opened. To create such a navigation, you must add tags to the HTML document.
Next, you will need to add appropriate styles to these tags to get a visually attractive and readable menu. In addition to the visual design of navigation and menu icons, you need to arrange the image position accordingly. So, the menu_icon span: nth-child (1) {top: 0 px}; condition is introduced. That is, the indent of the image from 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 must be added to the CSS document with the following condition: .menu__icon {display: inline-block;}. This will make the navigation visible.
In addition, it is necessary to add a task to the cascading style sheet, which will hide the items and sub-items as necessary. 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 class menu__links-item, which will indicate the style for menu items, but this is already at the request of the developer.
Finishing touch
So the responsive CSS menu is almost done. In order for it to be displayed when you click on the icon, you must add functions. For simplicity, it is better to use jQuery, but if you want, you can create pure JavaScript. Both there and there will be used the same condition:
- (function ($) {$ (function () $ ('. menu__icon'). on ('click', function () $ (this) .closest ('. menu'). toggleClass ('menu_state_open');}) ;});}) (jQuery).
This completes the layout of adaptive navigation. But this is only one of several options for creating this kind of functionality, so it’s worth considering the rest. At least a few of them.
Without changing standards
Most internet users expect to see 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, both in the examples that are given above, and by connecting a handler script. In general, creating an adaptive menu consists of 3 steps:
- Writing HTML Tags
- They are styled using a cascading style sheet (CSS).
- Adapting an existing menu.
Naturally, all sites have their own menu bars, 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 not such a serious problem if you use the Bootstrap tools. There are already pre-laid templates for creating a horizontal menu. You just need to connect the bootstrap.js file to the resource. With the help of this framework, the webmaster gets the opportunity to create navigation of any complexity. The responsive menu with Bootstrap is created using specific code.
An example of a horizontal adaptive menu with 3 points |
|
Method Features
Let this code be cumbersome, but understandable. It is worth noting that the nav tag plays the main role here, which is responsible for creating the navigation and its appearance. Also, container-fluid and container containers are connected here, which specify the width of the items. With their help, you can make the menu expand on screens of different resolutions or leave it fixed.
Collapse and navbar-collapse classes, which are responsible for the style, play an important role in creating adaptive functionality. The menu itself is created by recording a bulleted list of items that are placed horizontally.
If you apply this framework code to create navigation, then on wide screens it will look like a horizontal banner. At the beginning will be the name of the resource, and then the items in a strictly specified sequence. On narrow screens, only the site name and the hamburger icon will be displayed, when clicked, the menu items are displayed in a vertical list.
Drop-down menu
The Bootstrap resource will be a great helper for creating responsive dropdown menus. To do this, simply replace the line of the <li> tag from the previous example with the code below.
This can be done both for one item, and for several. An arrow pointing down will appear near the item with drop-down subparagraphs. When clicked, the created list will appear. If the navigation is displayed on a small screen, then the item with a drop-down list will also be indicated by an arrow, but with a direction to the right. When pressed, another vertical list of sub-items will appear.
Layered menu
However, you can create drop-down lists not only with Bootstrap. If this library is not connected, you can create an adaptive multi-level menu using HTML and CSS and then enable the PHP function.
First you need to create an unordered list in the HTML file that includes other lists. To do this, use the standard <ul> and <li> tags. You should also not forget about the formation of classes, which will be further processed by a cascading CSS style sheet. In order to make it more clear, it is worth giving a small example of writing lists and creating classes.
The adaptive drop-down menu animation is set using a cascading style sheet. Here you need to specify the parameters for the menu when reducing the screen by 50, 75 and 25%. This approach to creating adaptive functionality provides a competent layout, in which the menu does not "move out".
And finally, it is necessary to enter into the document the function indicated below.
If the site does not think over the use of any functions other than this, then all the same for it you need to create a separate script document. If you enter it into regular HTML, it simply appears in the browser window as part of the text and will not work.
JQuery
Also a great solution would be to create a navigation bar on the jQuery plugin. The adaptive menu on such a service is done in 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 shouldn’t be any problems connecting the stylesheet.
After the stylesheet is connected, you need to write a script to create adaptive navigation.
After that, you need to make up the navigation, if it is not already. Here, everything operates according to the principle: "Everything ingenious is simple." In an HTML document, you need to create a bulleted list in the nav tag. You can use the example already given earlier or its simplified version, which looks like the one shown below.
At this stage of the work, 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 the plugin to change - okayNav.
Function |
$ (function () { var navigation = $ ('# nav-main'). okayNav (); }); |
Now you can look at the results of the work. With the normal width of the browser window, this menu looks completely normal, but if you reduce the screen, then the last items disappear. Instead, three large points appear vertically. When pressed, they seem to flip over, taking a horizontal position, and hidden menu items are opened with a vertical list in the upper right corner of the screen.
This solution looks very modern, and the involved animation effect sets the resource in a favorable light for visitors.
Joomla
And the last option is to create an adaptive menu using the Jumla system. This is a free website creation service, which is a CMS content management system. And as already mentioned at the very beginning, if the site was created using CMS, and you need to change the existing menu to adaptive, then it is best to start making the site’s functionality from the very first tag. Just like in the previous examples, you need to create a bulleted menu list in HTML. Only for each item you need to write your own class. In total, everything looks as shown below.
Next you need to add styles. It is best to set all padding to 0 px and use box-sizing: border-box. This will make it possible to maintain the specified width of the elements, regardless of how many indents there are. Further, for the parent menu item (div), you should set the width to 90% and after that start styling each item individually.
You can remove borders, change color and fill, make a design that will appear when you hover over it. In a word, do everything that matches the design of the resource. The final step in creating a Joomla responsive menu is to transform it. Most often, a menu is created on Joomla that, when the screen size is changed, is automatically rebuilt, dividing into several lines. This is also done in CSS, the only function that should be connected is the condition of cross-browser compatibility. It allows menus to look the same across browsers.
Creating an adaptive menu is really not easy, it requires knowledge and experience. All the examples described are just a small part of the possible variations, but even they can be useful if a person has basic knowledge of HTML and CSS.