Рейтинг@Mail.ru

WordPress-блог

Терпенье и труд...

Как сделать липкое меню на WordPress с помощью плагина

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

Некоторые темы наделены таким эффектом. В этой статье я расскажу о том, как сделать липкое меню на WordPress с помощью плагина на любой теме, даже той, в которой эта возможность не предусмотрена.

Как сделать липкое меню на WordPress - простой плагин

Для начала скачайте плагин по ссылке ниже. Он называется myStickymenu. Его интерфейс на английском языке. Но я помогу разобраться в нём.

Установите и активируйте плагин, а затем перейдите в пункт «Настройки», подпункт «myStickymenu». Здесь находятся все опции в трёх вкладках.

Первая вкладка называется «Genarall settings» и в нём собраны главные опции:

  • Sticky Class. CSS класс или идентификатор меню, которое нужно сделать липким. Это самая главная настройка. И для тех, кто не знает, как получить этот параметр, я расскажу чуть ниже.
  • Fade or slide effect. Визуальный эффект.
  • Disable at Small Screen Sizes. Опция позволяет установить минимальную ширину экрана, на котором будет липкий эффект.
  • Disable at Large Screen Sizes. Опция позволяет установить максимальную ширину экрана, на котором будет липкий эффект.
  • Make visible on Scroll. Можно указать уровень скролла страницы, после которого меню станет видимым.
  • Make visible on Scroll at homepage. Та же опция, но для главной страницы.

Вкладка Genarall settings плагина myStickymenu

Чтобы сделать липкое меню на WordPress с помощью плагина myStickymenu, нужно выяснить CSS класс или идентификатор данного элемента. Покажу как это сделать в Google Chrome. В остальных браузерах всё примерно так же.

Откройте страницу сайта и нажмите клавишу «F12». Внизу появится панель с кодами. Нажмите на кнопку с иконкой стрелки для выбора элементов, и выберите мышкой элемент на странице, которому нужно придать эффект.

Включение кода страницы в браузере

В панели внизу вы увидите ID отмеченного мышкой элемента. Показываю его на скриншоте.

Поиск ID элемента в браузере

В моём случае ID — это nav-main. Во всех темах меню могут иметь разны ID или класс. Полученный параметр нужно вставить в опцию «Sticky Class».

Указание ID меню в плагине myStickymenu

После сохранения этих опций можно проверять как работает плагин.

Теперь рассмотрю вторую вкладку настроек — «Style»:

  • Sticky z-index. Задаёт порядок наложения элементов на другие части дизайна. 99990 делает его поверх всего.
  • Sticky Background Color. Цвет фона.
  • Sticky Opacity. Уровень прозрачности.
  • Sticky Transition Time. Время перехода обычного меню в липкое.
  • CSS style. Здесь находятся стили элемента.
  • Disable CSS style. Опция отключает стили плагина.

Вкладка Style плагина myStickymenu

Последняя вкладка «Advansed». Здесь можно отметить галочками те страницы, на которых эффект липкого меню не нужен.

Вкладка Advansed в myStickymenu

Теперь вы знаете как создать липкое меню на WordPress. Методом экспериментов вы сможете добиться необходимого вида.

УжасноПлохоНормальноХорошоОтлично (1 оценок, среднее: 5,00 из 5)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

 

WordPress-блог © 2015-2017