Круговые меню в CSS: 11 идеальных типов для создания вашего следующего веб-сайта
Мы продолжаем с другого большой список круговых меню на CSS как в HTML, чтобы вы могли адаптировать их к потребностям вашего сайта. Эти круглые меню в основном пытаются придать этому гамбургер-меню стиль и анимацию, которые вращаются вокруг круглого; как бы иначе и быть не могло.
Есть довольно разные, а также идеальный способен уделить необходимое внимание к конкретной теме. Анимация и минималистичный визуальный стиль могут подавать посетителям сигналы, чтобы они знали, что у нас есть хороший глаз, чтобы обеспечить качество нашего веб-сайта в веб-дизайне. Давайте сделаем это с 11 круговыми меню, не отказываясь сначала от связывания к другому списку меню CSS.
Индекс
- 1 Круговое меню навигации
- 2 Плавающее круглое меню
- 3 Круглая панель навигации
- 4 Круглое меню материалов
- 5 Круговое меню
- 6 Радиальное меню в CSS
- 7 Круговое меню
- 8 Меню CSS Gooey
- 9 Анимированное круговое меню
- 10 Всплывающее окно круговой навигации
- 11 Выдвижное круговое меню
Это круговое меню навигации доступно в CSS и HTML, поэтому его реализация довольно проста, если вы привыкли работать с кодом.
Наделены отличная анимация и минималистичный стиль что ставит его среди лучших в списке.
Подпишитесь на наш Youtube-канал
Это круговое плавающее меню погруженный в JavaScript, а также HTML и CSS. Еще одно меню с серией анимаций, которое ставит его среди лучших в этом списке. Без всяких сомнений в качестве.
Этот круглый бар вдохновлен Язык дизайна Google под названием Material Design. Если вы ищете что-то из этого языка, вам уже нужно время, чтобы интегрировать его в свой веб-сайт.
Еще одно круглое меню для Material Design и это выделяется на фоне остальных
для этой серии значков, которые отображаются вертикально. Эффектный и идеальный вид; не изысканно, но выглядит великолепно.Это меню снабжено анимацией, которая кнопка раскрытия гамбургера чтобы показать различные разделы, в которые вы можете перейти на веб-сайте, где он интегрирован.
Это круговое меню выполнено на CSS и HTML.
Это очень наглядное круглое меню для этой серии изображений которые появляются при нажатии на значок гамбургера. Он отличается сам по себе только этим аспектом.
Одно из самых креативных круговых меню в списке, отличающееся анимация очень хорошо проработана. Вам даже не нужно будет нажимать, чтобы увидеть различные разделы меню на вашем веб-сайте.
Это меню подчиняется этому типу анимации называется Gooey, который делает различные разделы
Это круговое меню довольно простое, но в нем достаточно хорошей анимации, чтобы стать качественным. Он использует JavaScript для сопровождения CSS и HTML. Простой щелчок по значку гамбургера откроет все разделы, и вы сможете перейти к ним.
Краткое нажатие на значок гамбургера полностью открывает различные разделы для увеличивать круг и иметь возможность нажимать в каждом. У него действительно есть эффект наведения, если вы удерживаете мышь на любом из них, поэтому он становится более интересным, чем предыдущий, который немного более прост.
Это одно из самых оригинальных и креативных круговых меню во всем списке. это вполне настраиваемый и будет напоминать вам телефон
из древних нам приходилось поворачивать палец, чтобы позвонить по каждому из номеров. Веселая анимация для кругового меню, которое выделяется своей концепцией на фоне остальных. На самом деле весь этот эффект достигается с помощью анимации, поэтому, если вы ищете забавное и любопытное меню по определенной теме, например, телефонному центру, это идеально для этого.Содержание статьи соответствует нашим принципам редакционная этика. Чтобы сообщить об ошибке, нажмите здесь.
Вы можете быть заинтересованы
Как создать липкое меню навигации в WordPress
Что такое липкое меню?
Зачем внедрять липкое меню?
Как создать липкое меню заголовка в WordPress
Метод CSS-кода для создания меню липкого заголовка
Метод плагина для создания меню липких заголовков
1 myStickymenu
2 Прикрепленное меню (или что угодно!) В прокрутке.
3 Меню героя
Рекомендации по липкому меню
1 Создайте липкое меню, отражающее индивидуальность вашего бренда.
2 Добавьте логотип вашего бренда.
3 Сохраняйте только самые актуальные пункты меню.
4 Создайте настраиваемое липкое меню для мобильных браузеров.
5 Выберите значок увеличительного стекла над полем ввода поиска.
6 Добавьте анимацию наведения или прокрутки.
7 Поэкспериментируйте с разными липкими меню.
Примеры липкой навигации
Когда я делаю покупки
AWD агентство
Журнал поисковой системы
Процветающий рынок
Nike
Мультимедиа
Джонатан да Коста
Темы WordPress со встроенными липкими меню
1 Важная тема
2 Тема Pro
3 Тема X
4 Юпитер X
5 Тема Hello Elementor
Создайте свое собственное липкое меню навигации
Навигация – важная функция любого веб-сайта.
Вы хотите, чтобы посетители могли легко находить ваш контент и взаимодействовать с ним, сохраняя при этом согласованность с дизайном вашего сайта.
Липкое меню может обеспечить удобство работы пользователей без ущерба для стиля вашего бренда.
Из этой статьи вы узнаете:
- что такое липкое меню ;
- как создать липкое меню в WordPress ;
- лучшие практики липкого меню ;
- примеры липкой навигации ; и
- какие темы WordPress имеют встроенные липкие меню.
К концу этой статьи вы сможете выбрать идеальную тему с помощью встроенного липкого меню или создать собственное меню с нуля. Затем вы можете перейти к реализации других проверенных способов улучшения пользовательского опыта вашего сайта. Давайте начнем.
Что такое липкое меню?
Прикрепленное меню или фиксированное меню – это панель навигации, которая остается видимой на веб-сайте, даже когда посетитель прокручивает страницу вверх и вниз. Он всегда доступен и помогает посетителю быстрее перемещаться по вашему сайту.
Вот пример липкого меню на главной странице блога HubSpot.
Зачем внедрять липкое меню?
Когда посетители просматривают ваш сайт, вы хотите предоставить им легкий доступ к вашему контенту. Некоторые посетители считают обременительным возвращаться к началу страницы для навигации по веб-сайту.
Липкие меню – простое решение этой надоедливой (и отнимающей много времени) проблемы. Благодаря фиксированной панели навигации посетители могут быстро найти на вашем сайте то, что им нужно. Это повышает удобство работы с сайтом и побуждает посетителей потреблять больше контента, что приводит к снижению показателей отказов.
Как создать липкое меню заголовка в WordPress
Теперь пришло время настроить липкое меню заголовка на вашем веб-сайте. Если у вас есть технические навыки, начните с метода кода CSS. Но если вам неудобно менять код, вы можете перейти к методу плагина.
Метод CSS-кода для создания меню липкого заголовка
Вы захотите вручную добавить CSS-код в свою тему WordPress.
Следуйте инструкциям ниже.
- Войдите в свою панель управления WordPress.
- Перейдите в Внешний вид> Настроить .
- Щелкните Дополнительный CSS .
- Добавьте этот код CSS:
#website-navigation {
background:#fff;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
- Замените # website-navigation классом CSS или идентификатором вашего меню навигации. (Узнайте, как найти свой класс CSS или идентификатор здесь. )
- Нажмите синюю кнопку «Опубликовать».
- Обновите свой сайт, чтобы увидеть липкое меню.
Метод плагина для создания меню липких заголовков
Плагины WordPress позволяют легко добавлять липкие меню. Опыт программирования не требуется. Ознакомьтесь с тремя плагинами ниже, чтобы начать работу.
myStickymenu – популярный плагин для создания пользовательских липких меню.
- Установите и активируйте плагин.
- Зайдите в Настройки> myStickymenu .
- В разделе «Прикрепленный класс» выберите «Другой класс или идентификатор».
- В поле рядом с ним добавьте свой класс или идентификатор. (Узнайте, как найти свой класс CSS или идентификатор здесь. )
- Измените любые желаемые настройки, например цвет фона или прозрачность.
- Прокрутите вниз и нажмите зеленую кнопку Сохранить .
- Обновите свой сайт, чтобы увидеть липкое меню.
2 Прикрепленное меню (или что угодно!) В прокрутке.
Прикрепленное меню (или что угодно!) В прокрутке позволяет создавать фиксированные панели навигации, боковые панели и окна с призывом к действию. Также есть возможность ограничить отображение липкого меню на экранах определенных размеров.
- Установите и активируйте плагин.
- Выберите «Настройки»> «Прикрепленное меню» (или что-нибудь еще) .
- В разделе «Основные настройки» добавьте панель навигации, которую вы хотите закрепить за меню.
- Измените любые желаемые настройки, например расстояние между верхней частью страницы и липким элементом.
- Щелкните Сохранить настройки .
- Обновите свой сайт, чтобы увидеть липкое меню.
3 Меню героя
Hero Menu – это премиальный плагин WordPress для создания гибких липких меню. Его конструктор с перетаскиванием упрощает создание всех аспектов вашей навигации. Вы также можете настроить высоту, цвет, прозрачность и шрифт меню, чтобы они соответствовали вашему веб-сайту. Узнайте больше о плагине и процессе установки здесь.
Источник изображения
Рекомендации по липкому меню
Следуйте этим советам, чтобы сделать ваше липкое меню максимально удобным для пользователя.
1 Создайте липкое меню, отражающее индивидуальность вашего бренда.
Вы хотите выбрать типографику, цвета и значки, которые побуждают ваших посетителей нажимать ссылки и другие элементы в вашем липком меню.
Однако это не означает, что вы должны использовать совершенно разные шрифты или цвета по сравнению с остальной частью вашего сайта. Вы хотите, чтобы меню навигации по-прежнему отражало ваш бренд.
Например, вместо того, чтобы сделать цвет фона меню неоново-желтым, вы можете выбрать контрастный цвет из своей цветовой схемы. В качестве примера возьмем липкое меню ниже. Он выделяется на странице, не отклоняясь от минималистичного дизайна сайта.
Источник изображения
2 Добавьте логотип вашего бренда.
Добавление вашего логотипа в липкое меню – это простой способ держать ваш бренд в центре внимания, пока посетители просматривают ваш контент. Это особенно полезно для предприятий, которым необходимо повысить узнаваемость бренда и привлечь больше подписчиков.
3 Сохраняйте только самые актуальные пункты меню.
Не стоит перегружать свое липкое меню слишком большим количеством опций. Сужая выбор, подумайте, какие товары наиболее актуальны для ваших уникальных посетителей.
Например, на сайте электронной торговли значок корзины покупок будет более важным для включения в меню навигации, чем ссылка на страницу «О программе».
Липкое меню заголовка Parade – отличный тому пример. Он предоставляет только основные ссылки, которые будут повышать ценность для потенциальных или существующих клиентов.
Источник изображения
4 Создайте настраиваемое липкое меню для мобильных браузеров.
Поскольку у вас будет меньше места для работы на мобильном телефоне, вам нужно создать меню специально для небольших экранов и для настольных компьютеров. На меньшем экране вы захотите уменьшить размер шрифта и скрыть больше пунктов меню. Или вы можете скрыть заголовок, когда люди прокручивают страницу вниз на мобильном устройстве, и отображать его, когда люди прокручивают страницу вверх. Это всего лишь несколько вариантов, которые вы можете сделать при разработке навигации для мобильных устройств.
5 Выберите значок увеличительного стекла над полем ввода поиска.
Максимальное количество свободного места в меню навигации важно независимо от того, для какого устройства вы проектируете. Но это баланс: вы хотите эффективно использовать пространство без ущерба для пользовательского опыта. Один из способов сэкономить место и при этом оправдать ожидания посетителей – заменить поле ввода поиска значком увеличительного стекла. Это беспроигрышный вариант: посетители, которые предпочитают поиск, а не просмотр, по-прежнему имеют возможность, и теперь вы можете добавить еще один элемент в свое меню.
6 Добавьте анимацию наведения или прокрутки.
Хотя некоторые анимации могут отвлекать, другие могут помочь улучшить навигацию по сайту. Например, в магазине витаминов Anser панель навигации прозрачна при первой загрузке страницы. Таким образом, это не отвлекает от показанного слайдера. Но если посетитель наводит курсор на меню или прокручивает страницу вниз, панель навигации переходит с прозрачного фона на белый сплошной цвет, чтобы он мог легко видеть и нажимать на ссылки навигации.
Источник изображения
7 Поэкспериментируйте с разными липкими меню.
Поэкспериментируйте с вариантами липких меню, чтобы найти то, что подходит вашим посетителям. Вы захотите провести A / B-тестирование нескольких вариантов, прежде чем приступить к окончательной версии или во время редизайна веб-сайта.
Примеры липкой навигации
Привлекательное липкое меню поможет посетителям перемещаться по вашему веб-сайту и поддерживать интерес к вашему контенту. Используйте приведенные ниже примеры в качестве творческого стимула для создания липкого меню.
Когда я делаю покупки
When I Shop – это приложение для покупок, которое позволяет потребителям находить уникальные модные бренды в одном удобном месте. Липкое меню явно разработано с этой целью. Он предоставляет основные навигационные ссылки с подкатегориями, чтобы посетители могли найти бренды в соответствии с телосложением, происхождением, специальностью, стилем и т.д.
Источник изображения
AWD агентство
AWD Agency – итальянская коммуникационная компания, специализирующаяся на цифровых творческих решениях.
Признавая проблему фиксированного меню навигации, оставляющего меньше места для другого контента, AWD Agency выбирает прозрачный горизонтальный заголовок. Это означает, что навигационная панель остается легко доступной, не отвлекаясь от других важных элементов на главной странице.
Источник изображения
Журнал поисковой системы
Журнал поисковых систем – это основной продукт в сообществах SEO и маркетологов. Липкое меню веб-сайта аккуратно организовано по темам, чтобы заинтересованным читателям было легче находить конкретный контент.
Источник изображения
Процветающий рынок
Интернет-магазин Thrive Market использует простое липкое меню, в котором отображается только логотип бренда и призыв к действию. Бренд не отвлекает посетителей, чтобы они попробовали их органические продукты.
Источник изображения
Nike
Nike использует двухрядное липкое меню с множеством важных навигационных ссылок. Посетители могут узнать о новых выпусках, войти в свои учетные записи и даже выполнить поиск по всему сайту.
Источник изображения
Мультимедиа
Multimedios – это мексиканский медиа-конгломерат с холдингами в области телевещания, радио, издательского дела и развлечений. На его веб-сайте есть липкий горизонтальный заголовок, который сворачивается за кнопкой гамбургера, когда посетитель прокручивает страницу. Таким образом, посетители могут щелкнуть любую из публикаций, представленных на главной странице, или, если они не найдут то, что ищут, вернуться в меню навигации, чтобы щелкнуть одну из основных ссылок навигации.
Источник изображения
Джонатан да Коста
В отличие от приведенных выше примеров, сайт портфолио Джонатана Да Косты имеет липкое вертикальное меню навигации. Этот нетрадиционный формат идеально подходит для творческих компаний и портфелей, таких как Costa.
Источник изображения
Темы WordPress со встроенными липкими меню
Некоторые темы WordPress поставляются в готовом виде с липкими меню. Другие предлагают виджеты, так что вы можете сделать свое меню «липким» одним нажатием кнопки.
В любом случае вам не нужно беспокоиться о добавлении кода или установке плагина.
Вот наши главные рекомендации для вас.
1 Важная тема
Salient Theme позволяет вам создать потрясающий веб-сайт с готовыми макетами. Это интуитивно понятно для начинающих дизайнеров, но достаточно надежно для экспертов.
Источник изображения
2 Тема Pro
Pro Theme переопределяет будущее разработки веб-сайтов. Конструктор заголовков темы дает вам возможность создавать простые и сложные липкие меню.
Источник изображения
3 Тема X
Тема X считается одной из лучших тем WordPress. С помощью этой темы вы можете установить уникальный предварительно созданный веб-сайт с липким меню – как в демонстрации, показанной ниже – всего за несколько кликов. Затем вы можете настроить каждый элемент липкого меню на идеальный размер.
Источник изображения
4 Юпитер X
Jupiter X предлагает 350+ готовых веб-сайтов для различных бизнес-ниш, включая корпоративные, творческие и некоммерческие организации.
Вы также можете создавать собственные страницы с нуля. Независимо от того, выбираете ли вы заранее разработанный шаблон или создаете его с нуля, создать липкий заголовок просто.
Источник изображения
5 Тема Hello Elementor
Hello – это чистая, легкая тема, специально разработанная для Elementor, ведущего конструктора страниц WordPress. Меню липких заголовков указано как одна из многих функций динамического содержимого. Вы можете добавить его на свой сайт за несколько кликов.
Источник изображения
Узнайте больше о создании веб-сайта WordPress с помощью Elementor в бесплатном курсе HubSpot Academy.
Создайте свое собственное липкое меню навигации
Оставаясь фиксированными и легко доступными для посетителей, независимо от того, где они прокручивали страницу, липкие меню могут улучшить впечатление посетителей на вашем веб-сайте WordPress. Уделите несколько минут, чтобы создать липкое меню для улучшения основной навигации по вашему сайту .
Источник записи: https://blog.hubspot.com
Как добавить липкое меню для плавающей навигации в WordPress
- Фейсбук
- Твиттер
«Липкое меню» гарантирует, что навигация по вашему сайту всегда будет видна. Когда навигация размещается вверху страницы, она исчезает, как только посетитель прокручивает страницу вниз.
Первой попыткой решить эту проблему было введение фреймов. К счастью, мы преодолели неуклюжие технологии фреймов и теперь можем реализовать элегантную навигацию, которая остается на одном месте.
Мы собираемся использовать Sticky Menu (или что-нибудь еще!) на плагине Scroll to прикрепляем нашу навигацию. Это название довольно сложное, поэтому для простоты я буду называть плагин «Sticky Menu».
Что такое липкие или плавающие меню?
Прежде чем мы начнем, мы должны немного поговорить о терминологии. И «липкий», и «плавающий» используются для описания элемента страницы, который не перемещается при прокрутке страницы.
Если эти слова кажутся противоречивыми, то это потому, что они таковыми и являются. Трудно представить себе что-то «липкое», плавающее вокруг. Но в пользу любого термина можно привести аргумент, и оба они широко используются, поэтому мы будем использовать их здесь как синонимы.
Установка плагина Sticky Menu
Войдите в панель администратора WordPress.
В левой колонке навигации наведите указатель мыши на ссылку «Плагины» и щелкните ссылку «Добавить новый».
В поле «Поиск плагинов…» введите «Прилепленное меню».
Найдя плагин, нажмите кнопку «Установить сейчас».
Нажмите кнопку «Активировать».
Как работает липкое меню
Плагин делает элемент страницы липким с помощью селектора CSS элемента. Он не работает напрямую с меню или виджетами (хотя это было бы круто для любых разработчиков плагинов). Но можно настроить собственную липкую панель навигации, меню или виджет.
Нам придется немного покопаться, чтобы найти CSS-селектор для элемента страницы, который мы хотим вставить.
Но поскольку плагин работает так, как он работает, он более гибкий, чем версия «укажи и щелкни».
Поиск селекторов CSS на странице сам по себе может быть учебным пособием. Я не могу охватить здесь всю тему, поэтому воспользуемся быстрым и простым способом поиска селекторов CSS.
В нашем примере используется Google Chrome «DevTools». Другие браузеры могут отличаться, но большинство из них имеют похожий инструмент.
Чтобы получить доступ к DevTools для определенного элемента, щелкните его правой кнопкой мыши на экране. Пользователи Mac будут использовать клик CMD.
Я хочу знать селектор CSS для меню. Это то, что я хочу «приклеить». Поэтому я щелкну правой кнопкой мыши по меню и нажму ссылку «Проверить».
Окно DevTools откроется в отдельном окне или в виде панели сбоку или внизу окна браузера.
Как вы можете видеть здесь, выделено множество различных классов CSS. Меню состоит из множества частей, и то, что показывает DevTools, зависит от того, где вы щелкнете.
Итак, какой класс CSS нам нужен?
Вы заметите, что при наведении курсора на строки кода в окне «Элементы» соответствующие области выделяются на странице.
Итак, давайте наведите курсор мыши на код окна «Элементы», пока наше меню не будет выделено.
Хорошо, он есть, но к нему прикреплено множество селекторов CSS. Есть CSS ID и три или четыре класса CSS.
Но есть и другая область DevTools, которая поможет нам найти то, что мы ищем.
Раздел «Стили» справа говорит нам, что когда мы наводим курсор на код навигации, .main-navigation является классом.
Вот что мы будем использовать.
Возможно, вам придется немного поработать методом проб и ошибок при вставке сложных элементов страницы, использующих несколько классов CSS или идентификаторов. Но в этом случае мы можем быть уверены, что .main-navigation поможет.
Настройка липкого меню
Хорошо. добавим .
main-navigation в конфигурацию плагина и посмотрите, что произойдет.
В левой колонке навигации наведите указатель мыши на ссылку «Настройки» и щелкните ссылку «Прилепленное меню (или что угодно!)».
Мы собираемся использовать поле «Sticky Element» для установки нашего липкого изображения. Здесь мы входим в селектор CSS.
Другие параметры, «Пробел между верхней частью страницы и прикрепляемым элементом», «Проверить панель инструментов администратора», «Не прикреплять элемент, когда экран меньше», «Не прикреплять элемент, когда экран больше», должны быть самоочевидно. Мы не будем использовать ни один из них для этой демонстрации.
Я введу .main-navigation в поле «Прилепленный элемент». Обязательно начинайте имя селектора с точки.
Прокрутите вниз и нажмите кнопку «Сохранить изменения».
Теперь мы можем видеть, если мы прокручиваем страницу вниз на сайте, меню остается видимым.
Но выглядит не очень, не так ли?
Давайте это исправим.
Применение цвета фона к липкому меню
Наше липкое или плавающее меню выглядит немного искаженным, когда под ним находится другой текст страницы. Меню намеренно прозрачное, поэтому оно будет хорошо выглядеть, если вы измените цвет фона в своей теме. Но для наших целей ему нужен фоновый цвет.
Мы собираемся сделать это с помощью «дополнительного CSS». Где находится ваш дополнительный CSS, зависит от вашей темы. Но для многих тем он находится в «Настройщике тем».
В левой колонке навигации наведите указатель мыши на ссылку «Внешний вид» и щелкните ссылку «Настроить».
Нажмите, чтобы открыть раздел «Дополнительные CSS».
Определите цвет фона для нашего класса, .main-navigation
.основная-навигация {
цвет фона: #ffffff;
} Введите цвет фона CSS в поле «Дополнительный CSS» и нажмите кнопку «Опубликовать».
Теперь, если мы прокрутим страницу вниз, мы не увидим текст под нашим меню.
Приклеивание других элементов страницы
Тот же метод, который мы использовали для приклеивания нашего меню, можно использовать для любого элемента страницы, имеющего селектор CSS.
Например, мы могли бы приклеить изображение. Если щелкнуть изображение правой кнопкой мыши, тег изображения (
Класс CSS для изображения равен .wp-image-1692 , и если мы добавим это в плагин, как мы сделали с селектором меню, при прокрутке страницы вниз изображение останется видимым.
Итак, мы использовали плагин, чтобы сделать меню и изображение липкими. Но вы можете плавать или прикреплять значки корзины покупок, кнопки призыва к действию — любой элемент страницы, у которого есть селектор CSS.
Как вы могли заметить, плагин ограничен одним липким элементом. Разработчик говорит, что в будущей версии будет возможность настроить несколько липких элементов.
Что произойдет, если вы удалите плагин Sticky Menu
Если вы удалите плагин, это повлияет на элементы, которые его использовали.
Элементы, которые были настроены как липкие, вернутся к своему поведению по умолчанию.
Удобство использования всегда должно быть нашим приоритетом
Плавающее меню на вашем сайте WordPress, как правило, хорошо. Доступность выбора веб-сайта для посетителя в любое время можно рассматривать как повышение удобства использования.
Обычно.
Если у вас есть большое или иным образом навязчивое меню или навигация, постоянное размещение их перед другим содержимым сайта может в конечном итоге стать раздражающим. Это может даже помешать посетителю увидеть важный контент.
Точно так же, как и в нашей демонстрации здесь, плавающее небольшое изображение, вероятно, было бы не лучшим использованием плагина. Но найти правильный CSS-селектор изображения было проще, чем, скажем, найти верхний селектор навигации. Вот почему изображение было использовано в качестве примера.
Когда мы обнаруживаем технологию веб-сайта, которая делает классные вещи, возникает соблазн злоупотребить ею или использовать ее не по назначению.
Важно сделать удобство использования приоритетом и стремиться сделать его положительным фактором на наших веб-сайтах.
Помнишь ли ты кадры (и тебя от памяти немного съедает)? Используете ли вы липкие или плавающие элементы на своем веб-сайте? Дай мне знать в комментариях.
- Фейсбук
- Твиттер
Как создать липкое плавающее навигационное меню в WordPress
Недавно один из наших пользователей спросил нас, как создать липкое навигационное меню для своего сайта?
Закрепленные навигационные меню остаются на экране, когда пользователи прокручивают страницу вниз. Это делает верхнее меню всегда видимым, что хорошо для пользователей, поскольку оно содержит ссылки на наиболее важные разделы вашего сайта.
В этой статье мы покажем вам, как легко создать липкое плавающее меню навигации в WordPress.
Что такое залипающее плавающее меню навигации?
Прикрепленное или плавающее меню навигации — это меню, которое «прилипает» к верхней части экрана, когда пользователь прокручивает его вниз.
Это делает ваше меню видимым для пользователей в любое время.
Вот липкое меню в действии. Мы собираемся показать вам, как создать именно такое меню для вашего сайта:
Почему и когда липкие меню могут быть полезны?
Обычно верхнее навигационное меню содержит ссылки на наиболее важные разделы веб-сайта. Плавающее меню делает эти ссылки всегда видимыми, что избавляет пользователей от прокрутки вверх. Также доказано, что это увеличивает конверсию.
Если вы управляете интернет-магазином, ваше верхнее меню навигации, скорее всего, будет содержать ссылки на корзину, категории товаров и поиск товаров. Если вы сделаете это меню липким, это поможет вам сократить число брошенных корзин и увеличить продажи.
Некоторые из лучших тем WordPress имеют встроенную поддержку липкого меню навигации. Просто просмотрите настройки темы в разделе Themes » Customize , чтобы включить эту функцию.
Если в вашей теме нет этой опции, продолжайте читать, и мы покажем вам, как легко создать липкое плавающее меню навигации в любой теме WordPress или магазине WooCommerce.
Способ 1. Добавьте свое липкое плавающее меню навигации с помощью подключаемого модуля
Это самый простой способ. Мы рекомендуем его всем пользователям WordPress, особенно новичкам.
Если вы еще не настроили меню навигации, сделайте это, используя наши инструкции о том, как добавить меню навигации в WordPress.
После этого вам необходимо установить и активировать Sticky Menu (или что угодно!) на плагине Scroll. Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.
После активации вам необходимо посетить страницу Settings » Sticky Menu (or Anything!) , чтобы настроить параметры плагина.
Сначала вам нужно ввести CSS ID меню навигации, которое вы хотите сделать липким.
Вам нужно будет использовать инструмент проверки вашего браузера, чтобы найти идентификатор CSS, используемый вашим меню навигации.
Просто зайдите на свой веб-сайт и наведите указатель мыши на меню навигации.
После этого вам нужно щелкнуть правой кнопкой мыши и выбрать «Проверить» в меню вашего браузера.
Экран вашего браузера разделится, и вы сможете увидеть исходный код меню навигации.
Вам нужно найти строку кода, относящуюся к вашей навигации или заголовку вашего сайта. Это будет выглядеть примерно так:
<навигационная роль="навигация">
Если вы не можете его найти, наведите курсор мыши на разные строки кода на панели проверки. Меню навигации будет полностью выделено, когда у вас есть правильная строка кода:
В этом случае CSS ID нашего навигационного меню — site-navigation .
Все, что вам нужно сделать, это ввести CSS ID вашего меню в настройках плагина с решеткой в начале. В данном случае это #site-navigation .
Не забудьте нажать кнопку «Сохранить изменения» внизу страницы.
А теперь проверьте свое липкое меню на своем веб-сайте WordPress. Он должен оставаться на странице при прокрутке вниз, например:
Следующая опция на странице настроек плагина — определить пространство между верхней частью экрана и липким меню навигации.
Вам нужно использовать этот параметр только в том случае, если ваше меню перекрывает элемент, который вы не хотите скрывать. Если нет, то игнорируйте этот параметр.
Мы рекомендуем оставить флажок рядом с опцией: «Проверить панель администратора». Это позволяет плагину добавить немного места для панели администратора WordPress, которая видна только зарегистрированным пользователям.
Здесь вы можете видеть, что панель администратора на нашем тестовом сайте правильно отображается над закрепленным меню:
Следующая опция позволяет вам отклеить меню навигации, если пользователь посещает ваш веб-сайт, используя меньший экран, такой как мобильное устройство:
Вы можете проверить, как ваш сайт выглядит на мобильных устройствах или планшетах. Если вам не нравится, как это выглядит, просто добавьте 780 пикселей для этой опции.
Не забудьте нажать кнопку «Сохранить изменения» после внесения любых изменений в параметры.
Способ 2. Добавление закрепленного плавающего меню навигации вручную
Этот метод требует добавления в тему пользовательского кода CSS.
Мы не рекомендуем его для начинающих.
Мы также рекомендуем вам ознакомиться с нашим руководством о том, как легко добавить пользовательский CSS на ваш сайт WordPress, прежде чем начать.
Во-первых, вам нужно посетить Внешний вид » Настроить , чтобы запустить настройщик темы WordPress.
Затем нажмите «Дополнительный CSS» на левой панели и добавьте этот код CSS.
#навигация по сайту {
фон:#00000;
высота: 60 пикселей;
z-индекс: 170;
поле:0 авто;
нижняя граница: 1px сплошная #dadada;
ширина:100%;
положение: фиксированное;
верх:0;
слева:0;
справа: 0;
выравнивание текста: по центру;
}
Примечание: Появится меню навигации с черным фоном. Если вы хотите другой цвет, измените число рядом с фоном на . Например, используя background: #ffffff даст вам белый фон меню.
Просто замените #site-navigation на идентификатор CSS вашего меню навигации, затем нажмите кнопку «Опубликовать» в верхней части экрана.
Посетите свой веб-сайт, чтобы увидеть плавающее меню навигации в действии:
Что делать, если обычно меню навигации отображается под заголовком сайта, а не над ним? Если это так, этот код CSS может перекрывать заголовок и заголовок сайта или отображаться слишком близко к ним до того, как пользователь прокрутит страницу:
Это можно легко изменить, добавив поле в область заголовка с помощью дополнительного кода CSS:
.сайт-брендинг {
верхняя граница: 60px !важно;
}
Замените site-branding классом CSS вашей области заголовка. Теперь липкое меню навигации больше не будет перекрывать ваш заголовок до того, как пользователь прокрутит страницу вниз:
Мы надеемся, что эта статья помогла вам добавить липкое плавающее меню навигации на ваш сайт WordPress. Вы также можете ознакомиться с нашим руководством о том, как создать собственную тему WordPress без написания кода, и нашим сравнением лучших плагинов для создания страниц WordPress.