Неуплывающее плавающее меню на сайт.

Неуплывающее плавающее меню на сайт.

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

Однако, у этого подхода есть подводные камни, которые мы и рассмотрим в этой статье.

Содержание статьи:

Неадаптивный сайт

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

И это не удивительно, ведь в основном такие меню делаются position: fixed.

Плавающее меню ушло за пределы экрана

Бывают сайты, которые не адаптируется, но имеют специальную мобильную версию. В этом случае в мобильной версии меню привычно скрыто за иконкой гамбургера и показывается по требованию пользователя. А вот полная версия имеет все тот же position: fixed, что в случае горизонтальной прокрутки имеет проблему, описанную выше.

Решений у этой проблемы несколько:

  • Отказаться от плавающего меню на сайте.
  • Сделать так, чтобы меню прокручивалось при горизонтальном скролле страницы как положено.
  • Организовать блоку с меню свою прокрутку
  • Адаптировать меню.

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

Горизонтальная прокрутка меню

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let $window = $(window);
// Блок, которому указано position: fixed
let header = $('#menu-float');
let menuScroll = () => {
let left = $window.scrollLeft();
header.css({
left: -left
});
};
menuScroll();
$window.scroll(e => {
menuScroll();
});

Давайте разберем, что делает этот код:

  • Сперва мы записываем в переменные глобальный объект window и блок с меню в переменные, для удобства и экономии памяти.
  • Определяем переменную menuScroll, которой присваиваем функцию. Эта функция определяет, насколько мы проскроллили сайт по горизонтали и далее записывает это значение в css свойство left для меню, но с отрицательным значением.
  • Ниже мы вызываем нашу функцию, а так же вызываем её и при срабатывании события скролла у объекта window.

В деле на этот пример можно посмотреть вот на этой демке:

See the Pen float-menu by Alexandr (@login2030) on CodePen.


Как видите, способ довольно универсальный и простой. Но стоит иметь ввиду, что на мобильном телефоне меню будет прокручиваться не совсем корректно.


Отдельная прокрутка меню

В этом случае меню не адаптируется. Когда ему не хватает места на экране, у него появляется своя отдельная полоса прокрутки: [ пример ]

Этот способ мне не очень нравится, хотя на том же CSS Tricks использован именно этот метод:

Меню на сайте CSS Tricks

Адаптация меню

Адаптировать меню можно тоже по-разному. За свою практику, я делал три варианта адаптации меню:

Вариант адаптации в один шаг

See the Pen loat-menu-1step by Alexandr (@login2030) on CodePen.

В примере использованы как медиа запросы, так и немного javascript, для обработки клика по гамбургеру. Обратите особое внимание за самый последний медиа запрос:

stylus
1
2
3
4
@media screen and (min-width: 650px)
#menu-float
.menu-list
display block !important

Без этого запроса, если в мобильном виде мы откроем и закроем меню, а потом увеличим размер экрана (в браузере), то меню будет скрыто и открыть его будет невозможно.

Адаптация в два шага

See the Pen float-menu-2step by Alexandr (@login2030) on CodePen.

Как видно из примера, теперь меню разделено на две части: левую и правую. Правая скрывается при размере экрана меньше 1000 пикселей, а левая при размере меньше 650 пикселей.

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

Например, у нас есть такие страницы:

  • Секции
  • Расписание
  • Акции
  • Вакансии
  • Блог
  • Контакты

Очевидно, что ссылки секции, расписание и акции всегда должны быть на виду. Поэтому их можно разместить в левой части меню (читаем же мы слева направо). А вакансии, блог и контакты - это второстепенные страницы. Для визуального отделения, их можно разместить в правой части меню и скрывать раньше, чтобы основные ссылки были в развернутом виде для большего количества экранов.

Многоступенчатая адаптация

Смысл этого подхода в том, чтобы скрывать меню постепенно. Наглядно это выглядит вот так:

demo.gif

Можно использовать как готовые решения, так и писать свои. Про это есть хорошая статья на CSS Tricks - The Priority+ Navigation Pattern

Я же обычно использую плагин okayNav.

А вот он в действии:

See the Pen okayNav Demo by Alexandr (@login2030) on CodePen.

Адаптивный сайт, но…

Всегда проверяйте свои сайты на различных устройствах и экранах, даже если используете много новомодных фреймворков и инструментов, например, таких:

test.jpg

Потому, что проблема может вылезти совсем не там, где мы её ждем:

b1.jpg

b2.jpg

А у пользователя, может остаться неприятный осадок, после посещения сайта.

Заключение

В этой статье мы рассмотрели, как можно организовать плавающую навигацию на сайте несколькими способами. Какой способ выбрать решать уже Вам.

На этом я прощаюсь с Вами. Если статья оказалась Вам полезной, можете поделиться ей в социальных сетях. Удачи!