WP-system.ru

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

Некоторые темы наделены таким эффектом. В этой статье я расскажу о том, как сделать липкое меню на 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. Та же опция, но для главной страницы.

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

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

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

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

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

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

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

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

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