Pull to refresh

Блуждающее меню

Меню сайта на мобильных устройствах должно быть, с одной стороны, легко доступно, а с другой, не должно транжирить дефицитное экранное пространство. Об одном из вариантов компромиссных решений этого вопроса будет рассказано ниже.

Я постарался применить некоторые принципы адаптивного дизайна на сайте, который я сделал много лет назад, и время от времени развиваю. На больших экранах сайт имеет боковую колонку, в которой расположено вертикальное главное меню сайта и другие инструменты навигации: поиск, календарь, теги. На малых экранах эта колонка не показывается, и вместо неё появляется узкая полоска горизонтального меню в шапке страницы. Это горизонтальное меню уже, в свою очередь, содержит ссылки, открывающие главное меню, форму поиска или список тегов, на всю ширину экрана.

Как-то раз, я читал длинную страницу на своём сайте, используя для этого мой смартфон. Дочитав, и соответственно, постепенно прокрутив страницу далеко книзу, я решил перейти к другой странице сайта, для чего мне, естественно, нужно было ткнуть в меню. Но чтобы добраться до меню, мне теперь пришлось очень долго и нудно прокручивать страницу обратно кверху. Я подумал, что это неудобно, и нужно с этим что-то предпринять. Навскидку, напрашиваются два варианта: либо закрепить где-то статично кнопку «Вверх», либо статично закрепить само меню. Первое мне сразу не понравилось. Если уж воровать у посетителя, и без того дефицитное, пространство экрана, то хотя бы не заставлять его делать дополнительный тык пальцем, а зафиксировать само меню. Но я люблю держать смартфон горизонтально, когда просматриваю сайты. Так у меня и шрифт получается крупнее, и меньше вероятность появления горизонтальной прокрутки, и если понадобится набирать текст, то у меня быстрее получается это делать двумя большими пальцами на более крупной виртуальной клавиатуре.

Но в такой ситуации, если отъесть сверху горизонтальную полосу, то особенно после прокрутки кверху (даже небольшой), когда браузер показывает строку адреса, полезное пространство для веб-страницы становится совсем уж неприемлемо узким. Вот если бы я держал смартфон вертикально, тогда украсть горизонтальную полоску сверху было бы вполне приемлемо, так как под ней останется ещё уйма места, и эта кража вообще останется незамеченной. И тут я изобрёл «блуждающее меню». То есть, конечно, вполне возможно, что я не первый это изобрёл, но мне такое нигде раньше не попадалось. «Блуждаемость» меню заключается в том, что когда я держу смартфон горизонтально, полоска меню становится вертикальной, и приклеивается к одному из боков экрана. А когда я держу его вертикально — меню становится горизонтальным и фиксируется у верхней границы экрана. Вот как это выглядит:

Вертикальное меню на горизонтально расположенном смартфоне Горизонтальное меню на вертикально расположенном смартфоне

Таким образом, меню всегда ворует место там, где его достаточно, не создавая ощутимых помех пользователю.

Реализовать это оказалось несложно. Вот, сокращённо, разметка:

	<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}
	}
}
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.