Как закрепить меню вверху страницы при прокрутке вниз

Миниатюра

Я расскажу вам как закрепить любое меню в любой теме WordPress с помощью замечательного плагина Sticky Menu.

Здравствуй, уважаемый читатель!

Как ты можешь наблюдать на моем сайте, при прокрутке любой страницы вниз, вверху страницы остается меню. То есть Html-элемент, который выводит меню, не скроллится вверх, уплывая за границы экрана! Он остается на месте привязанным к верхней границе.

В прошлой статье я писал о плагине, который создает меню в верхнем экране страницы. Оно плавает и раскрывается. Все это делает плагин.

Недостатки плагина очевидны — у него мало вариантов настройки дизайна, а те, которые предоставляются в настройках, не выдерживают критики (откровенно серые и невзрачные). Кроме того, он создает заметную нагрузку на слабых компьютерах посетителей.

Я не советую ставить вам на сайт это плавающее меню.

Есть еще целая куча разных плагинов, их объединяет то, что в код сайта внедряются скрипты, которые могут не сработать у посетителя (если у него стоит запрет на скрипты в браузере). Кроме того, некоторые продвинутые плагины заметно тормозят в браузерах.

Ваши посетители не оценят заметных тормозов на сайте — они не будут к вам приходить.

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

Таким образом я просто плюнул на все эти всплывающие меню и отключил их на фиг!

Прошел месяц. Я много сделал, полностью обновил дизайн, перешел на продвинутую платформу (не просто тема, а целая платформа для платных тем).

И поэтому у меня снова появилось желание сделать меню интерактивным, плавающим.

Пришлось менять подход и попытаться найти плагин с другим принципом действия.

Решение нашлось, и очень хорошее!

Представляю вашему вниманию плагин Sticky Menu. Его преимущество:

  1. Он очень простой. Его единственное действие — он закрепляет определенный элемент Html-представления сайта от прокрутки. С помощью скрипта.
  2. Вторая важная настройка — на малых экранах (планшеты, мобильники) — меню остается на месте.

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

Итак, приступим к установке и настройке плагина!
1. На моем сайте меню закреплено в верхней части окна страницы

1. На моем сайте меню закреплено в верхней части окна страницы

2. С помощью FireBug в браузере узнаем какой Html-элемент отвечает за вывод меню

2. С помощью FireBug (расширение браузера для веб-мастера) узнаем какой Html-элемент отвечает за вывод меню

Для тех, кто не знаком с отличным и очень важным инструментов Firebug, я позже напишу короткий обзор. Пишите в комментарии, если он вам нужен.
3. В админке WordPress добавим новый Плагин Sticky Menu

3. В админке WordPress добавим новый Плагин Sticky Menu

4. Настраиваем плагин

4. Настраиваем плагин. В админке заходим в Настройки — Sticky Menu. В настройках плагина все оставляем стандартным, кроме имени элемента. В шаге №3 мы уже узнали имя Html-элемента, который выводит меню — введем его в настройки.

Все! Теперь наше меню закреплено вверху страницы!
Если у вас не получается, пишите в комментарии, помогу чем смогу.
Я при настройке плагина помучился с именами Html-элементов 40 минут, прежде чем нашел нужное имя. У меня все работает, значит и у вас все получится.

Не забывайте написать ваш комментарий, понравилась ли статья, получилось ли у вас с меню, какие вопросы у вас возникли. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!

Успехов в веб-мастеринге, счастливо, друзья!

 

Теги: ,

>