February 6, 2010 at 13:58Adaptive horizontal menu
Perhaps the most popular types of navigation is the horizontal menu. Today, most sites use this type of navigation, it greatly simplifies the viewing of pages. But what if the menu is greater than the browser resolution?
Often the width of the menu directly depends on the number of items in the menu, and the more items, the greater should be the resolution of user screens.
Moreover, the lower the user’s resolution, the greater the possibility that the menu will not be displayed 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’s take a look at this example, a menu of 5 elements.
The figure shows that the window width is 775px, and the total width of the menu is 686px. Then, when reducing the width of the window, the menu item “more” will appear, into which the items “menu 4” and “menu 5” have passed.
The design of the menu will change with a decrease and increase in the width of the browser window.
I will not litter the code (especially since it is not so good :-)). I’ll only tell you the principle - knowing the width of the screen and the width of each menu item, summarize them and compare them by condition.
Here is an example .
P.S. I would be grateful who will tell you how to improve the code. Write in a personal will edit and thank :)
What about the size of the menu?
Often the width of the menu directly depends on the number of items in the menu, and the more items, the greater should be the resolution of user screens.
Moreover, the lower the user’s resolution, the greater the possibility that the menu will not be displayed 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.
The adaptive menu is 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’s take a look at this example, a menu of 5 elements.
The figure shows that the window width is 775px, and the total width of the menu is 686px. Then, when reducing the width of the window, the menu item “more” will appear, into which the items “menu 4” and “menu 5” have passed.
The design of the menu will change with a decrease and increase in the width of the browser window.
Js!
I will not litter the code (especially since it is not so good :-)). I’ll only tell you the principle - knowing the width of the screen and the width of each menu item, summarize them and compare them by condition.
Here is an example .
P.S. I would be grateful who will tell you how to improve the code. Write in a personal will edit and thank :)
