Как создать эффект расширения пунктов меню при наведении мыши

Как создать эффект расширения пунктов меню при наведении мыши

От автора: вы когда-нибудь использовали в проекте плагин WordPress Slider Revolution? Если ответ «да», вы могли заметить мини-панель инструментов, которая появляется в правом углу страницы конфигурации плагина.

Первоначально видны только иконки, что делает все это красивым и компактным. Затем каждый раз при наведении курсора происходит расширение текста под ним.

В этом руководстве давайте почерпнем вдохновение из этого эффекта и создаем нечто подобное. Вот к чему мы будем стремиться:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Мы рассмотрим это быстро, сначала выписав разметку, стилизовав ее с помощью CSS, а затем добавив поведение с помощью JavaScript. Перед тем, как закончить, мы рассмотрим также подход, основанный на чистом CSS. Давайте начнем!

Все о Slider Revolution

Slider Revolution — это нечто большее, чем просто плагин слайдера для WordPress, и он буквально изменил способ, которым разработчики создают темы WordPress. Благодаря продажам около 350 тыс. на момент написания статьи, его популярность сделала создателей themepunch одним из самых успешных авторов на Envato Market! Если вы хотите узнать больше об этом, вот несколько полезных ресурсов:

1. Начнем с разметки страницы

Мы начнем с header, который будет содержать заголовок и неупорядоченный список. Каждый элемент списка будет содержать кнопку. Этот элемент будет служить оболочкой для SVG иконки и соответствующего текста.

Иконки, используемые здесь, взяты из Envato Elements. Вы можете узнать этот набор иконок, поскольку я уже использовал его в предыдущем руководстве как часть SVG-спрайта.

2. Определяем стили с помощью CSS

Заголовок будет вести себя как flex-контейнер. Его дочерние элементы будут вертикально центрированы и распределены по главной оси. Мы также зададим для него максимальную ширину и отцентрируем его по горизонтали:

И список, и кнопки будут flex-контейнерами с вертикально центрированным содержимым:

Все кнопки будут иметь разные цвета, а некоторые значения цветов будут соответствовать значениям мини-панели инструментов Slider Revolution. При наведении курсора на кнопку ее цвет слегка подсвечивается благодаря встроенной функции CSS filter().

Мы также зададим для них overflow: hidden, потому что хотим скрыть переполняющий контент во время анимации слайда:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

SVG-иконки

SVG будет белого цвета. И, как было сказано ранее, текст изначально будет скрыт. Он станет видимым, когда мы наведем курсор на родительскую кнопку:

3. JavaScript: прослушивание события мыши

Когда DOM будет готов, мы захватываем все кнопки заголовка. Затем мы перебираем их и выполняем следующие действия:

Захватываем текстовый элемент и рассчитываем его ширину по умолчанию.

Затем устанавливаем ширину этого элемента равной 0.

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

Затем каждый раз, когда мы перестаем наводить курсор на кнопку, мы устанавливаем ее ширину равной 0.

Вот JavaScript, который реализует это поведение:

Решение на чистом CSS

И последняя вещь. Сначала я попытался создать демо-версию только на CSS. Итак, изначально я установил для свойства max-width элемента span значение 0. Затем, когда на кнопки наводится курсор, это значение изменяется на фиксированные 110px. Это прекрасно работает, но у этого решения есть ограничения, потому что в цикле есть жестко закодированное значение.

Посмотрите решение на чистом CSS ниже (возможно, у вас есть идеи о том, как его улучшить?):

Если мы добавим новый пункт меню, который содержит намного больше текста, мы столкнемся с проблемами. Вы можете подумать, что можно установить для max-width значение auto, но, к сожалению, это решение не будет работать вообще!
Именно эти ограничения заставили меня задуматься о быстром решении с помощью JavaScript.

Заключение

На этом заканчивается еще один короткий урок! Спасибо за то, что следите за мной, надеюсь, вы узнали что-то новое сегодня. Не стесняйтесь расширить демонстрацию и (например) заставить ее работать на событиях клика вместо событий мыши. Плюс, если вы это сделаете, обязательно поделитесь своим результатом. Еще раз спасибо за прочтение!

Автор: George Martsoukos

Источник: https://webdesign.tutsplus.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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