Липкое меню на сайт WordPress плагин !


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

 

12-03-2016 14-56-02

 

Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

12-03-2016 14-22-11

 

После установки и активации плагина перейдите на страницу: Настройки — myStickymenu, здесь вы сможете настроить меню.

 

— Sticky Class, укажите здесь класс меню, страницы которого должны отображаться в липком меню. В конце записи я покажу как узнать класс меню.

— Sticky z-index, оставьте без изменений.

— Sticky Background Color, можете выбрать цвет меню.

— Sticky Opacity, можете задать здесь степень прозрачности меню.

— Sticky Transition Time, здесь указано время перехода от стандартного меню к липкому.

— Disable at Small Screen Sizes, отключить липкое меню на небольших экранах. Укажите размер экрана, если экран будет меньше установленного размера, то липкое меню показываться не будет.

— Make visible on Scroll, расстояние в пикселях после которого будет появляться меню при прокрутке страницы.

— Make visible on Scroll at homepage, то же самое что и выше, но на главной странице.

— Fade or slide effect, можно включить слайд эффект.

— myfixed css class, оставьте без изменений.

— Disable CSS style, можно отключить стили по умолчанию и использовать свои стили.

Сохраните изменения.

 

12-03-2016 15-04-53_mini

 

Как узнать класс меню ? 

 

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

 

12-03-2016 15-27-31_mini

 

После сохранения настроек липкое меню появится на вашем сайте.

 

Остались вопросы ? Напиши комментарий ! Удачи !

 



Липкое меню на сайт WordPress плагин ! обновлено: Октябрь 14, 2016 автором: Илья Журавлёв

13 комментариев

  • Тенгиз 28.06.2016 Ответить

    Применил для своего сайта. Получилось превосходно!
    Класс меню у себя нашел в header.php.

    Спасибо Вам, Илья!

    p.s. Не знаю, приветствуются ли на этом сайте прописать линки (без внешних ссылок, разумеется), а то, для демонстрации проделанной мною работы, мог выложить его.

  • Денис 29.07.2016 Ответить

    Привет! как сделать свои стили для липкого меню?

    • Илья Журавлёв 29.07.2016 Ответить Автор

      Привет, можно вручную стили поменять или добавить, а можно плагин использовать — SiteOrigin CSS.

  • Эдуард 29.11.2016 Ответить

    Не встал.

    • Илья Журавлёв 29.11.2016 Ответить Автор

      Что значит «Не встал» ?

  • Алексей 15.12.2016 Ответить

    Лажа, не работает…

    • Илья Журавлёв 15.12.2016 Ответить Автор

      Вы не правы, всё работает, я проверял не раз. Значит не правильно сделали что-то.

  • Я 10.01.2017 Ответить

    Всё работает, спасибо! Хороший плагин, главное, нужное меню правильно в настройках ввести)

  • Сергей 11.01.2017 Ответить

    Все работает! Норм!!!

  • Лиза 26.02.2017 Ответить

    а как увеличить ширину? чтобы некоторые позиции не перескакивали на строку ниже?

  • павел 03.04.2017 Ответить

    Здравствуйте. Как данный плагин myStickymenu адаптировать под планшеты и мобильники?

    • Илья Журавлёв 03.04.2017 Ответить Автор

      Здравствуйте. А зачем ? Сколько у вас страниц в меню ? И представьте все они будут отображаться на мобильном устройстве, ещё и зафиксированные на пол экрана. Можно адаптировать с помощью CSS. Вам нужно указать другой размер для отображения мобильного меню в CSS. Если указать размер меньше минимального, то мобильное меню вообще не будет отображаться. CSS название мобильного меню можно узнать, нажмите правой кнопкой мыши по моб.меню, в открывшемся окне нажмите — Показать код, в редакторе будет указан CSS и название.

      Код CSS для изменения размера и скрытия можно посмотреть Здесь !!!

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

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



Яндекс.Метрика

Правила - Карта - Связь - Мой хостинг

Стрелка вверх