Как сделать плавное выпадающее меню

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

Выпадающие кнопки при наведении. Как сделать плавное выпадающее меню на CSS

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

Вертикальное меню

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

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

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

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

Современные сайты порой имеют очень сложную иерархию навигации. Эта навигация иногда делает пользовательский опыт в отношении меню сайта несколько неудобным.

Использование выпадающих меню на CSS3 исправит положение и поможет быстро найти способ решения возникших перед вами задач. Благодаря CSS3 теперь возможна анимация без программирования.

Для успешного выполнения практики по данной статье, вам понадобится:

  • Набор из 80 иконок ;
  • Время и терпение.

То, что должно получиться в итоге:


Структура файлов

Структура файлов

Структура файлов нашего проекта будет состоять из четырех папок и одного HTML-файла:

  • index.html – наш основной файл, содержащий всю разметку;
  • папка img – для хранения изображений и иконок;
  • папка fonts –для хранения шрифтов, загружаемых с помощью CSS-файла (примечание: если вы выберете веб-шрифт, например, от сервиса Google Fonts , то необходимости в этой директории нет);
  • папка css – для хранения стилевых файлов CSS .

Подготовка иконок меню

Скачайте набор из 80 иконок . В данной статье мы будем использовать следующие иконки:

Чтобы найти нужные иконки, откройте файл PSD из архива и найдите слои с соответствующими названиями.

Убедитесь, что якорь установлен вправо, как на картинке ниже:

Подготовка иконок меню

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

Подготовка иконок меню - 2


Далее повторите то же самое для остальных иконок и не забудьте в конце нажать кнопку сохранения в качестве png-файла:


HTML-разметка

Добавим doctype HTML5 и несколько ссылок в секцию нашего HTML-документа, тем самым подключив CSS -файлы:

Элементы меню находятся внутри контейнера div с классом container и сгруппированы в неупорядоченный список.

Каждый элемент имеет класс box , имеет внутри себя теги и

(для заголовка элемента):

Теперь, наша HTML-разметка готова и должна напоминать нечто похожее:

HTML-разметка

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

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

Следующим будет класс icon-box с размерами 120 на 120 пикселей. Далее, обратимся по имени класса к каждому пункту меню и изменим для каждого из них значение свойства background :

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

Для имени пункта меню будем использовать тег

. Зададим ему position в значении absolute и подвинем влево. Используя свойство z-index , скроем текст под иконкой и контейнером.

Используя атрибут transition , мы можем добавить эффект плавной замены одного стиля другим без использования Flash-анимации или JavaScript .

Это значит, что каждый раз, когда курсор мыши пересекает иконку, она смещает свою позицию вправо добавлением значения свойства margin с использованием плавной анимации:

Вот собственно и все! С помощью приведенного выше кода, вы получаете то же самое, что было показано в демонстрационном примере в начале статьи.

Заключение

Использование CSS3 имеет много преимуществ. Все, что вы раньше не могли делать без программирования, например анимацию, теперь возможно реализовать без сценариев JavaScript .

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

Надеюсь, статья вам понравилась, и вы извлекли для себя полезный опыт. Встретимся в следующий раз!

Несомненно, что особенности CSS3 (трансформации и анимации) позволяют придать дизайну проекта более утонченный вид. В данном уроке мы построим анимированное выпадающее меню на CSS3 с некоторыми интересными эффектами.

Выпадающее меню

demo
sourse

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

Структура HTML кода для меню используется стандартная для таких случаев:

Выполняем сброс для элемента ul :

Оформление основного элемента меню

Теперь оформим элементы списка.

Оформление элемнетов списка

С помощью трансформаций CSS3 мы можем анимировать изменения свойств CSS, таких как margin или opacity . Воспользуемся данной возможностью для оформления эффектного появления подменю:

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

Первый и последний пунткы подменю

jQuery

IE6 требует дополнительных действий:

Так как псевдо-класс :hover не работает в других элементах, кроме ссылки, нужно добавить небольшой код jQuery для устранения проблемы.

5 последних уроков рубрики "CSS"

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Навигация с плавным выпадающим меню CSS

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

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

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

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

Приступаем к установке:

$(function() <
if($('.nurdsami_pgernlab>ul>li').hasClass('selected')) <
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css();
>
else <
$('.nurdsami_pgernlab>ul>li').first().addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css();
>
$('.nurdsami_pgernlab>ul>li').hover(function() <
$('.nurdsami_pgernlab ul li').removeClass('active');
$(this).addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css();
>,function() <
if($('.nurdsami_pgernlab>ul>li').hasClass('selected')) <
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css();
>
else <
$('.nurdsami_pgernlab>ul>li').first().addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css();
>
>);
>);

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

МОБИЛЬНАЯ ВЕРСИЯ горизонтального меню | Адаптируем меню на чистом CSS

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

See the Pen POyzbW by Denis (@Dwstroy) on CodePen.

В уроке задействуем:

  • display: flex;
  • используем transition ;
  • будем позиционировать элементы при помощи position .

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

П ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm , создаем index.html файл, пропишем каркас html:5 , заменю lang на ru .

Далее отбираем и подключаем иконки. Переходим на сайт Font Awesome, отберем себе иконки под данные пункты меню:

Шрифтовые-иконки

Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts и папку css в свою среду разработки.

В папке fonts лежат шрифты иконок, а в папке css их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css .

В index.html подключаем иконки, и прописываем каждому пункту свой стиль иконки (home, shopping-cart, cogs, th-list, envelope-open).

Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css и подключим его к index.html . Для проверки, что стили подключены, создам папку img , в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background .

Как видим у нас все отобразилось и далее приступим к описанию стилей.

Описываем CSS стили горизонтального меню

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

Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.

Скроем маркеры у списков:

Списки отобразим по горизонтали при помощи display: flax , и делаем его по центру:

В header сделаем отступ только сверху, пропишем margin-top .

Оформим наше меню, зададим цвет кнопок, шрифт и т.д.

Отбираем ссылки nav > ul li , и делаем их блочными элементами. Задаем фон меню, пропишем отступы, укажем размер, цвет, уберем подчеркивание, и сделаем заголовки заглавными буквами.

Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:

Далее отбираем иконки, позиционируем их абсолютно, отступ сверху делаем в 15 пик., с лева 12 пик, увеличим размер до 18 пик.

Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI присваиваем ему аналогичный бордюр.

Делаем разделители спискам LI :

Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.

Анимируем горизонтальное меню при наведение

Отбираем ссылки и назначаем цвет блоку, и цвет самой ссылки с иконкой присвоим белый. Давайте добавим еще темную тень. С помощью transition в 0.3 сек сделаем плавное появление:

И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:

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

Описываем выпадающее меню CSS / HTML

Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия).

Затем открываем style.css и опишем стили подменю.

Отбираем второй список и присвоим ему position: absolute; , зададим минимальную ширину в 150 пик.

Пропишем спискам border в 1 пик.

Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в "Электронике" формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны) и сохраняемся.

Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:

Далее сделаем появление подменю при наведение на основные пункты верхнего меню, для этого добавляем display: none; и тем самым скрываем все внутренние пункты.

А для их появления отберем списки при наведении и отобразим их при помощи display: block; .

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

Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь CSS генератором, у меня создано несколько Presets , вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background который прописывал до этого.

Выпадающее меню css

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

Оставить комментарий:

Отзывы

Это все,что мне выдал браузер,только криво и с точками.Подскажите,пожалуйста,что может быть не так?

Максим

Читайте также: