Липкое меню на сайт 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

 

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

 

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

 






info-effect.ru
Липкое меню на сайт WordPress плагин обновлено: Март 26, 2018 автором: Илья Журавлёв

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

  • Тенгиз 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 для изменения размера и скрытия можно посмотреть Здесь !!!

  • Александр 13.07.2017 Ответить

    А как сделать липким не меню сайта, а панель с контактными телефонами и ссылкой на корзину? Это другой плагин нужен?

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

      Здравствуйте. Вам может помочь плагин SiteOrigin CSS. В редакторе перейдите на вкладку Layout и для параметра Position укажите значение Fixed. Предварительно выделив ту часть на сайте, которую хотите зафиксировать.

      • Александр 13.07.2017 Ответить

        Спасибо большое! Кажется, это то, что надо. А как здесь настроить, чтобы подвижная панель перемещалась поверх картинок, а не за ними?

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

          Надо подумать. Не могу вам точно сказать пока что.

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

          Вообще-то фиксированный элемент должен отображаться поверх остального контента по умолчанию. Только что проверял на черновом сайте.

          • Александр 13.07.2017

            Может это зависит от того, какой элемент двигать?
            Я по-пробовал закрепить панель корзины, где написана сумма текущего заказа. А вообще хотел просто сделать строку с телефонами, которая скролится вместе со страничкой.

          • Илья Журавлёв 13.07.2017 Автор

            Априори, элемент не может быть зафиксирован под основным контентом, его не будет видно вообще. Могу порекомендовать вам плагины для отображения контактов:

            Mobile Contact Bar.
            Speed Contact Bar.
            WPFront Notification Bar.

          • Александр 14.07.2017

            Я сделал то, что мне было нужно. Огромная благодарность!!!

  • алина 20.01.2018 Ответить

    распишите для чайника где искать класс меню? не получилось ничего.

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

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

  • алина 20.01.2018 Ответить

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

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

      Изменить стили меню. Может помочь плагин SiteOrigin CSS.

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

    Спасибо, то что искал!

  • Светлана 11.06.2018 Ответить

    Спасибо большое за статью! Честно говоря, посмотрев ролик, не разобралась, как-то се быстро, мелко и без пояснений. А после прочтения этой статьи, у меня все получилось ))).

  • дрю 12.06.2018 Ответить

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

  • Наталья 12.07.2018 Ответить

    А как сделать, чтобы меню пои прокрутке меняло цвет. Допустим на фоне оно прозрачное, а при прокрутке другой цвет?

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

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

Нажимая на кнопку Отправить комментарий, вы соглашаетесь с Политикой конфиденциальности и Пользовательским соглашением сайта info-effect.ru


Обратная связь

Политика конфиденциальности - Пользовательское соглашение

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