Пожалуй самым популярным типам навигации является — горизонтальное меню. Сегодня большинство сайтов используют данный тип навигации он значительно упрощает просмотр страниц. Но как быть если меню больше разрешения браузера?
Зачастую ширина меню напрямую зависит от количества элементов в меню, при этом чем больше элементов тем больше должно быть разрешение у экранов пользователей.
При этом чем меньше разрешение у пользователя тем больше возможности что меню отобразится не так как надо. Не как надо это — перепрыгивает в две строки. Для устранения этой реализуем адаптивное меню, которое будет адаптироваться к размерам браузера пользователя, точнее к его ширине.
Для адаптации меню вводится дополнительное меню «еще» в которое переносятся меню не входящие в ширину окна браузера. Разберем это на примере, меню из 5 элементов.
На рисунке видно что ширина окна равна 775px, и суммарная ширина меню 686px. Далее при уменьшении ширины окна появится пункт меню «еще» в который перешли пункты «меню 4» и «меню 5».
Оформление меню будет меняться при уменьшении и увеличении ширины окна браузера.
Не буду сорить кодом (тем более он не так и хорош :-) ). Расскажу лишь принцип — зная ширину экрана и ширику каждого элемента меню суммируем их и по условию сравниваем.
Вот пример.
П.С. Буду благодарен кто подскажет как можно улучшить код. Пишите в личку буду править и благодарить :)
Как быть с размерами меню?
Зачастую ширина меню напрямую зависит от количества элементов в меню, при этом чем больше элементов тем больше должно быть разрешение у экранов пользователей.
При этом чем меньше разрешение у пользователя тем больше возможности что меню отобразится не так как надо. Не как надо это — перепрыгивает в две строки. Для устранения этой реализуем адаптивное меню, которое будет адаптироваться к размерам браузера пользователя, точнее к его ширине.
Адаптивное меню — решение!
Для адаптации меню вводится дополнительное меню «еще» в которое переносятся меню не входящие в ширину окна браузера. Разберем это на примере, меню из 5 элементов.
На рисунке видно что ширина окна равна 775px, и суммарная ширина меню 686px. Далее при уменьшении ширины окна появится пункт меню «еще» в который перешли пункты «меню 4» и «меню 5».
Оформление меню будет меняться при уменьшении и увеличении ширины окна браузера.
JS!
Не буду сорить кодом (тем более он не так и хорош :-) ). Расскажу лишь принцип — зная ширину экрана и ширику каждого элемента меню суммируем их и по условию сравниваем.
Вот пример.
П.С. Буду благодарен кто подскажет как можно улучшить код. Пишите в личку буду править и благодарить :)