Меню сайта на мобильных устройствах должно быть, с одной стороны, легко доступно, а с другой, не должно транжирить дефицитное экранное пространство. Об одном из вариантов компромиссных решений этого вопроса будет рассказано ниже.
Я постарался применить некоторые принципы адаптивного дизайна на сайте, который я сделал много лет назад, и время от времени развиваю. На больших экранах сайт имеет боковую колонку, в которой расположено вертикальное главное меню сайта и другие инструменты навигации: поиск, календарь, теги. На малых экранах эта колонка не показывается, и вместо неё появляется узкая полоска горизонтального меню в шапке страницы. Это горизонтальное меню уже, в свою очередь, содержит ссылки, открывающие главное меню, форму поиска или список тегов, на всю ширину экрана.
Как-то раз, я читал длинную страницу на своём сайте, используя для этого мой смартфон. Дочитав, и соответственно, постепенно прокрутив страницу далеко книзу, я решил перейти к другой странице сайта, для чего мне, естественно, нужно было ткнуть в меню. Но чтобы добраться до меню, мне теперь пришлось очень долго и нудно прокручивать страницу обратно кверху. Я подумал, что это неудобно, и нужно с этим что-то предпринять. Навскидку, напрашиваются два варианта: либо закрепить где-то статично кнопку «Вверх», либо статично закрепить само меню. Первое мне сразу не понравилось. Если уж воровать у посетителя, и без того дефицитное, пространство экрана, то хотя бы не заставлять его делать дополнительный тык пальцем, а зафиксировать само меню. Но я люблю держать смартфон горизонтально, когда просматриваю сайты. Так у меня и шрифт получается крупнее, и меньше вероятность появления горизонтальной прокрутки, и если понадобится набирать текст, то у меня быстрее получается это делать двумя большими пальцами на более крупной виртуальной клавиатуре.
Но в такой ситуации, если отъесть сверху горизонтальную полосу, то особенно после прокрутки кверху (даже небольшой), когда браузер показывает строку адреса, полезное пространство для веб-страницы становится совсем уж неприемлемо узким. Вот если бы я держал смартфон вертикально, тогда украсть горизонтальную полоску сверху было бы вполне приемлемо, так как под ней останется ещё уйма места, и эта кража вообще останется незамеченной. И тут я изобрёл «блуждающее меню». То есть, конечно, вполне возможно, что я не первый это изобрёл, но мне такое нигде раньше не попадалось. «Блуждаемость» меню заключается в том, что когда я держу смартфон горизонтально, полоска меню становится вертикальной, и приклеивается к одному из боков экрана. А когда я держу его вертикально — меню становится горизонтальным и фиксируется у верхней границы экрана. Вот как это выглядит:
Таким образом, меню всегда ворует место там, где его достаточно, не создавая ощутимых помех пользователю.
Реализовать это оказалось несложно. Вот, сокращённо, разметка:
Стили:
Я постарался применить некоторые принципы адаптивного дизайна на сайте, который я сделал много лет назад, и время от времени развиваю. На больших экранах сайт имеет боковую колонку, в которой расположено вертикальное главное меню сайта и другие инструменты навигации: поиск, календарь, теги. На малых экранах эта колонка не показывается, и вместо неё появляется узкая полоска горизонтального меню в шапке страницы. Это горизонтальное меню уже, в свою очередь, содержит ссылки, открывающие главное меню, форму поиска или список тегов, на всю ширину экрана.
Как-то раз, я читал длинную страницу на своём сайте, используя для этого мой смартфон. Дочитав, и соответственно, постепенно прокрутив страницу далеко книзу, я решил перейти к другой странице сайта, для чего мне, естественно, нужно было ткнуть в меню. Но чтобы добраться до меню, мне теперь пришлось очень долго и нудно прокручивать страницу обратно кверху. Я подумал, что это неудобно, и нужно с этим что-то предпринять. Навскидку, напрашиваются два варианта: либо закрепить где-то статично кнопку «Вверх», либо статично закрепить само меню. Первое мне сразу не понравилось. Если уж воровать у посетителя, и без того дефицитное, пространство экрана, то хотя бы не заставлять его делать дополнительный тык пальцем, а зафиксировать само меню. Но я люблю держать смартфон горизонтально, когда просматриваю сайты. Так у меня и шрифт получается крупнее, и меньше вероятность появления горизонтальной прокрутки, и если понадобится набирать текст, то у меня быстрее получается это делать двумя большими пальцами на более крупной виртуальной клавиатуре.
Но в такой ситуации, если отъесть сверху горизонтальную полосу, то особенно после прокрутки кверху (даже небольшой), когда браузер показывает строку адреса, полезное пространство для веб-страницы становится совсем уж неприемлемо узким. Вот если бы я держал смартфон вертикально, тогда украсть горизонтальную полоску сверху было бы вполне приемлемо, так как под ней останется ещё уйма места, и эта кража вообще останется незамеченной. И тут я изобрёл «блуждающее меню». То есть, конечно, вполне возможно, что я не первый это изобрёл, но мне такое нигде раньше не попадалось. «Блуждаемость» меню заключается в том, что когда я держу смартфон горизонтально, полоска меню становится вертикальной, и приклеивается к одному из боков экрана. А когда я держу его вертикально — меню становится горизонтальным и фиксируется у верхней границы экрана. Вот как это выглядит:
Таким образом, меню всегда ворует место там, где его достаточно, не создавая ощутимых помех пользователю.
Реализовать это оказалось несложно. Вот, сокращённо, разметка:
<nav id="mob">
<a href=... </a>
<a href=... </a>
<a href=... </a>
</nav>
Стили:
@media (max-width:800px) {
#mob {display:flex; justify-content:space-around; position: fixed; top:0; z-index: 2}
@media (orientation: portrait){
#mob {left:0; width:100%; height:34px}
body {padding:34px 0 0 0}
}
@media (orientation: landscape){
#mob {right:0; height:100%; flex-direction:column; width:34px}
body {padding:0 34px 0 0}
}
}