Adaptive horizontal menu
Perhaps the most popular type of navigation is the horizontal menu. Today, most sites use this type of navigation, it greatly simplifies browsing. But what if the menu has more browser resolution?
Often, the width of the menu directly depends on the number of elements in the menu, and the more elements, the greater should be the resolution at the user screens.
In this case, the lower the resolution of the user, the greater the possibility that the menu will not appear as it should. Not as it should - jumps in two lines. To eliminate this, we implement an adaptive menu that will adapt to the size of the user's browser, more precisely, to its width.
To adapt the menu, an additional “more” menu is introduced into which menus that are not included in the width of the browser window are transferred. Let us analyze it by example, a menu of 5 items.
The figure shows that the width of the window is 775px, and the total width of the menu is 686px. Further, when reducing the width of the window, the menu item “more” will appear in which the items “menu 4” and “menu 5” have passed.
')
The design of the menu will change with decreasing and increasing the width of the browser window.
I will not litter a code (especially it is not so good :-)). I'll tell you only the principle - knowing the width of the screen and the width of each menu item, we summarize them and compare them by condition.
Here is an example .
P.S. I will be grateful who will tell you how to improve the code. Write in a personal I will rule and thank :)
How to deal with the size of the menu?
Often, the width of the menu directly depends on the number of elements in the menu, and the more elements, the greater should be the resolution at the user screens.
In this case, the lower the resolution of the user, the greater the possibility that the menu will not appear as it should. Not as it should - jumps in two lines. To eliminate this, we implement an adaptive menu that will adapt to the size of the user's browser, more precisely, to its width.
Adaptive menu - the solution!
To adapt the menu, an additional “more” menu is introduced into which menus that are not included in the width of the browser window are transferred. Let us analyze it by example, a menu of 5 items.
The figure shows that the width of the window is 775px, and the total width of the menu is 686px. Further, when reducing the width of the window, the menu item “more” will appear in which the items “menu 4” and “menu 5” have passed.
')
The design of the menu will change with decreasing and increasing the width of the browser window.
Js!
I will not litter a code (especially it is not so good :-)). I'll tell you only the principle - knowing the width of the screen and the width of each menu item, we summarize them and compare them by condition.
Here is an example .
P.S. I will be grateful who will tell you how to improve the code. Write in a personal I will rule and thank :)
Source: https://habr.com/ru/post/83300/
All Articles