amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} /* Inline styles */ h2.acss2f015{text-align:center;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Плавающее меню на Word Press

В одной статье мы уже обсуждали то, как можно сделать меню на Word Press с помощью разных плагинов. Там речь шла о придании дополнительных функций этому элементу. Теперь же поговорим о плавающем меню. Особой функциональности оно сайту не придаёт. Такой тип меню следует использовать в том случае, когда необходимо привлечь с помощью дизайна.
Плавающее меню выглядит красиво, необычно и привлекает внимание. По пунктам такого меню хочется пощёлкать. Рассмотрим, как можно сделать плавающее меню на Word Press с помощью плагина.

Floating Menu

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

У виджета есть множество полезных настроек.

  • Для начала надо будет выбрать, какое меню будет плавающим. Для этого надо создать произвольное меню, а потом выбрать его в этом виджете.
  • Затем идёт опция Click. Она определяет, будет ли меню закрываться по клику. Если надо чтобы оно закрывалось автоматически, то следует выбрать опцию Hover.
  • После этого необходимо написать заголовок меню.
  • А также ширину. Размер указывается в пикселях.
  • После этого можно выбрать, где будет располагаться меню – наверху или внизу, а также отступ от краёв экрана. Такие же опции для выбора положения справа-слева и отступы от краёв.
  • Затем определяется скорость эффекта плаванья и выпадания меню.
  • Включенное бегающее меню сделает этот элемент всегда видным, он будет передвигаться вместе с экраном. Если же выбрать фиксированное меню, то оно будет находиться в одном определённом месте.
  • Последняя опция этого виджета – это внешний вид. Здесь не надо выбирать в зависимости от дизайна вашего сайта.

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

Адель Гадельшин

View Comments

  • Очень хотелось сделать именно главное меню плавающим.. Но в конце статьи увидела рекомендации, что этого не стоит делать. Благодарю за откровенность.

Recent Posts

Что такое отказы на сайте, почему они происходят, как их уменьшить

Отказы на сайте - это процент посетителей, которые покидают сайт после просмотра только одной страницы.…

9 месяцев ago

Как сделать запуск инфопродукта

Инфопродукт - это любой продукт, который содержит информацию, полезную для потенциальных клиентов. Это может быть…

9 месяцев ago

Как вебмастеру юридически обезопасить себя

Ведение сайта - это не только подержание его работоспособности и наполнение контентом. В последние годы…

9 месяцев ago

Папки WordPress: значение папок /wp-admin, /wp-includes и /wp-content

WordPress - это популярная система управления контентом (CMS), которая позволяет создавать и управлять веб-сайтами различной…

10 месяцев ago

Что такое сертификат Let’s Encrypt и стоит ли его устанавливать

Сертификат Let’s Encrypt - это бесплатный и открытый сертификат SSL/TLS, который позволяет защитить веб-сайт от…

10 месяцев ago

Защита WordPress от вирусов

WordPress - это одна из самых популярных систем управления контентом в мире, которая используется миллионами…

10 месяцев ago