Липкое меню на сайт WordPress плагин – info-effect.ru

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

 

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

 

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

 

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

  1. Тенгиз

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

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

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

    Ответить
  2. Денис

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

    Ответить
    1. Admin автор

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

      Ответить
  3. Эдуард

    Не встал.

    Ответить
    1. Admin автор

      Что значит “Не встал” ?

      Ответить
  4. Алексей

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

    Ответить
    1. Admin автор

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

      Ответить
  5. Я

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

    Ответить
  6. Сергей

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

    Ответить
  7. Лиза

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

    Ответить
    1. Admin автор

      С помощью CSS стилей. Может помочь плагин – SiteOrigin CSS. Также рекомендую посмотреть плагины:

      Simple Custom CSS.
      Custom CSS Pro.

      Ответить
  8. павел

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

    Ответить
    1. Admin автор

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

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

      Ответить
  9. Александр

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

    Ответить
    1. Admin автор

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

      Ответить
      1. Александр

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

      2. Admin автор

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

      3. Admin автор

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

      4. Александр

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

      5. Admin автор

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

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

      6. Александр

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

  10. алина

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

    Ответить
    1. Admin автор

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

      Ответить
  11. алина

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

    Ответить
    1. Admin автор

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

      Ответить
  12. Сергей

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

    Ответить
  13. Светлана

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

    Ответить
  14. дрю

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

    Ответить
  15. Наталья

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

    Ответить
    1. Admin автор

      Есть плагин SiteOrigin CSS, он может вам помочь.

      Ответить
  16. Тлек

    Установил сайт на лендинге (сделан на элементоре), не сработал плагин.

    Ответить
    1. Admin автор

      Конечно не сработал. Сработает только на теме WordPress.

      Ответить
  17. Тлек

    Все ясно с этим плагином! Прописал кодом.

    Ответить