выпадающая навигация только с CSS
Примечание: Это обновление старого популярного поста.
В этом уроке я покажу, как сделать выпадающую навигацию, используя только CSS. Этот учебник начинается с кода, который я представил в учебнике по простой горизонтальной навигации.
См. навигацию Pen Drop Down (только CSS) Лизы Каталано (@lisa_c) на CodePen.
Предпочтительный метод обучения?
Фрагменты кода
Если вам просто нужен код без описания.
Просмотр видео
Если вам нравится, когда вам показывают, как что-то работает с некоторыми пояснениями, посмотрите видео.
Чтение описания
Если вы научитесь лучше читать, я включаю расшифровку видео с соответствующими встроенными фрагментами кода.
Только код
См.
навигацию Pen Drop Down (только CSS) Лизы Каталано (@lisa_c) на CodePen.
См. раскрывающуюся навигацию с помощью пера (только CSS) Лизы Каталано (@lisa_c) на CodePen.
Видео
Если вы хотите следовать вместе с видео:
Начальный код здесь
Конечный код здесь
Расшифровка
Я собираюсь рассказать о том, как создать видеоВ этом видео Выпадающее меню навигации с использованием только CSS.
Прежде чем я начну, я должен упомянуть, что этот метод не подходит для небольших экранов или мобильных веб-сайтов. Я по-прежнему буду подходить к этому с точки зрения мобильных устройств, но решение, которое я представляю, не идеально подходит для маленьких экранов. Я расскажу, как сделать это лучше, в следующем видео.
Я начинаю с кода, который я представил в своем руководстве по простой горизонтальной навигации. Возможно, вам захочется сначала посмотреть это видео, если вы не понимаете весь код, с которого я начинаю.
Если вы хотите продолжить, вы можете взять код из моего репозитория GitHub под названием «выпадающий список». выложу ссылку.
Я использую редактор кода Brackets, поэтому во время работы я могу видеть предварительный просмотр в реальном времени. Вы можете видеть, что это простая навигация, которая имеет разные цвета на активном элементе, а также при наведении курсора.
Когда я создавал эту навигацию, я использовал подход, ориентированный на мобильные устройства, и начал с простого вертикального навигационного меню, которое меняется на горизонтальное на больших экранах.
Изменения HTML
Чтобы добавить подменю, вам просто нужно добавить вложенный неупорядоченный список внутри пункта верхнего меню.
Итак, если мне нужно подменю в Tutorials, я могу перейти к этому тегу li и внутри него вставить еще один тег ul и несколько тегов li для каждого пункта меню со ссылкой внутри.
Синтаксис аналогичен меню верхнего уровня, просто вложенному внутрь. Я добавляю 3 пункта меню с некоторыми ярлыками Эммета.
Я также создам подменю для информационных бюллетеней.
<ул>
Теперь это выглядит ужасно как на маленьком, так и на большом экране.
Сначала я поработаю на маленьком экране.
Изменения CSS для маленького экрана
Причина, по которой это нечитаемо, заключается в том, что подменю отображаются поверх главного меню. Это потому, что есть свойство .nav li . Элементы списка с подменю получают только 40 пикселей, что недостаточно для содержания подменю.
Если я удалю его, высота по умолчанию будет равна auto , что означает, что браузер рассчитает необходимую высоту на основе его содержимого. Теперь мы можем видеть все пункты меню.
Новая проблема заключается в том, что размер шрифта для подменю больше, чем для верхнего меню.
Это потому, что я указал размер шрифта с единицей измерения em . Ems рассчитываются на основе размера шрифта родителя. И когда у вас есть вложенные элементы, это может вызвать эффект умножения. В этом случае подменю получают размер шрифта, который в 1,2 раза больше, чем в главном меню.
Таким образом, использование ems может разочаровать, когда вы вкладываете элементы, определяющие размер шрифта.
Существует еще одна единица измерения, называемая rems , которая означает «root ems» и всегда будет основываться на корневом элементе, а не на родительском. Это означает, что вы избегаете каскада и эффекта мультипликатора.
Я изменю единицу измерения на бэр .
Теперь все предметы имеют одинаковый размер.
Однако rem не работает в IE8 и ниже, поэтому, если вам нужна поддержка, вам нужно другое решение.
Вместо этого вы можете использовать px .
На самом деле я хочу, чтобы подменю имели меньший текст, чтобы их можно было отличить от верхних меню. Итак, я собираюсь создать новый селектор для тегов подменю li , а затем указать другой размер шрифта.
Если я укажу li
li , он будет нацелен только на элементы вложенных списков.Когда я установил 1em, вы можете видеть, что размер соответствует.
/* Код подменю */
.nav ли ли {
размер шрифта: 1em;
}
Но я установлю .8em, чтобы он был немного меньше.
Мне не нравится текст по центру в этом длинном меню. Это исходит из этого text-align: center здесь, в неупорядоченном списке. Я хочу оставить это на ul тэг, потому что я хочу, чтобы это меню располагалось по центру на больших экранах, но я сделаю тэги li с выравниванием по левому краю.
Итак, я добавлю text-align: left to . .
nav li
Затем мне нужно добавить отступ, чтобы он не обхватывал левый край. Если я добавлю это к элементу списка, граница испортится, поэтому я перемещу эту строку в теги привязки.
(.nav a)
padding-left: 15px;
Последняя проблема в меню маленького экрана заключается в том, что граница не отображается между всеми строками.
У меня есть рамка в нижней части элементов списка, но поскольку нижняя часть элемента списка «Учебники» или «Информационный бюллетень» находится под подменю, элемент списка главного меню не имеет рамки.
Вместо этого я также перенесу эту строку кода в тег a .
Теперь маленькое меню выглядит лучше.
CSS Навигация вниз-вниз на больших экранах
Итак, наконец, я могу заняться основной темой этого урока, а именно тем, как заставить подменю отображаться только при наведении курсора на больших экранах. На самом деле это не займет много времени.
Следующая часть кода выполняется внутри медиа-запроса.
Я использую контрольную точку 650 пикселей, потому что именно столько места меню должно отображаться горизонтально на одной строке в зависимости от ширины пунктов меню. Вы можете использовать
Этот код внутри медиа-запроса будет работать только на экранах с разрешением 650 пикселей и более.
Первое, что я сделаю, это установлю абсолютное позиционирование подменю, чтобы подменю было вырвано из потока документа и больше не занимало высоту на главной панели навигации.
Я нацелился на теги ul внутри li , так что это применимо только к вложенным меню.
Теперь я хочу скрыть эти подменю. Я могу установить для свойства отображения значение none , чтобы подменю не отображалось.
.nav ли ул {
положение: абсолютное;
дисплей: нет;
}
Это немного плохо видно, но нижняя граница выглядывает из основной панели навигации, поэтому я хочу отключить это на больших экранах.
.nav {
нижняя граница: нет;
}
Вы можете увидеть разницу, когда я включаю и выключаю эту линию.
Далее мы хотим отображать меню при наведении на родительское меню. Таким образом, мы можем настроить таргетинг на родительский элемент li , а затем на неупорядоченный список.
.nav li: hover ul {
дисплей: блок;
}
Подменю отображается при наведении, но это горизонтальное меню. Это может быть то, что вы хотите. Если это так, вы можете остановиться и стилизовать его так, чтобы он располагался там, где вы хотите, и выглядел лучше.
Но я хочу вертикальную навигацию.
Причина, по которой он горизонтальный, заключается в том, что я использую display: inline-block для всех тегов li внутри .nav . Это должно было сделать основную навигацию горизонтальной.
Если я хочу, чтобы эта поднавигация была вертикальной, мне нужно настроить таргетинг на теги sub li и отобразить их как block ;
.nav ли уль ли { дисплей: блок; }
nav ли уль ли {
дисплей: блок;
}
Ширина подменю немного мала. Это потому, что li имеет ширину 130 пикселей, но цвет фона исходит из ul , для которого не задана ширина, поэтому по умолчанию используется auto .
Я хочу, чтобы теги подменю ul имели ту же ширину, что и родительский li . Если я скажу width: inherit , он наследует ширину своего родителя или элемента списка.
Теперь все в порядке.
Мне не нравится, что текст теперь выровнен по левому краю. Помните, я исправил это для маленького экрана.
Если я добавлю этот код в медиа-запрос
.nav ul li {
выравнивание текста: по центру;
}
По-прежнему не похоже, что элементы выровнены по центру из-за отступа слева, который я добавил для меню на маленьком экране. Я собираюсь ненадолго проигнорировать это и исправлю это через мгновение.
Теперь все пункты меню выровнены по центру, включая подменю.
Это не очень заметно, когда весь мой текст имеет одинаковую ширину, но если я изменю одну строку, вы это увидите.
Я хочу центрировать только верхнее меню. Легко настроить таргетинг на дочерние меню, добавив больше селекторов, но я не могу сделать это в верхнем меню. Я мог бы добавить класс или нацелиться на прямых потомков класса навигации, используя дочерний селектор, который является > .
Посмотрите, когда я добавляю дочерний селектор, центрируется только верхняя навигация. Ну, по центру плюс 15 пикселей отступа слева.
Я могу снова использовать дочерний селектор, чтобы удалить этот отступ.
.nav > ул > ли > а {
отступ слева: 0;
}
Когда я использую этот дочерний селектор, он не будет ориентироваться на теги привязки подменю, потому что они не являются прямыми потомками ниже .nav div.
Отступ слева 15 пикселей останется в дочерних меню.
Конечно, стиль вашего меню зависит от вашего фактического содержимого и дизайна.
Вам могут не понравиться стили, которые я использую здесь, и вы должны приспособиться к своим предпочтениям и дизайну.
Основной концепцией является скрытое меню, которое отображается при наведении. И эта часть кода находится прямо здесь. Скрываем вложенное меню в обычном состоянии, а отображаем при наведении. Если вы хотите, чтобы он отображался вертикально, вы хотите установить блокировку отображения в пунктах меню.
В этом коде важно отметить селектор. я выбираю 9Теги 0065 ul внутри тегов li . Это означает, что он нацелен только на вложенные подменю. Глядя на разные теги li и ul, становится немного не по себе, поэтому убедитесь, что вы это понимаете. Вы можете добавить классы в подменю, чтобы сделать вещи более понятными, если хотите.
Поддержка браузера
Это будет работать во всех браузерах, кроме IE8. Это потому, что IE8 не распознает медиа-запросы. Итак, нам нужно поместить весь код из медиа-запроса в таблицу стилей IE8 и ниже.
Если вы используете препроцессор, вы можете избежать дублирования кода, поместив код в отдельный файл и импортировав его как в основную таблицу стилей, так и в таблицу стилей IE.
Итак, в обоих размерах все выглядит прилично.
Что дальше
Есть еще много вещей, которые нужно сделать, чтобы сделать его лучше. Как я уже упоминал, маленький экран не должен отображаться в верхней части страницы как есть. На телефоне он, вероятно, занял бы весь экран. Кроме того, здесь были бы полезны некоторые индикаторы скрытых меню, чтобы пользователь знал, что может навести курсор, чтобы увидеть больше. Некоторые переходы в раскрывающихся меню также были бы неплохими.
Я планирую рассмотреть эти концепции в будущих руководствах, которые появятся в ближайшее время.
Спасибо за просмотр, дайте мне знать, если у вас возникнут вопросы.
40 Примеры раскрывающегося меню CSS
16 ноября 2022 г.
Набор лучших бесплатных примеров кода раскрывающегося меню HTML и CSS.
Каждое из этих раскрывающихся меню CSS было тщательно отобрано из Codepen и других ресурсов, чтобы представить эффективные решения для улучшения организации данных, а также пользовательского интерфейса и UX приложения или веб-сайта.
Заголовок:
Выпадающее меню
Автор:
Vincent Durand
Создана:
29 июня 2018
Сделано с:
HTML, SCSSSSSSSSSSSIS 9000
.
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Красивое скользящее раскрывающееся меню CSS с градиентным фоном, созданное с использованием чистого HTML и SCSS. Он имеет удивительные эффекты постепенного появления для каждой ссылки меню для элемента. Когда вы наводите курсор на пункт меню, он выделяет фон со скользящими эффектами.
Код и демонстрация
Название:
Рекурсивный навигатель
Автор:
Sean_codes
Создана на:
сентябрь 18,
.
№Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Креативное рекурсивное выпадающее меню, созданное с использованием HTML, CSS и JavaScript. Когда вы наводите курсор на меню, оно показывает подменю в блоках с красивым эффектом скольжения и плавного появления.
код и демонстрация
Название:
Выпадающая темная/свет — чистый CSS — #14
Автор:
Иван Гроздик
Создан:
Humber 07, 2020
Сделано с:
,
9, 2020
.
Отзывчивый:
Нет
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода красивой формы в раскрывающемся списке кнопки:
900 Цветовая схема. Запускает раскрывающуюся анимацию со стрелкой кнопки, вращающейся соответственно.
Код и демонстрация
Название:
Меню раскрывающегося градиента
Автор:
Halida Astatin
Создан на:
июля 03, 2018
, созданный с:
Html, Cssml.
Да
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Красивое и красивое выпадающее меню с CSS и градиентным фоном, созданное с использованием чистого HTML и градиентного фона. Он имеет удивительную плавную анимацию зависания. Он увеличит размер элемента меню с помощью градиентного цвета фона.
Код и демонстрация
Название:
Шеленкое выпадающее меню
Автор:
Джейми Коултер
Создан:
12 апреля 2016 г.
.
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Современное шикарное раскрывающееся меню, созданное с использованием чистого HTML и SCSS. Когда вы наводите курсор на пункты меню, они будут выделяться плавной анимацией. Когда вы нажимаете на меню, оно расширяет подменю с приятным эффектом скольжения.
код и демонстрация
Название:
выпадающее меню
Автор:
Скотт Маршалл
Создан:
, 03, 2020
Сделано с:
HTML, SCSSS,
. № Зависимости:
Sass, jQuery
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Классическое черно-белое выпадающее меню CSS с эффектом плавного скольжения создано с использованием HTML , SCSS и jQuery. Когда вы наводите курсор на пункты меню, он меняет цвет фона с приятным эффектом скольжения, а также показывает меню с скользящей анимацией.
Код и демонстрация
Название:
Выпадающее меню
Автор:
Flavio Amaral
Создана на:
14 июня, 2021
. да
Зависимости:
JavaScript
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Красивое выпадающее меню, созданное с помощью CSS, HTML и JavaScript. Обеспечивает очень плавный эффект наведения на все элементы списка, а курсор можно настроить на значки, соответствующие элементам списка.
Код и демонстрация
Название:
CSS STAGGERED ANITARITAT
Обеспечивает очень плавный эффект наведения на все элементы списка, а курсор можно настроить на значки, соответствующие элементам списка.Нет
Зависимости:
Sass, jQuery
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge jQuery. Когда вы наводите курсор на элемент меню, он покажет вам ссылки с красивой прозрачной колонкой и элементами меню, скользящими слева.
Код и демонстрация
Название:
Кнопка вкладки Morphing с списком
Автор:
Colin Horn
Создан на:
03 августа, 2017
. :
да
Зависимости:
JavaScript
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
CSS0002 Красивый дизайн выпадающего меню в виде кнопки, трансформирующийся в кнопку в раскрывающееся меню со всеми элементами.
Создано с помощью HTML, SCSS и JavaScript
код и демонстрация
Название:
Выпадающая тележка для корзины
Автор:
Андре Мадаранг
Создан:
, 03 сентября, 2015
.
Нет
Зависимости:
Sass, jQuery
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Классическое раскрывающееся меню корзины покупок, созданное с использованием HTML, SCSS и jQuery. Когда вы нажмете на значок корзины, он покажет вам кнопку для оформления заказа с плавным эффектом постепенного появления.
Код и демонстрация
Название:
Причудливое раскрывающееся меню
Автор:
Иисус Родригес
Создан:
10 июля 2018
.
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Приличное удивительное прозрачное и красивое меню, созданное с использованием чистого HTML и SCSS.
Иконки меню красиво оформлены с градиентным фоном. Он имеет удивительные плавные эффекты наведения, которые показывают пункт меню с приятным эффектом скольжения.
Код и демонстрация
Название:
Гуи раскрывающееся меню
Автор:
Марк Эрикссон
Создан:
29 июня, 2020
.
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Красивый и креативный стиль кнопки, выпадающее меню, созданное с помощью HTML и CSS. Кнопка трансформируется и дублируется, чтобы предоставить значки в качестве пунктов меню.
Код и демонстрация
Название:
ПРОИЗВОДИТЕЛЬНЫЕ МЕНЮ МЕНЮ
Автор:
Роберт Боргеси
Создан по телефону:
. №
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Восхитительный простой раскрывающийся список зеленого цвета, созданный с использованием чистого HTML и SCSS.
Когда вы наводите курсор на меню, он выделяет пункт меню красивым эффектом линии. Когда вы наводите курсор на 3-й элемент, отображаются ссылки меню с красивыми эффектами скольжения.
Код и демонстрация
Название:
Классическое раскрывающееся меню
Автор:
Ahmad NASR
Создана по телефону:
30 июня 2018
.
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Классическое современное и чистое выпадающее меню, созданное с использованием чистого HTML и CSS. Его светло-голубая и белая цветовая гамма выглядит элегантно. Он имеет удивительные анимационные эффекты, когда вы наводите курсор на пункты меню.
Код и демонстрация
Название:
Wavy выпадающее меню
Автор:
Кевин
Создан:
29 апреля 2014
.
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Элегантный и привлекательный макет раскрывающегося меню, созданный с использованием чистого HTML и SCSS.
Он дал разные цвета для всех пунктов меню вместе с волнистым эффектом. Когда вы наводите курсор на пункт меню, он показывает удивительные эффекты скольжения со ссылками меню.
Код и демонстрация
Название:
ОТКРЫВАЯ МЕНЮ Стиль Гамбургера
Автор:
Seanghay
Создана на:
октября 18,
, созданный с:
HTML (Pugsling).
Нет
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Простое выпадающее меню-гамбургер, созданное с использованием HTML(Pug) и HTML(Pug). Он имеет плавные эффекты постепенного появления и исчезновения при нажатии на элемент меню. Когда вы наводите курсор на пункты меню, он выделяет пункт меню вертикальной фиолетовой линией слева, чтобы показать выбор.
Код и демонстрация
Название:
Многоцветное выпадающее меню
Автор:
Мохамед Айман
Создан на:
28 июня 2018
.
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Восхитительное многоцветное выпадающее меню, созданное с использованием чистого HTML и SCSS. Удивительные плавные анимационные эффекты даются, когда вы наводите курсор на элемент в меню. Он также имеет приятный эффект постепенной анимации.
Код и демонстрация
Название:
Распаданное меню Zigzag
Автор:
Каталин Rosu
Создан:
12 ноября 2019
Сделано с:
HTML, CSMS
95.Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Привлекательное зигзагообразное выпадающее меню, созданное с использованием чистого HTML и CSS. Когда вы наводите курсор на меню, он меняет фон пункта меню с плавной анимацией. Во втором пункте меню он покажет вам выпадающее зигзагообразное меню.
код и демонстрация
Название:
Completsable Menu
Автор:
Chris Ota
Создан:
13 июля 2015
. №
Зависимости:
Sass, jQuery
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Элегантный макет раскрывающегося меню, созданный с использованием HTML, SCSS и jQuery. Когда вы наводите курсор на пункты меню, он меняет цвет текста на зеленый, а также показывает подменю в первом пункте.
код и демонстрация
Название:
Вертикальное выпадающее меню
Автор:
Kerem Beyazit
Создан:
24 ноября 2018
Сделано с:
HTML, CS 24,
.
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Классическое вертикальное выпадающее меню, созданное с использованием чистого HTML и CSS.
Он будет отображать эффекты постепенного появления ссылок меню при наведении курсора на пункт меню. Он стильно смотрится в сине-светлой цветовой гамме.
Код и демонстрация
Название:
Стильное выпадающее меню
Автор:
Rian Ariona
Создана на:
26 сентября 2016 г.
.
Нет
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Красивое стильное выпадающее меню, похожее на сайт Stripe, созданное с использованием HTML (Pug). СКСС. При наведении курсора на меню отображается карточка меню с эффектом быстрого появления, вы можете изменить продолжительность перехода, чтобы сделать его плавным.
Код и демонстрация
Название:
Вложенная раскрывающаяся навигация
Автор:
Gabrielle Wee
Создана на:
мая 15, 2017
.
Нет
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Сложное вложенное раскрывающееся меню навигации, созданное с использованием HTML(SSHaml) и HTML(SSHaml) и HTML(SSHaml) и Когда вы щелкнете по пункту меню, он покажет вам вложенное меню с красивыми эффектами скольжения и эффектами постепенного появления.
Когда вы наводите курсор на меню, его текст и цвет рамки становятся светлее, чтобы оно отличалось от других пунктов меню.
код и демонстрация
Название:
Решение для длинных выпадающих меню
Автор:
Larry Geams Parangan
Создан по телефону:
март 13,
, сделанный с:
HTM,
,
. Отзывчивый:
Нет
Зависимости:
jQuery
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Потрясающее выпадающее меню, CSSQuery и j, созданное с использованием HTML, CSSQuery и j. Нет необходимости быть длиннее, потому что он имеет эффект автоматической прокрутки, когда вы перетаскиваете мышью ссылки меню. Это отличное решение, если у вас длинный выпадающий список.
Код и демонстрация
Название:
Простые выпадающие меню
Автор:
Mike Rojas
Создано:
ноябрь 04, 2014
.
Нет
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Простое и понятное выпадающее меню, созданное с использованием чистого HTML (SSPug) и SC . Когда вы наводите курсор на меню, оно меняет цвет фона на фиолетовый и показывает пункты меню.
Код и демонстрация
Название:
CSS -стилилизованный и отбрасываемый выбор выбора
Автор:
Mari Johannesen
Создан:
, 11,
. Отзывчивый:
да
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Минимальное, но красивое и выпадающее меню, созданное с помощью HTML CSS. Обеспечивает эффект изменения цвета при наведении и панель поиска для фильтрации результатов
Код и демонстрация
Название:
Динамический выпадающий в динамический бекер
Автор:
Беннетт Вайсбрен
Создан:
28 апреля 2016
.
да
Зависимости:
JavaScript
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Очень красивый и функциональный дизайн выпадающего меню в виде кнопки, которая превращается в градиентный цвет при наведении. Выпадающие элементы меню при нажатии, которые имеют тот же цветовой эффект градиента с анимацией слайда.
Код и демонстрация
Название:
Пользовательский раскрывающий список
Автор:
CHIH-HIS-CHEN
Создано:
01 апреля, 2020
. Отзывчивый:
да
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Красиво оформленный CSS JavaScript и выпадающее меню, созданное с помощью HTML. Выпадающее меню при клике. Давайте вы выберете значение из меню и отправите его с помощью кнопки.
Код и демонстрация
Название:
СТРЕЙСКОЙ СТИЛЬ СТИЛЬ СТИЛЬ.
Отзывчивый:
да
Зависимости:
JQuery
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Минималистичный, но очень красивый дизайн выпадающего меню. Обеспечивает очень плавное выпадающее меню и анимацию перехода. Содержит три типа макетов списка.
Код и демонстрация
Название:
Анимационное раскрывающееся меню
Автор:
Адам Кун
Создан:
27 июня 2018
.
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Удивительное выпадающее меню с всплывающими эффектами создано с использованием чистого HTML и SCSS. Он имеет плавные эффекты наведения со скольжением фона. Меню будет отображаться при наведении с красивыми анимационными эффектами.
Код и демонстрация
Название:
Открытие меню
Автор:
Марк
Создан:
декабрь 09,
.
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Стиль NavBar с раскрывающимся меню, минимально созданный с помощью HTML и SCSS. Очень отзывчивый и простой в использовании.
Код и демонстрация
Название:
Отзывчивое выпадающее меню
Автор:
Dogukan Batal
Создан на:
03 ноября 2017 г.
Сделано с:
HTML, CSSER MADE). Отзывчивый:
Да
Зависимости:
jQuery
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Элегантные адаптивные макеты меню CSSLe, созданные с использованием HTML и jQuery. Когда вы наводите курсор на пункты меню, он выделяет меню подчеркиванием, а пункты меню появляются снизу с красивой анимацией.
Код и демонстрация
Название:
Выпадающее меню подсказки
Автор:
Virlyz ID
Создана на:
12 мая 2014
.
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Красивое и красочное выпадающее меню с иконками, созданными с использованием чистого HTML и CSS. Когда вы наводите курсор на меню, оно покажет вам ссылки меню с эффектами плавного скольжения.
Код и демонстрация
Название:
ПРОИЗВОДИТЕЛЬНОЕ МЕНЮ МЕНЮ
Автор:
Sathish Kumar
Создан на:
. да
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Кодовое описание:
Еще один стиль NavBar с очень минималистичным дизайном и удивительно гладкой анимацией раскрывающегося списка. Создано с помощью HTML и SCSS.
Код и демонстрация
Название:
Выпадающее меню CSS
Автор:
Riski
Создан:
, 12 марта 2015
.
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Минимальное, но красиво оформленное раскрывающееся меню CSS.
Запускает минимальную и плавную анимацию выпадающего меню с элементами меню при нажатии.
Код и демонстрация
Название:
Эффекты выпадающих меню Cool Pure CSS
Автор:
Ruslan Pivovarov
Создан:
31 июля,
.
нет
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Дизайн раскрывающегося меню панели навигации, созданный с помощью HTML и SCSS. Запускает плавный стек или эффект выпадающего списка 3D-элементов при завершении.
Код и демонстрация
Название:
Простые чистые выпадающие меню CSS
Автор:
Коннор Брассингтон
Создан на:
ноябрь 16, 2014
, изготовленный с:
HTM, Pugs), Pugs), Pugs), Pugs), Pugs). Отзывчивый:
нет
Зависимости:
nan
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Красиво оформленное меню навигации (выпадающее меню HTMLSSSCPug) .
Предоставляет раскрывающееся меню с элементами, перечисленными со значками.
код и демонстрация
Название:
CSS3 только выпадающее меню
Автор:
Carolina Hansson
Создана по телефону:
17 апреля
. №
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Элегантное выпадающее меню с плавными переходами, созданное с использованием чистого HTML и SCSS. Когда вы наводите курсор на пункт меню, он меняет цвет текста, а также показывает подчеркивание с плавной анимацией. Он открывает раскрывающийся список со скользящими эффектами.
Код и демонстрация
Название:
Меню Cool Tree
Автор:
Karl Ward
Создан:
23 июля 2015
.
Нет
Зависимости:
Sass, jQuery
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Красивое выпадающее меню со множеством тем, созданных с использованием HTML, SCSS и jQuery.
Классное древовидное меню, построенное из простого ненумерованного списка. Он имеет плавный скользящий эффект для ссылок меню, когда вы нажимаете на пункты меню. Вы можете увидеть все темы меню, выбрав одну из верхних кнопок навигации.
Код и демонстрация
Название:
Меню адаптивной навигации
Автор:
Jenning
Создан:
27 ноября 2018
.
Зависимости:
Sass
Совместимые браузеры:
Opera, Brave, Firefox, Google Chrome, Edge
Описание кода:
Изысканное, чистое и современное меню навигации, созданное с использованием HTML и Sass. Когда вы наводите курсор на меню, оно показывает маленькую точку под пунктом меню, а также показывает ссылки меню с эффектами плавного появления и скольжения.
Код и демонстрация
Название:
3D вложенная навигация
Автор:
Дьявольский алхимик
Создан:
июня 01, 2015
Сделано с:
Html,
.
