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

JS Pre-Processor: Нет

HTML Preprocessor: HAML

Теги: CSS, выпадающий, Menu, UI, UX

19. Меню

Адаптивное выпадающее меню. http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly/

Автор: Boyd Massie (massiebn)

Ссылки: Исходный код / ​​Демо

Created on: April 22, 2014

Made with: HTML, CSS

Tags: responsive, navigation

20.

Author: Devilish Alchemist (devilishalchemist)

Ссылки: Исходный код / ​​Демо

Дата создания: 16 декабря 2014 г.

Сделано с помощью: HTML, SCSS

21. Вложенная выпадающая навигация только на CSS

Основано на фрагменте кода, который я сделал для навигации по портфолио @jzl на http://jeselleobina.com/portfolio. Следите за полным руководством по Tuts+! Чтобы получить доступную для ARIA версию, нажмите здесь http://codepen.io/gabriellewee/pen/oWyObX

Автор: Gabrielle Wee 🧧 (gabriellewee)

Ссылки: Исходный код / ​​Демо

Сделано с помощью: Haml, SCSS, JS

Препроцессор CSS: SCSS

JS Pre-Processor: Нет

HTML Preprocessor: HAML

TAGS: Выпадение, навигация, навигация, флажок, опция

22.

A Simple. пример раскрывающегося меню, созданного только с использованием CSS3 и HTML0005 Сделано с помощью: HTML, CSS

Теги: CSS, выпадающее меню, навигация

23. Выпадающее меню на чистом CSS

Выпадающее меню, созданное с использованием только SCSS. Сделать: сделать это доступным! Ознакомьтесь с полной статьей в блоге ботов-мыслей: https://robots.thoughtbot.com/you-don-t-need-javascript-for-that

Автор: Кристина Сильва (cristina-silva)

Ссылки: Исходный код / ​​Демо

Создан: 29 апреля 2016 г.

Сделано с: HTML, SCSS

24. Полное выпадающее меню CSS3

. Лучший CSS3 только выпадающее меню

Автор: Daniesy (Danies) 99999999959 : Daniesy (Danies) 999999999959 : Daniesy (Danies) Ссылки: Исходный код / ​​Демо

Дата создания: 25 января 2014 г.

Сделано с помощью: HTML, SCSS

Теги: dropdown, css3, menu

6 90 Nice!

Автор: Lukasz (Llucaso)

Ссылки: Исходный код / ​​демонстрация

Созданы: 16 июня 2017 г.

Сделано с: HTML, CSS, JS

26. Меню панели навигации с выпадающим меню

Создайте адаптивное меню панели навигации с выпадающим меню с помощью Sass0009 Дата создания: 23 декабря 2019 г.

Сделано с помощью: HTML, SCSS

Теги: адаптивное меню, выпадающее меню, адаптивная панель навигации, панель навигации, меню навигации

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

Автор: oybek (Oybek_077)

Ссылки: исходный код / ​​демонстрация

Созданы: 29 апреля 2019

Сделано с: html, SCS

Tags: Decoverdudu-Mlu, Animl, SCSS

.

28. Супер простое раскрывающееся меню CSS

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

Автор: Anastasiia P (Stasysiia)

Ссылки: Исходный код / ​​демонстрация

Создано: 7 июня 2020

Сделано с: HTML, CSS

. , html, css3, dropdown-menu

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

Простое вертикальное раскрывающееся меню CSS с чистым дизайном.

Автор: Kerem Beyazıt (Kerembeyazit)

Ссылки: исходный код / ​​демонстрация

Создана на: 24 ноября 2018

Сделано с: HTML, CSS, JS 9999999999999999999. выпадающее меню, меню, навигация, вертикальное выпадающее меню, навигация

30.

Dino Drop Down

Автор: Ana Tudor (thebabydino)

Ссылки: исходный код / ​​демонстрация

Созданы: 19 февраля 2013 г.

Сделано с: HTML, CSS

31. Распаданный темный / свето Grozdic (ig_design)

Ссылки: Исходный код / ​​Демо

Дата создания: 7 июля 2020 г.

Сделано с помощью: HTML, CSS, JS

, pure-cs, анимация: Теги: , css, флажок

32. Контекстное меню со значками перьев

По мотивам https://dribbble.com/shots/11117547-Popover-components

Ссылки: исходный код / ​​демонстрация

Создано: 3 июня 2020 г.

Сделано с: HTML, SCSS, JS

Теги: MENU, Button, Lipdown

33 , Выпадающие меню

Автор: MGI Designer (MgiDesigner)

Ссылки: Исходный код / ​​Демо

Сделано с помощью: HTML, SCSS

Создание раскрывающегося меню CSS

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

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

Раскрывающиеся списки CSS используют как HTML (язык гипертекстовой разметки), так и CSS (каскадные таблицы стилей). Существуют способы создания настраиваемых раскрывающихся меню с использованием JavaScript в дополнение к HTML и CSS, но в этом руководстве не используется JavaScript, поскольку в этом руководстве строго придерживаются CSS и HTML.

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

Это руководство проведет вас через урок по созданию пользовательских множественных раскрывающихся меню CSS. Кроме того, вы столкнетесь с некоторыми элементами креативного дизайна. Все, что вам нужно для начала, это простой редактор кода, такой как Notepad++.

Основы выпадающего меню CSS

Создание вложенного меню HTML

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

 

<голова>
<мета-кодировка="utf-8">

<стиль>


<тело>
   
     <статья>
 
Кинопроизводство
  
<навигация>
     <ул>
 

     Директор 
<ул>
  
ДП
  
Директор
  
Помощник директора


 

     Художественный отдел 
<ул>
  
Захват
  
Освещение
  
Звук


 

     Отдел водоснабжения 
<ул>
  
Кинематограф
  
Каскадер-серфер
  
Капитан лодки


 

     Актеры 
<ул>
  
Джо Боб
  
Сью Зуковски
  
Роб Тандем


     

     


 

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

 

Добавление основного CSS

Давайте добавим фон тела для начала.

 корпус {
фон: #333;
поле: 15 пикселей;
}
 

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

Давайте теперь перейдем к заголовку, добавив следующий CSS для определения h2 тег заголовка .

 h2 {
размер шрифта: 45px;
        вес шрифта: 100;
межбуквенный интервал: 15px;
выравнивание текста: по центру;
}
 

Теперь вы можете увидеть результат в аспектах шрифта.

Обратите внимание на размещение тега статьи вокруг всех вложенных слоев. Это позволяет вам определить фон этого конкретного раздела страницы. Просмотрите это внимательно — здесь довольно много творческих определений.

 артикул {
ширина: 600 пикселей;
поле: 0 авто;
фон: #0458d6;
цвет: #fff;
радиус границы: 3px;
box-shadow: 0 0 10px 2px #666;
}
 

Результат такой:

Теперь чего не хватает? В меню необходимо скрыть слой подтемы. Для этого добавим следующий код:

 #main_nav ul ul {
положение: абсолютное;
слева: 0;
верх: 100%;
видимость: скрытая;
непрозрачность: 0;
}
 

Теперь страница выглядит следующим образом:

Что произойдет, если вы добавите раздел CSS для области навигации в виде блока?

 #main_nav {
дисплей: блок;
текстовое оформление: нет;
отступ: 5px 15px;
цвет: #000;
}
 

Теперь область выглядит так.

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

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

 #main_nav ul {
фон: белый;
плыть налево;
-webkit-переход: .5s;
переход: 0,5с;
}
 

В результате область ссылки стала более отчетливой, чем окружающая ее рамка.

Давайте сделаем шрифт прописным , добавив следующий код:

 #main_nav > ul > li > h2 {
преобразование текста: верхний регистр;
}
 

Результат будет следующим:

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

 #main_nav li {
плыть налево;
положение: родственник;
ширина: 150 пикселей;
стиль списка: нет;
-webkit-переход: . 5s;
переход: 0,5с;
}
 

После добавления этого кода темы теперь выстраиваются в ряд.

Давайте исправим выравнивание, удалив поля и отступы. Это должно позволить всем четырем темам оставаться наверху.

 * {
маржа: 0;
заполнение: 0;
}
 

Теперь вы собираетесь добавить следующее, чтобы помочь управлять тем, что происходит при наведении курсора на темы. Это должно внести последние штрихи в раскрывающееся меню CSS. Обратите внимание, что когда вы видите один li — это относится к теме первого уровня или верхнего уровня. Когда вы видите li li , вы смотрите на меню, которое опускается на так называемый второй уровень. Вы можете спроектировать это даже с третьим уровнем, используя li li li для создания многоуровневого выпадающего меню при наведении CSS.

 #main_nav li:hover, #main_nav li:hover li {
фон: #ддд;
}
#main_nav li li: hover, #main_nav li li: hover li {
фон: #bbb;
}
#main_nav li li li: hover {
фон: #999;
}
#main_nav li:hover > ul {
видимость: видимая;
непрозрачность: 1;
}
 

И добавить для дальнейшего выравнивания навигации.