Как создать круговое меню значков, которое расширяется при нажатии в Divi

Круглое меню значков - это элегантное решение для добавления простого меню на ваш сайт Divi. Этот стиль меню интуитивно понятен и отлично работает в качестве фиксированного меню для ваших мобильных устройств. Сегодня мы покажем, как создать круговое меню значков в Divi таким образом, чтобы действительно подчеркнуть мощные возможности дизайна Divi Builder. И мы предоставим простой фрагмент кода JavaScript, чтобы открывать и закрывать меню при нажатии.

Давайте начнем

Sneak Peek

Вот краткий обзор круглого меню значков, которое мы создадим.

Загрузите макет меню с круглым значком БЕСПЛАТНО

Чтобы получить дизайн из этого урока, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте установленную тему Divi (или плагин Divi Builder, если тема Divi не используется).
2. Создайте новую страницу в WordPress и включите Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).

В этом руководстве мы будем использовать встроенные значки Divi из модуля blurb, поэтому никаких внешних ресурсов не потребуется.

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Часть 1

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

Затем откройте настройки строки и добавьте следующий отступ:

Отступ: сверху 300 пикселей

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

Создание значков меню с помощью модулей Blurb

Объявление №1

После заполнения строки добавьте в столбец модуль рекламного сообщения. Это будет первое из 5 пятен, которые мы добавим в круговое меню значков. Мы будем называть это аннотацией №1.

Затем обновите содержание анонса, убрав заголовок и основной текст. Затем добавьте значок к аннотации, как показано ниже.

Значок использования: Да
Значок: см. Снимок экрана

Далее мы собираемся обновить настройки дизайна следующим образом:

Цвет значка: # 29a1f2
Значок круга: ДА
Цвет круга: # 222222
Показать границу круга: ДА
Цвет границы круга: # 29a1f2
Использовать размер шрифта значка: ДА
Размер шрифта значка: 25 пикселей
Размер основного текста: 20 пикселей
Маржа: 0 пикселей

В дополнение к стилю круглого значка мы также добавили размер основного текста. Нет основного текста, но это пригодится позже, когда мы будем использовать единицу длины em (которая относительно размера родительского основного текста), чтобы разметить наши пункты меню / размытия с помощью transform translate. Подробнее об этом позже.

После этого удалите анимацию изображения / значка по умолчанию.

Анимация изображения / значка: без анимации

Затем установите индекс Z для этого модуля на 1, чтобы он располагался над другими, которые в конечном итоге будут располагаться позади него.

Индекс Z: 1

И, наконец, удалите нижнее поле по умолчанию под значком, добавив следующий пользовательский CSS в Blurb Image.

margin-bottom: 0px;

Вставка № 2

Чтобы создать вторую аннотацию, просто продублируйте анкету №1.

Затем откройте настройки нового рекламного сообщения (рекламное объявление № 2), измените значок и верните индекс Z к значению по умолчанию (0).

После этого уменьшим иконку, используя масштаб трансформации следующим образом:

Масштаб трансформации: 70%

Создание пятен № 3, № 4 и № 5

Следующие три объявления можно создать, скопировав объявление № 2 и обновив значок для каждого.

Укладка пятен в одну и ту же абсолютную позицию

В состоянии по умолчанию в нашем меню все размытия будут находиться в абсолютном положении, а четыре размытых фрагмента меню будут размещены позади основного рекламного объявления значка гамбургер-меню. Чтобы наши рекламные объявления находились в одном и том же абсолютном положении, используйте функцию множественного выбора (удерживайте ctrl / cmd и щелкайте каждый из них), чтобы выбрать все пять модулей рекламных объявлений. Затем откройте настройки для одного из выбранных размытых изображений, чтобы обновить настройки элементов для всех 5 одновременно.

Затем добавьте следующий настраиваемый CSS к основному элементу:

position: absolute !important;
bottom: 20px;
left: 20px;

При этом размытые изображения будут размещены в нижнем левом углу строки.

Размещение значков меню с помощью Transform Translate

После того, как все размытые изображения будут размещены для состояния по умолчанию, мы можем начать позиционировать элементы меню для состояния щелчка (где они закончатся после нажатия кнопки главного меню). Для этого мы можем использовать свойство transform translate в конструкторе Divi. В конструкторе Divi нет состояния щелчка (например, при наведении курсора), поскольку это что-то обрабатывается JavaScript. Итак, мы собираемся расположить наши пункты меню там, где мы хотим, чтобы они теперь нажимались. Затем мы будем использовать Javascript для включения и выключения этой позиции при нажатии кнопки главного меню.

Мы хотим оставить рекламное объявление №1 на месте, потому что это кнопка главного меню. Однако мы хотим переместить рекламные объявления №2, №3, №4 и №5. И так как наши рекламные объявления теперь сложены в визуальном построителе, давайте развернем каркасный режим, чтобы обновить позиции для каждого рекламного объявления.

Рекламное объявление № 2

Откройте настройки рекламного объявления №2 и обновите следующее:

Преобразовать преобразовать ось Y: -10em

Вот новая позиция аннотации №2.

Рекламное объявление № 3

Откройте настройки рекламного объявления №3 и обновите следующее:

Преобразовать преобразовать ось Y: -8.6em
Преобразовать преобразовать ось X: 5em

Вот новая позиция аннотации №3.

Рекламное объявление № 4

Откройте настройки рекламного объявления №4 и обновите следующее:

Преобразовать преобразовать ось Y: -5em
Преобразовать преобразовать ось X: 8.6em

Вот новая позиция аннотации №4.

Рекламное объявление № 5

Откройте настройки рекламного объявления №5 и обновите следующее:

Преобразовать преобразовать ось Y: 0 пикселей
Преобразовать преобразовать ось X: 10em

Вот новая позиция аннотации №5.

Добавление пользовательских классов CSS в Blurbs

Чтобы наш JavaScript работал правильно, нам нужно добавить несколько классов CSS, которые будут служить селекторами для дополнительных стилей и функций.

Добавить класс CSS в объявление №1

В режиме каркасного просмотра откройте настройки рекламного объявления №1 и добавьте следующий класс CSS:

Класс CSS: transform_target

Добавьте классы CSS в Blurbs # 2, # 3, # 4 и # 5

Остальные четыре размытия будут использовать одни и те же классы CSS, поэтому мы можем использовать функцию множественного выбора, чтобы выбрать Blurb # 2, # 3, # 4 и # 5 и обновить класс CSS для всех четырех следующим образом:

Класс CSS: has-transform toggle-transform-animation

Обратите внимание, что есть два класса css, разделенных пробелом.

Добавление внешнего CSS и JavaScript с помощью модуля кода

После того, как наши классы CSS были добавлены к размытым изображениям, мы готовы добавить наш код на страницу с помощью модуля кода. Для этого добавьте модуль кода под рекламным сообщением №5.

Затем вставьте следующий код в модуль кода:

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

Это внешний CSS, используемый в сочетании с кодом jQuery.

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

И это тот JavaScript, который необходим для того, чтобы пункты меню с круглым значком расширялись при нажатии кнопки меню.

Убедитесь, что тег style обернут вокруг CSS, а тег script вокруг JavaScript / jQuery.

Конечный результат работы проверьте на действующей странице.

Добавление URL-адресов пунктов меню

Поскольку это меню, для четырех пунктов меню потребуются ссылки / URL-адреса. Чтобы добавить URL-адреса, необходимые для каждого пункта меню, откройте настройки модуля рекламного сообщения для каждого из 4 пунктов меню и добавьте URL-адрес ссылки модуля.

Как сделать кнопку меню залипающей (или фиксированной)

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

Для этого выберите все пять размытых изображений с помощью функции множественного выбора, а затем обновите настраиваемый CSS в главном элементе, заменив значение позиции «абсолютное» на «фиксированное».

position: fixed !important;
bottom: 20px;
left: 20px;

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

Чтобы убедиться, что меню находится над другим содержимым на странице, обновите z-индекс для строки следующим образом:

Индекс Z: 11

Затем выньте отступ строки:

Padding: 0px сверху, 0px снизу

Окончательный дизайн

Вот окончательный дизайн фиксированной круглой иконки с готовым макетом.

И вот он на мобильном телефоне.

Как с легкостью отрегулировать размер и интервал меню

Как упоминалось ранее, меню было разработано с использованием единицы длины em для позиционирования пункта меню по осям x и y (с использованием преобразования translate). Единица длины em определяется по отношению к размеру родительского основного текста. Следовательно, поскольку каждый из наших модулей рекламных объявлений имеет одинаковый размер основного текста 20 пикселей, мы можем использовать множественный выбор, чтобы изменить основной текст для всех рекламных объявлений сразу.

Это увеличит или уменьшит интервал между пунктами меню по мере необходимости.

То же самое можно сделать и с размером шрифта Icon. Просто используйте множественный выбор, чтобы настроить размер шрифта значка для всех пунктов меню одновременно.

Последние мысли

Кто знал, что добавить на страницу фиксированное круглое меню с иконками будет так просто с Divi. Это также идеальный тип меню для мобильных устройств! Конечно, требуется несколько настраиваемых фрагментов кода, но тот факт, что вы можете проектировать и позиционировать состояние щелчка по элементам меню с помощью визуального конструктора, - это довольно круто. Не забудьте изучить различные цвета, размеры и дизайн при наведении курсора, благодаря которым меню может легко соответствовать вашему собственному веб-сайту.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!