Выпадающий список css html: Как создать выпадающее меню CSS?

Содержание

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

В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child.

Исходный код
Демо

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

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a></li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
			</nav>

Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

/* задаем цвет фона для контейнера nav. */
			nav {
			    margin: 100px 0;
			    background-color: #E64A19;
			}
			
			/* убираем отступы и поля, а также list-style для "ul", 
			 * и добавляем "position:relative" */
			nav ul {
			    padding:0;
			    margin:0;
			    list-style: none;
			    position: relative;
			    }
			
			/* применяем inline-block позиционирование к элементам навигации */
			nav ul li {
			    margin: 0px -7px 0 0;
			    display:inline-block;
			    background-color: #E64A19;
			    }
			
			/* стилизуем ссылки */
			nav a {
			    display:block;
			    padding:0 10px;
			    color:#FFF;
			    font-size:20px;
			    line-height: 60px;
			    text-decoration:none;
			}
			
			/* изменяем цвет фона при наведении курсора */
			nav a:hover {
			    background-color: #000000;
		}

После применения стилей у нас должно получиться нечто вроде этого:

Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a></li>
			            </ul>
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента <li>, который отвечает за пункт меню WordPress. Обратите внимание на то, что мы добавили <ul> после анкорного тега (<a>).

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

/* скрываем выпадающие списки по умолчанию
			 * и задаем абсолютное позиционирование */
			nav ul ul {
			    display: none;
			    position: absolute;
			    top: 100%;
			}
			
			/* отображаем выпадающий список при наведении */
			nav ul li:hover > ul {
			    display:inherit;
			}
			
			/* первый уровень выпадающего списка */
			nav ul ul li {
			    min-width:170px;
			    float:none;
			    display:list-item;
			    position: relative;
			}

Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню «WordPress» должны увидеть выпадающий список с тремя другими пунктами («Themes», «Plugins», «Tutorials»):

Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый <ul> между тегами <li></li>.

Взгляните на приведенный ниже HTML-код, в котором мы добавляем второй уровень выпадающего списка к пункту меню «Tutorial», который находится внутри пункта «WordPress»:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a>
			
			                    <!-- второй уровень выпадающего списка -->
			                    <ul>
			                        <li><a href="#">Stuff</a></li>
			                        <li><a href="#">Things</a></li>
			                        <li><a href="#">Other Stuff</a></li>
			                    </ul>
			                    <!—конец второго уровня выпадающего списка -->
			
			                </li>
			            </ul>
			            <!—конец первого уровня выпадающего списка -->
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода:

/* второй, третий и последующие уровни 
			 * смещаем 2 и 3 уровни влево 
			 * на значение длины первого уровня.
			*/
			nav ul ul ul {
			    position: absolute;
			    top:0;
			    left:100%;
		}

Если все сделано правильно, у вас должно получиться нечто вроде этого:

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

Добавляем индикатор выпадающего списка

Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+»):

/* измените ' +' на любой другой символ, если нужно
	*/
			li > a:after { content:  ' +'; }
		li > a:only-child:after { content: ''; }

Для этого мы используем псевдоэлемент CSS3 (:only-child). В данном случае он проверяет, имеются ли в тегах <li> родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?

Значит, вы все сделали правильно.

В завершение

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

А как вы сделали меню на HTML? Пожалуйста, расскажите об этом в комментариях.

Данная публикация является переводом статьи «How to Create a Pure CSS Dropdown Menu» , подготовленная редакцией проекта.

грамотная навигация сайта с помощью стилей

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

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

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

Поиск в Google по запросу «выпадающее меню» предоставляет много примеров

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

<nav role=»navigation»>
<ul>
<li><a href=»#»>One</a></li>
<li><a href=»#»>Two</a></li>
<li><a href=»#»>Three</a></li>
</ul>
</nav>

<nav role=»navigation»>

  <ul>

    <li><a href=»#»>One</a></li>

    <li><a href=»#»>Two</a></li>

    <li><a href=»#»>Three</a></li>

  </ul>

</nav>

Теперь, предположим, мы хотим создать выпадающее подменю во втором элементе навигации. Мы можем сделать то же самое и включить список ссылок в этом элементе списка:

<nav role=»navigation»>
<ul>
<li><a href=»#»>One</a></li>
<li><a href=»#»>Two</a>
<ul>
<li><a href=»#»>Sub-1</a></li>
<li><a href=»#»>Sub-2</a></li>
<li><a href=»#»>Sub-3</a></li>
</ul>
</li>
<li><a href=»#»>Three</a></li>
</ul>
</nav>

<nav role=»navigation»>

  <ul>

    <li><a href=»#»>One</a></li>

    <li><a href=»#»>Two</a>

      <ul>

        <li><a href=»#»>Sub-1</a></li>

        <li><a href=»#»>Sub-2</a></li>

        <li><a href=»#»>Sub-3</a></li>

      </ul>

    </li>

    <li><a href=»#»>Three</a></li>

  </ul>

</nav>

Теперь у нас есть двухуровневая система навигации. Чтобы содержимое было скрыто и отображалось, когда мы хотим, нам нужно применить некоторый CSS. Все свойства стилей для ясности взаимодействия были удалены из следующего примера:

li {
display: block;
transition-duration: 0.5s;
}

li:hover {
cursor: pointer;
}

ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}

ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}

ul li ul li {
clear: both;
width: 100%;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

li {

display: block;

transition-duration: 0.5s;

}

 

li:hover {

  cursor: pointer;

}

 

ul li ul {

  visibility: hidden;

  opacity: 0;

  position: absolute;

  transition: all 0.5s ease;

  margin-top: 1rem;

  left: 0;

  display: none;

}

 

ul li:hover > ul,

ul li ul:hover {

  visibility: visible;

  opacity: 1;

  display: block;

}

 

ul li ul li {

  clear: both;

  width: 100%;

}

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

Проблема

Все уже начинает выглядеть так, как нам нужно, но на данный момент мы еще далеки от завершения. Доступность в Интернете — это основная часть развития вашего продукта, и как раз сейчас вам предоставляется прекрасная возможность обеспечить ее. Добавление role=»navigation» — это хорошее начало, но для того, чтобы панель навигации была доступной, нужно обеспечить возможность перемещать по ней (и выделять фокусом соответствующий элемент), а также чтобы экранный диктор точно считывал вслух то, что сейчас выделено фокусом.

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

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

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

К счастью, у нас есть новый псевдо-класс CSS, который даст нам именно то, что нам нужно в этом случае, и он называется :focus-within.

Решение: «:focus-inside»

Псевдо-селектор :focus-within является частью CSS Selectors Level 4 Spec и указывает браузеру применить стиль к родительскому объекту, когда какой-либо из его дочерних элементов выделен фокусом. В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль :focus-within, а также стиль :hover для родительского элемента и увидеть, где именно находится выпадающий список навигации. В нашем случае это будет ul li:focus-within > ul:

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}

ul li:hover > ul,

ul li:focus-within > ul,

ul li ul:hover {

  visibility: visible;

  opacity: 1;

  display: block;

}

Замечательно! Это работает!

Теперь, когда мы перемещаем фокус ко второму элементу, наше подменю всплывает, и, когда мы входим в подменю, оно остается видимым! Теперь мы можем добавить наш код, чтобы включить: состояния :focus весте с состоянием :hover, чтобы предоставить пользователям клавиатуры тот же опыт, что получают пользователи мыши.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

В большинстве случаев, например, для прямых ссылок, мы можем просто написать что-то вроде этого:

a:hover,
a:focus {
…
}

a:hover,

a:focus {

  …

}

Но в данном случае, поскольку мы применяем стили hover на основе родительского li, мы можем снова использовать :focus-within, чтобы получить тот же вид, что и при переходе с помощью табуляцию. Это связано с тем, что мы не можем выделить фокусом li (если не добавим tabindex=«0»). Мы фактически выделяем фокусом ссылку (а) внутри него. :focus-within позволяет нам применять стили к родительскому li, когда фокусом выделена ссылка (довольно круто!):

li:hover,
li:focus-within {
…
}

li:hover,

li:focus-within {

  …

}

На данный момент, поскольку мы применяем стиль фокуса, мы можем сделать то, что обычно не рекомендуется (удалите стиль фокуса — этот синий контур). Мы можем сделать это:

li:focus-within a {
outline: none;
}

li:focus-within a {

  outline: none;

}

Вышеприведенный код указывает, что когда мы выделяем фокусом элемент внутри списка через ссылку (a), к элементу ссылки (a) не применяется контур. Это довольно безопасно, потому что мы задаем стили исключительно для состояния наведения курсора, и в браузерах, которые не поддерживают :focus-within, ссылка по-прежнему будет выделена контуром. Теперь наше меню выглядит так:

Окончательное меню со стилями для состояний :focus-within, :hover и удаленным контуром при выделении фокусом

Что насчет ARIA?

Если вы знакомы с концепцией доступности, возможно, вы слышали о метках и состояниях ARIA. Вы можете использовать их, чтобы создавать выпадающие списки подобного типа со встроенной доступностью! Вы можете найти здесь отличный пример Хейдона Пикеринга. При включении разметки ARIA ваш код будет выглядеть примерно так:

<nav role=»navigation»>
<ul>
<li><a href=»#»>One</a></li>
<li><a href=»#» aria-haspopup=»true»>Two</a>
<ul aria-label=»submenu»>
<li><a href=»#»>Sub-1</a></li>
<li><a href=»#»>Sub-2</a></li>
<li><a href=»#»>Sub-3</a></li>
</ul>
</li>
<li><a href=»#»>Three</a></li>
</ul>
</nav>

<nav role=»navigation»>

  <ul>

    <li><a href=»#»>One</a></li>

    <li><a href=»#» aria-haspopup=»true»>Two</a>

      <ul aria-label=»submenu»>

        <li><a href=»#»>Sub-1</a></li>

        <li><a href=»#»>Sub-2</a></li>

        <li><a href=»#»>Sub-3</a></li>

      </ul>

    </li>

    <li><a href=»#»>Three</a></li>

  </ul>

</nav>

Вы добавляете aria-haspopup=»true» к родительскому выпадающему меню, чтобы указать альтернативное состояние, включая aria-label=»submenu» для самого выпадающего меню (в нашем случае наш список с class=»dropdown»).

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

Поддержка браузерами

Говоря о возможных сложностях, давайте рассмотрим поддержку браузерами. Хотя :focus-within довольно неплохо поддерживается браузерами, стоит отметить, что Internet Explorer и Edge не поддерживают его, поэтому ваши пользователи на данных платформах не смогут увидеть меню.

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

Окончательным решением здесь будет использование как разметки ARIA, так и CSS :focus-within.

Автор: Una Kravets

Источник: //css-tricks.com/

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <select> позволяет создать элемент интерфейса
в виде раскрывающегося списка, а также список с одним или множественным выбором,
как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка.
Ширина списка определяется самым широким текстом, указанным в теге <option>,
а также может изменяться с помощью стилей. Каждый пункт создается с помощью
тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные
списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через
скрипты.

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаВыберите герояЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбораРаскрывающийся список

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

accesskey
Позволяет перейти к списку с помощью некоторого сочетания клавиш.
autofocus
Устанавливает, что список получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает список с формой.
multiple
Позволяет одновременно выбирать сразу несколько элементов
списка.
name
Имя элемента для отправки на сервер или обращения через скрипты.
required
Список обязателен для выбора перед отправкой формы.
size
Количество отображаемых строк списка.
tabindex
Определяет последовательность перехода между элементами при нажатии на клавишу Tab

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

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>  
 
  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Как стилизовать Ul Li с CSS, чтобы он выглядел как выпадающий список «form»?

У меня есть Ul Li с некоторыми ссылками , они отображаются как меню.
Я хочу установить список «dropdown», но как классические селекторы «form»…
-не выпадающее меню, которое отображается при наведении курсора, а кликабельное меню.

<ul>
<li>Option 1 </li>
<li>Option 2 </li>
</ul>

Какой CSS сделает его похожим на «выпадающий список форм»?

Я прикрепляю изображение, чтобы было понятно, что мне нужно:

JP

html

css

drop-down-menu

Поделиться

Источник


dmtnexer    

04 февраля 2014 в 13:42

3 ответа

  • Как стилизовать фон маркированных точек в <ul> ?

    У меня есть такой список: <ul> <li class=list-item> <span>Label</span> <div class=multi-line-content> multi-<br /> line<br /> content </div> </li> <li class=list-item> <span>Label</span> <div class=multi-line-content>…

  • HTML UL CSS пограничный стиль

    У меня есть небольшой вопрос относительно html-списков и CSS. Я хочу иметь список (whit sublist), который выглядит следующим образом (просмотр результата, копируя код в http://htmledit.squarefree.com/ ): <style type=text/css> ul { border: 0px solid #90bade; } li { list-style-type:none;…


1

Предполагая, что по какой-то причине вы хотите сохранить его в виде списка. Вам понадобится больше, чем CSS.

Шаг 1 — В HTML поместите список внутри a, а также добавьте некоторые HTML в стиль в качестве поля выбора. например

<div>
  <div></div>
  <a href="#">v</a>
  <ul>
    <li>Option 1 </li>
    <li>Option 2 </li>
  </ul>
</div>

Шаг 2 — Добавьте CSS, чтобы сделать это так, как вы хотите. В основном вы захотите расположить список под полем, а затем display:none.

.dropdown-emulator{
  position:relative;
}

.dropdown-emulator ul{
  position:absolute;
  top:25px;
  left:0;
}

Шаг 3 — Создайте некоторый JavaScript, чтобы захватить событие onclick кнопки выбора, чтобы список появился.

Очень простой рабочий пример см. Здесь http://jsfiddle.net/q5SEF/3/

Поделиться


AndrewPolland    

04 февраля 2014 в 15:19


0

Я думаю, для этого вы, вероятно, захотите использовать поле, используя теги?

http://www.w3schools.com/tags/tag_select.asp

Альтернативно.

Вы можете включить переключатель видимости jQuery на скрытом div, который будет отображать содержимое вашего выпадающего списка при нажатии на него.

Поделиться


askrich    

04 февраля 2014 в 13:46


0

Я считаю, что вы ищете выпадающий список. Вместо списка элементов используйте тег select.

<select>
  <option value="Milk">Fresh Milk</option>
  <option value="Cheese">Old Cheese</option>
  <option value="Bread">Hot Bread</option>
</select>

Поделиться


Brian H    

04 февраля 2014 в 13:46

  • Как стилизовать выпадающий список UL/LI

    У меня есть неупорядоченный список,который я пытаюсь настроить во время выполнения, вызываемый стилем DropKick CSS. Вот изображение того, что я вижу: Я попытался стилизовать его так, что ничего не сделало со стилем: .dk_options ul li a { margin: 0; padding: 0; list-style-type: none; }…

  • CSS: 3-столбчатая компоновка <ul> с парными <li>-элементами

    Ищу способ стилизовать список, чтобы он выглядел как сетка. <div class=name> <ul> <li>1</li> <li>Text</li> <li>2</li> <li>Text</li> <li>3</li> <li>Text</li> … <ul> В моем css я уже использовал: .name {…

Похожие вопросы:

Как отключить выпадающий список с CSS, чтобы он выглядел серым?

У меня есть приложение ASP.NET с выпадающим списком. Как отключить выпадающий список с CSS, чтобы он выглядел серым? Возможно ли это сделать только с CSS ?

Как я могу стилизовать ul li в css?

Возможный Дубликат : Я хочу показать элементы списка в виде 2 или более столбцов (динамическое выравнивание ) Извините за мой английский! У меня проблема с уль ли: мой HTML: <ul>…

Как мне стилизовать выпадающий список <select> только с CSS?

Существует ли CSS-единственный способ стилизовать выпадающий список <select> ? Мне нужно стилизовать форму <select> как можно больше по-человечески, без каких-либо JavaScript. Какие…

Как стилизовать фон маркированных точек в <ul> ?

У меня есть такой список: <ul> <li class=list-item> <span>Label</span> <div class=multi-line-content> multi-<br /> line<br /> content </div>…

HTML UL CSS пограничный стиль

У меня есть небольшой вопрос относительно html-списков и CSS. Я хочу иметь список (whit sublist), который выглядит следующим образом (просмотр результата, копируя код в…

Как стилизовать выпадающий список UL/LI

У меня есть неупорядоченный список,который я пытаюсь настроить во время выполнения, вызываемый стилем DropKick CSS. Вот изображение того, что я вижу: Я попытался стилизовать его так, что ничего не…

CSS: 3-столбчатая компоновка <ul> с парными <li>-элементами

Ищу способ стилизовать список, чтобы он выглядел как сетка. <div class=name> <ul> <li>1</li> <li>Text</li> <li>2</li> <li>Text</li>…

Как стилизовать список так, чтобы он выглядел как выпадающий список (с полосой прокрутки)

кто-нибудь может мне помочь с CSS. У меня есть список, и я хочу, чтобы список выглядел как выпадающий список, который имеет белый фон,имеет полосу прокрутки и т. д. Вот мой код HTML <script>…

Сделать выпадающий список из элементов li

Я пытаюсь сделать выпадающее меню из трех элементов li . Активный элемент li получает класс current_lang , и он должен работать как родитель, который можно щелкнуть, чтобы открыть выпадающий список….

Как стилизовать два разных тега <ul> в HTML и CSS?

У меня есть тег ‘ul’, который уже стилизует что-то другое. Мне нужно создать еще один тег ‘ul’, чтобы стилизовать что-то еще на моей странице HTML. Это первый стиль ul : ul { list-style: none;…

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

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

Выпадающее меню со списком элементов на HTML

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

Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).

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

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

<ul>
    <li><a href=#>Меню №1</a>
        <ul>
            <li><a href=#>Субменю №1 первого меню</a></li>
        </ul>
    </li>
    <li><a href=#>Меню №2</a>
        <ul>
            <li><a href=#>Субменю №2 второго меню</a></li>
            <li><a href=#>Субменю №2 второго меню</a></li>
        </ul>
    </li>
    <li><a href=#>Меню №3</a>
        <ul>
            <li><a href=#>Субменю №3 третьего меню</a></li>
            <li><a href=#>Субменю №3 третьего меню</a></li>
            <li><a href=#>Субменю №3 третьего меню</a></li>
        </ul>
    </li>
</ul>

Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:

Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.

Добавлю немного CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:

body {
    /* Убираю отступы. */
    margin:0px;
    /* Убираю еще отступы. */
    padding:0px;
    /* Задаю шрифт. */
    font: 14px ‘Verdana’;
}
ul {
    /* Убираю маркеры у списка*/
    list-style: none;
    /* Делаю элементы блочными. */
    display: block;
    /* Убираю отступы. */
    margin:0px;
    /* Убираю еще отступы! */
    padding:0px;
}
ul:after {
    /* Делаю элементы блочными. */
    display: block;
    /* Убираю выравнивание. */
    float: none;
    content: ‘ ‘;
    clear: both;
}
ul.mmenuu > li {
    /* Задаю выравнивание и позиционирование. */
    float: left;
    /* Считаем координаты относительно исходного места*/
    position: relative;
}
ul.mmenuu > li > a {
    /* Делаю элементы блочными: */
    display: block;
    /* Задаю белый цвет. */
    color: #fff;
    /* Задаю отступ 10px. */
    padding: 10px;
    /* Убираю форматирование*/
    text-decoration: none;
    /* Задаю цвет. */
    background-color: #da570f;
}
ul.mmenuu > li > a:hover {
    /* Задаю цвет при наведении. */
    background-color: #eb9316;
}
ul.ssubmenuu {
    position: absolute;
    width: 240px;
    top: 37px;
    left:0px;
    /* Делаю субменю скрытыми. */
    display: none;
    /* Цвет — белый. */
    background-color: white;
}
ul.ssubmenuu > li {
    /* Блочное расположение элементов*/
    display: block;
}
ul.ssubmenuu > li > a {
    /* Делаю элементы блочными. */
    display: block;
    /* Убираю форматирование*/
    text-decoration: none;
    /* Задаю отступ. */
    padding: 10px;
    /* Задаю цвет. */
    color: #ffffff;
    /* Еще цвет. */
    background-color: #da570f;
}
ul.ssubmenuu > li > a:hover {
    /* Цвет бэкграунда при наведении. */
    background-color: #eb9316;
    /* Задаю подчеркивание*/
    text-decoration: underline;
}
ul.mmenuu > li:hover > ul.ssubmenuu {
    /* Делаю элементы блочными. */
    display: block;
}

Результат:

Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!

Выпадающий при наведении список меню на HTML

И снова мы изобретаем меню на чистом CSS, без использования JS.

<ul>
<li><a href=»#»>Раздел меню №1</a></li>
<li><a href=»#»>Раздел меню №2</a>
    <ul>
        <li><a href=»#»>Подраздел №1 второго меню</a></li>
        <li><a href=»#»>Подраздел №2 второго меню</a></li>
    </ul>
</li>
<li><a href=»#»>Раздел меню №3</a>
    <ul>
        <li><a href=»#»>Подраздел №1 третьего меню</a></li>
        <li><a href=»#»>Подраздел №2 третьего меню</a></li>
        <li><a href=»#»>Подраздел №3 третьего меню</a></li>
    </ul>
</li>      
</ul>

Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.

Дальше. В каждый из разделов я вложил дополнительные списки <ul>, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

Перейдем к CSS. Код:

>
    /* Обнуляю отступы и убираю маркеры у списков. */
    ul, li {
        margin:0;
        padding:0;
        list-style-type:none;  
    }

    /* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
    #menu {
        display:block;
        position:absolute;
        top:20px;
        left:20px;

    }

    /* Задаю стили для блоков выпадающего списка. */
    #menu > li {
        display:inline-block;
        height:20px;
    /* Считаем координаты относительно исходного места. */
        position:relative;
    }

    /* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
    #menu > li > ul {
        position:absolute;
        top:20px;
        left: 10px;
        display:none;
        background-color: bisque;
        border-radius: 5px;
        width: 185px;
        font-size: 14px;
        padding: 10 0 10 10;
    }

    /* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
    #menu > li:hover > ul {
        display:block;  
    }
</style>

Результат:

Что хочу отметить дополнительно.

«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!

«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.

Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.

А значит для пользователей посещающих сайт с мобильных устройств вам понадобится отдельная реализация меню с выпадающим списком. Вот пожалуй и все в этой части статьи.

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

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

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

Стили помогают нам скрыть элементы и сделать их выпадающими при наведении курсора.

Код:

<ul>
    <li>
        <a href=»#» title=»Здесь ссылка на главную»>Главная</a>
    </li>
    <li>
        <a href=»#» title=»Здесь информация о компании»>О нас</a>
        <ul>
            <li><a href=»#»>Суперпродукты</a></li>
            <li><a href=»#»>Суперкоманда</a></li>
        </ul>
    </li>
    <li>
        <a href=»#» title=»Здесь будут ваши услуги»>Услуги</a>
        <ul>
            <li><a href=»#»>Крутая услуга №1</a></li>
            <li><a href=»#»>Крутая услуга №2</a></li>
            <li><a href=»#»>Крутая услуга №3</a></li>
        </ul>
    </li>
    <li>
        <a href=»#» title=»Здесь разместите ссылки на ваши продукты»>Продукты</a>
        <ul>
            <li><a href=»#»>Суперсылка №1</a></li>
            <li><a href=»#»>Суперсылка №2</a></li>
            <li><a href=»#»>Суперсылка №3</a></li>
            <li><a href=»#»>Суперсылка №4</a></li>
        </ul>
    </li>
    <li>
        <a href=»#» title=»Здесь напишите свои контакты»>Контакт</a>
        <ul>
            <li><a href=»#»>Время работы</a></li>
            <li><a href=»#»>Месторасположение</a></li>
            <li><a href=»#»>Выпадающий список 10/10!</a></li>
        </ul>
    </li>
</ul>

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

Теперь давайте вооружимся магией стилей — при помощи CSS я трансформирую все серии вложенных списков <ul> в крутое и удобное в использовании выпадающее меню с несколькими элементами.

Перейдем к CSS-коду. Что-то мне стало скучно туда-сюда бегать, поэтому я хорошенько его прокомментировал прямо в стилях. Да и вам удобнее будет, если будете пользоваться этим решением.

CSS-код, помещенный в <head> страницы:

#nnavv{
    /* По левому краю выравниваю! */
    float:left;
    /* Отступ. */
    margin-bottom: 10;
    /* Задаю ширину. */
    width:500px;
    /* Убираю маркеры*/
    list-style: none;
    /* Шрифт — жирным*/
    font-weight: bold;
}
#nnavv li{
    /* Выравнивание! */
    float: left;
    /* Делаю элементы блочными. */
    display: block;
    /* Отступ. */
    margin-right: 10;
    /* Позиционирование относительно исходного места! */
    position: relative;
}
#nnavv li a{
    /* Цвет бэкграунда. */
    background: #333;
    /* Делаю элементы блочными. */
    display: block;
    /* Отступы. */
    padding: 5;
    /* Цвет ссылки. */
    color: #fff;
    /* Форматирование текста*/
    text-decoration:none;
    /* Задаю скругленные углы на 2 пиксела*/
    -moz-border-radius: 2;
    -webkit-border-radius: 2;
    border-radius: 2;
    /* Тень для визуальной приподнятости текста*/
    text-shadow:1px 1px 1px rgba(0,0,0,0.74);
}
#nnavv li a:hover{
    /* Подчеркну ссылку при наведении*/
    text-decoration: underline;
    /* Задам фон. */
    background: #6b0c33;
    /* Цвет ссылки остается прежним*/
    color: #fff;
    background: rgba(108,13,53,0.74); /* Заставляю выглядеть полупрозрачным! */
}
/* НАСТРАИВАЕМ ВЫПАДАЮЩИЕ ЭЛЕМЕНТЫ!!! */
#nnavv ul{
    /* Убираю маркеры у выпадающего списка*/
    list-style:none;
    left:-9999px; /* Убираю ненужно за пределы экрана (говорят, это на 95% лучше чем «display:none;», т.к. дисплей нон некоторые программы игнорируют). */
    opacity:0; /* При помощи прозрачности, скрываем <ul>. */
    /* Делаем так, чтобы Webkit плавно показывал нам всплывающие элементы выпадающего списка при наведении мышки. */
    -webkit-transition: 0.24s linear opacity;
    position:absolute;
}
#nnavv ul li{
    /* Здесь я задаю отступ между элементами &lt;li&gt;. Это необходимо для разделения пунктов меню, его не было в предыдущей части статьи (просто забыл)*/
    padding-top: 1px;
    float:none;
}
#nnavv ul a{
    /* Делаю элементы блочными. */
    display:block;
    /* Запрещаю перенос строк текста на новую строку, чтобы создавался многострочный выпадающий элемент списка. */
    white-space: nowrap;
}
#nnavv li:hover ul{ /* Создаю выпадающий пункт, который появится при наведении. */
    left:0; /* Возвращаю его обратно на экран пользователя, — когда нужно. */
    opacity:1; /* Убираю прозрачность*/
}
#nnavv li:hover a{ /* В этом стиле я устанавливаю свойства для элементов верхнего уровня, — в то время, когда показывается выпадающий список. */
    /* Подчеркну*/
    text-decoration:underline;
    /* Сделаю полупрозрачным. */
    background:rgba(109,15,53,0.74);
    background:#6b0c36;
}
#nnavv li:hover ul a{ /* Поменял некоторые стили первого уровня при появлении выпадающего элемента. */
    /* Уберу форматирование*/
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.077s linear;
}
#nnavv li:hover ul li a:hover{ /* Здесь я задаю стили для конкретных выпадающих пунктов, при наведении на них курсора — чтобы они отличались от тех элементов, куда курсор не попадает*/
    -moz-transform:scale(1.07);
    -webkit-transform:scale(1.07);
    /* Задам цвет фона выпадающего элемента*/
    background:#334;
    background:rgba(50,50,50,0.74); /* Сделаю полупрозрачным. */
    text-decoration:underline;
}

Готово! Финальный результат:

БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС

Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.

Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.

HTML код:

<ul>
    <li>
    <a href=»/»>Красноярский край</a>
        <ul>
            <li><a href=»/»>Минусинск</a></li>
            <li><a href=»/»>Ачинск</a></li>
            <li><a href=»/»>Красноярск</a></li>
            <li><a href=»/»>Железногорск</a></li>
            <li><a href=»/»>Канск</a></li>
            <li><a href=»/»>Норильск</a></li>
        </ul>
    </li>

    <li>
    <a href=»/»>Свердловская область</a>
        <ul>
            <li><a href=»/»>Екатеринбург</a></li>
            <li><a href=»/»>Верхняя Пышма</a></li>
            <li><a href=»/»>Нижний Тагил</a></li>
            <li><a href=»/»>Первоуральск</a></li>
            <li><a href=»/»>Асбест</a></li>
            <li><a href=»/»>Каменск-Уральский</a></li>
        </ul>
    </li>
</ul>

Скриншот результата:

CSS-код, который я поместил в <head>:

ul.ddropdownn li {/* Считаем координаты относительно исходного места. */ position: relative; }
ul.ddropdownn, ul.ddropdownn-inside {
    /* Отступы на нуле. */
    padding: 0;
    /* Маркеры уберем. */
    list-style-type: none;
    }
ul.ddropdownn-inside {
    /* Спрячем дочерние элементы выпадающего списка. */
    left: -9999px;
    position: absolute;
    }
ul.ddropdownn li.ddropdownn-top {
    /* Небольшой отступ. */
    margin: 0 1px 0 0;
    /* Выравнивание по левой стороне. */
    float: left;
    display: inline;
    }
ul.ddropdownn li.ddropdownn-top a {
    /* Делаю элементы блочными. */
    display: block;
    /* Снова отступы. */
    padding: 3px 10px 4px;
    }
ul.ddropdownn a.ddropdownn-top {/* Цвет фона. */ background: #efefef; }
ul.ddropdownn a.ddropdownn-top:hover {/* Отступы. */ padding: 3px 10px 4px; }
ul.ddropdownn li.ddropdownn-top:hover .ddropdownn-inside {
    left: 0;
    /* Делаю элементы блочными. */
    display: block;
    }
ul.ddropdownn .ddropdownn-inside {/* Цвет фона. */ background: #ffffff; }
ul.ddropdownn .ddropdownn-inside a:hover {/* Цвет фона изменится при наведении. */ background: #efefef; }

Результат (без наведения курсора):

Результат (при наведении курсора):

Итоги: скачать готовый html+css код выпадающего списка меню

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

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

Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.

Превью содержимого файла:

Скачать:

blogwork-menu-list-archive.zip (2,97КБ)

P.S. Ну а если вы вдруг неправильно написали поисковый запрос и зашли не туда (не нашли то чего нужно), не расстраивайтесь — у меня есть пара видео, где при помощи <select> и <option> в HTML страницу вставляются выпадающие списки. Видео 1:

Видео 2:

Как сделать выпадающий список в HTML (ТОП 16)

За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы.

Ранее, чтобы создать выпадающий список в html (на англ. — dropdown), мы просто использовали <select> и <option>. Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.

Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.

Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.

 

Посмотреть в песочнице — http://codepen.io/silverdrop/pen/msrcE

Написан на CSS3 и JavaScript. Обычный выпадающий список.

Посмотреть в песочнице — http://codepen.io/pedronauck/pen/fcaDw

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

Посмотреть в песочнице — http://codepen.io/carlcalderon/pen/KhwDH

Посмотреть в песочнице — http://codepen.io/Tombek/pen/JAvHC

Отличное решение для длинных выпадающих меню.

Посмотреть в песочнице — http://codepen.io/larrygeams/pen/feoDc

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

Посмотреть в песочнице — http://codepen.io/Thibaut/pen/Jasci

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

Посмотреть в песочнице — http://cssdeck.com/labs/navigation-dropdown-with-flip-effect

 

Посмотреть в песочнице — http://codepen.io/jakestuts/pen/nEFyw

Посмотреть в песочнице — http://codepen.io/daniesy/pen/pfxFi

Сделано в стиле UI, подойдет под UI стилистику сайта.

Посмотреть в песочнице — http://codepen.io/Jeplaa/pen/IzAvx

 

Посмотреть в песочнице — http://codepen.io/Dianatomic/pen/HqICG

Dropdown в стиле выбора страны. 

Посмотреть в песочнице — http://codepen.io/abhishek/pen/bkfLi

Посмотреть в песочнице — http://codepen.io/Metty/pen/dglwH

 

Посмотреть в песочнице — http://codepen.io/DKunin/pen/EIobp

Посмотреть в песочнице — http://codepen.io/MrBambule/pen/jIseg

Довольно интересный и простой дизайн.

Посмотреть в песочнице — http://codepen.io/mingger/pen/hdtiD

 

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

Как сделать выпадающий список в html (подборка ТОП 16) от bologer

Красивый выпадающий список для сайта — делаем выпадающий список

Как вы думаете, современный ли у вас дизайн сайта? Используете ли вы самые последние технологии или боитесь их? Возможно, вы думаете что это слишком сложно и даже лезть не хотите в эти дебри. Но на самом деле всё обстоит куда иначе. Ведь новые технологии (я имею ввиду сейчас CSS3) пришли для того, чтобы сделать жизнь веб-дизайнера легче и привнести свои дополнительные возможности при создании внешнего вида сайта. Сегодня поговорим о том несколько видов дизайна для выпадающего списка.

Выпадающий список для сайта

Не самое простое решение я рассматривал в январе этого года 🙂 :

Посмотреть примерСкачать

Что хочу сказать сразу по поводу демо: каждый отдельный вид списка находится в отдельном файле HTML, что позволяет без труда взять код, который вам нужен. Также в отдельных файлах расположены стили для каждого дизайна списка. Вам лишь осталось выбрать тот, который вам больше всего нравится и найти его файл стилей 🙂 .

В разметке списка ничего необычного:

1
2
3
4
5
6
7
8
9
10

<section>
    <label>Выберите своего динозавра:</label>
    <select>
        <option value="1">Стегозавр</option>
        <option value="2">Велоцираптор</option>
        <option value="3">Спинозавр</option>
        <option value="4">Археоптерикс</option>
        <option value="5">Апатозавр</option>
    </select>
</section>

Как говорится: <select> он и в Африке <select>. Внутри него есть теги <option>, в которых находятся элементы списка.

В некоторых примерах вы можете увидеть необычные атрибуты, типа data-class или data-link. Здесь нечего боятся, они нужны для правильного функционирования соответствующего списка, потому что там может храниться дополнительная информация.

Пройдемся немного по стилям.

Основные стили находятся в файле cs-select.css. Здесь находятся стили которые придают списку обычный вид, который мы привыкли видеть.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon/icomoon.eot?-rdnm34');
    src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
        url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),
        url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'),
        url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
div.cs-skin-border {
    background: transparent;
    font-size: 2em;
    font-weight: 700;
    max-width: 600px;
}
 
@media screen and (max-width: 30em) {
    .cs-skin-border { font-size: 1em; }
}
 
.cs-skin-border > span {
    border: 5px solid #000;
    border-color: inherit;
    transition: background 0.2s, border-color 0.2s;
}
 
.cs-skin-border > span::after,
.cs-skin-border .cs-selected span::after {
    font-family: 'icomoon';
    content: '\e000';
}
 
.cs-skin-border ul span::after {
    content: '';
    opacity: 0;
}
 
.cs-skin-border .cs-selected span::after {
    content: '\e00e';
    color: #ddd9c9;
    font-size: 1.5em;
    opacity: 1;
    transition: opacity 0.2s;
}
 
.cs-skin-border.cs-active > span {
    background: #fff;
    border-color: #fff;
    color: #2980b9;
}
 
.cs-skin-border .cs-options {
    color: #2980b9;
    font-size: 0.75em;
    opacity: 0;
    transition: opacity 0.2s, visibility 0s 0.2s;
}
 
.cs-skin-border.cs-active .cs-options {
    opacity: 1;
    transition: opacity 0.2s;
}
 
.cs-skin-border ul span {
    padding: 1em 2em;
    backface-visibility: hidden;
}
 
.cs-skin-border .cs-options li span:hover,
.cs-skin-border li.cs-focus span {
    background: #f5f3ec;
}

А находятся эти стили в отдельном файле (для удобства) cs-skin-border.css.

Вывод

Чего только не сделаешь ради неповторимого дизайна своего сайта! И главное — не бойтесь экспериментировать с дизайном, постоянно улучшайте его. Вдруг вы создадите (путем экспериментов) именно тот, который понравится вашим пользователям и они скажут «Вау, мне нравится этот дизайн, что же еще интересного есть на этом сайте!» 😉 .

Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/

примеров выпадающих меню HTML и CSS, которые вы можете использовать

Выпадающее меню CSS — эффективное решение для улучшения пользовательского интерфейса и пользовательского интерфейса приложения или веб-сайта. Раскрывающееся меню — это подменю главного меню веб-сайта или приложения. Он используется для демонстрации кнопок содержимого (ссылок) для каждого родительского пункта меню.

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

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

Автор: Зеландия

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

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

Рекурсивная навигация при наведении курсора (только CSS)

Автор: sean_codes

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

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

Автор: Кевин

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

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

Простое раскрывающееся меню CSS с наведением и: фокус внутри и состояниями фокусировки и ARIA

Автор: Уна Кравец

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

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

Автор: Rlski

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

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

Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода

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

Примеры раскрывающегося меню для веб-сайтов и приложений

Автор: Кристина Сильва

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

Это раскрывающееся меню не включает JavaScript.Из четырех пунктов меню присутствует только одна раскрывающаяся кнопка класса div. Этот класс кнопки создает подменю, которое содержит три поля содержимого.

Автор: Максим Агинский

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

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

Автор: Amr SubZero

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

Вот выпадающее меню CSS с освежающим цветом фона.Каждое подменю отображает раскрывающееся содержимое своего пункта главного меню.

Автор: Гол Хамер

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

С помощью этого простого параметра легко создать раскрывающееся меню.

Автор: Джейми Колтер

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

Вот отличный вариант для IU, не использующего JavaScript. Он отличается красивым цветом фона и плавным выпадающим эффектом анимации.

Автор: Джон Белла

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

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

Автор: Роберт Боргези

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

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

Автор: Коннор Брассингтон

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

Простое раскрывающееся меню CSS.После небольшой корректировки кода класса кнопки можно настроить другую кнопку меню для отображения раскрывающегося содержимого.

Автор: Керем Беязит

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

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

Автор: Kitty giraudel

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

Минимальное раскрывающееся меню, созданное с помощью взлома флажка. Выпадающий код класса div может нуждаться в корректировке перед использованием в ваших проектах.

Автор: Гарет МакКинли

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

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

Автор: Разван Тудоса

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

Это раскрывающееся меню CSS, созданное с эффектом анимации складывания бумаги.

Автор: Хью Бальбоа

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

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

Раскрывающийся список на чистом CSS [работа для сенсорного экрана мобильного устройства]

Автор: Джонат Ли

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

Это раскрывающееся меню CSS хорошо подходит для устройств с сенсорным экраном. Было протестировано на :

  1. Chrome Canary
  2. Chrome PC
  3. IE10 PC
  4. Эмулятор Android
  5. Firefox PC
  6. И смартфон Android 5

Автор: Алексей Попков

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

Раскрывающееся меню во всю ширину.Подменю остаются под своими родительскими элементами.

Автор: Каролина Ханссон

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

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

MainMenu #CodePenChallenge

Автор: Мохамед Айман

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

Это красивое и красочное горизонтальное выпадающее меню.

Автор: Дэн Матисен

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

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

Автор: Jenning

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

Этот простой дизайн имеет мягкий цвет фона.

Автор: Халида Астатин

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

Адаптивное раскрывающееся меню с красивыми цветами.

Автор: Николас Галлер

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

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

Автор: Dr.Web

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

Этот пример идеально подходит для разработки веб-сайта.

Автор: Марио Лонкарек

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

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

Автор: Андор Надь

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

Это простой пример раскрывающегося меню.

Автор: Ахмад Наср

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

Горизонтальное выпадающее меню CSS с красивым цветом фона и красивым анимационным эффектом.

Автор: Марко Бесаньи

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

Этот стиль дизайна прост и имеет идеальный размер шрифта для каждого пункта меню.

Автор: Майк Рохас

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

Это раскрывающееся меню имеет привлекательный зеленый цвет фона с белым текстом.

Автор: Руслан Пивоваров

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

Этот вариант идеально подходит для веб-сайтов с классным CSS-дизайном.

Автор: Каталин Рошу

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

Как следует из названия, подменю спускается с причудливым эффектом зигзагообразной анимации. Каталин Рошу превзошла себя в этом уникальном стиле. Она не использовала ни одного из простых эффектов, очевидных в других макетах.

Автор: Джон Урбанк

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

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

Простой раскрывающийся список CSS

Автор: Доан Хопкинс

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

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

Автор: Сатиш Кумар

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

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

Автор: Адам Кун

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

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

Автор: Guil H

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

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

Автор: Эрик Мюссер

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

Яркие цвета этого варианта оживят сайт вашего клиента.

Автор: Винсент Дюран

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

Выпадающее меню CSS появляется, когда пользователь наводит курсор на основные элементы.

Автор: Анастасия П

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

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

Завершение мыслей об этих раскрывающихся меню HTML и CSS

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

Итак, не сомневайтесь.Выберите стильное раскрывающееся меню из этого списка.

Если вам понравилось читать эту статью о раскрывающихся меню CSS, вам следует ознакомиться с этой статьей о формах HTML и CSS.

Мы также писали о нескольких связанных предметах, таких как меню HTML и CSS, вкладки HTML и CSS, примеры флажков CSS, конструкции полей поиска CSS, шаблоны форм входа в систему Bootstrap и эффекты наведения курсора CSS.

17 выпадающих меню CSS

Коллекция отобранных вручную бесплатных раскрывающихся меню HTML и CSS примеров кода.Обновление коллекции за октябрь 2018 г. 3 новинки.

  1. Меню CSS
  2. Выпадающие списки начальной загрузки
Автор
  • Зеландия
О коде

Расплавленное меню

Он сочетает в себе раскрывающееся меню CSS и просачивающиеся эффекты жидкого пламени.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Марко Бесаньи
О коде

Раскрывающееся меню HTML и CSS

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор
  • Халида Астатин
О коде

Меню градиента

Раскрывающееся меню адаптивного градиента.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
  • Мохамед Айман
О коде

Главное меню

Горизонтальное меню с выпадающими эффектами в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

О коде

Меню CSS

No JS — обязательно загляните в мобильное меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Винсент Дюран
О коде

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

HTML и CSS выпадающее меню с приятным эффектом.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Горизонтальное раскрывающееся меню

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

О коде

Раскрывающееся меню

Раскрывающееся меню «Классный HTML и CSS».

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
  • Хесус Родригес
О коде

Необычное меню

Необычное выпадающее меню в HTML и CSS. На основе https://dribbble.com/shots/1075480-Ui-Kit-Hotel

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
  • sean_codes
О коде

Рекурсивная навигация при наведении

Только CSS-рекурсивная навигация при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Руслан Пивоваров
О коде

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

Cool выпадающее меню чистых CSS-эффектов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Сатиш кумар
О коде

Раскрывающееся меню

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Роберт Боргези
О коде

Простое раскрывающееся меню на чистом CSS

Меню с выпадающим списком выполнено только в CSS, со строкой, следующей за наведением на строку.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Коннор Брассингтон
О коде

Простое раскрывающееся меню на чистом CSS

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

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

Анимированные выпадающие меню CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Каталин Рошу
О коде

Выпадающее меню зигзаг

Это еще одна концепция раскрывающегося меню .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Джон Урбанк
О коде

Адаптивное меню

Простое, только CSS, гибкое раскрывающееся меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Решено с помощью CSS! Выпадающие меню

CSS

становится все более мощным, и с такими функциями, как сетка CSS и настраиваемые свойства (также известные как переменные CSS), мы видим появление некоторых действительно креативных решений.Некоторые из этих решений направлены не только на то, чтобы сделать Интернет красивее, но и на то, чтобы сделать его более доступным, а также сделать стиль доступным. Я определенно здесь ради этого!

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

Поиск в Google по запросу «раскрывающееся меню» дает множество примеров.

Давайте посмотрим, сможем ли мы создать одно из этих меню только с помощью CSS.Мы создадим список ссылок внутри навигационного компонента, например:

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

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

  li {
 дисплей: блок;
 продолжительность перехода: 0,5 с;
}

li: hover {
  курсор: указатель;
}

ul li ul {
  видимость: скрыта;
  непрозрачность: 0;
  позиция: абсолютная;
  переход: легкость всего 0,5 с;
  верхняя маржа: 1 бэр;
  слева: 0;
  дисплей: нет;
}

ul li: hover> ul,
ul li ul: hover {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}

ul li ul li {
  ясно: оба;
  ширина: 100%;
}

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

Проблема

Это начинает выглядеть так, как мы хотим, но мы еще далеки от завершения. Доступность в Интернете — это основная часть разработки вашего продукта, и прямо сейчас это прекрасная возможность поднять этот вопрос. Добавление role = "navigation" — хорошее начало, но для того, чтобы панель навигации была доступна, нужно иметь возможность перемещаться по ней (и фокусироваться на нужном элементе в разумном порядке), а также иметь экран читатель точно прочитал вслух то, на чем сосредоточено внимание.

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

Теперь важно отметить, что теоретически вы сосредоточены на этом другом элементе и что программа чтения с экрана сможет его проанализировать, прочитав Sub-One , но пользователи клавиатуры не смогут увидеть, что происходит, и будут сбиться с пути.

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

К счастью, есть новый псевдокласс CSS, который даст нам именно то, что мы хотим в данном случае, и он называется : focus-within .

Решение:

: фокус в пределах

Псевдоселектор : focus-within является частью спецификации CSS Selectors Level 4 Spec и сообщает браузеру применить стиль к родительскому элементу, когда любой из его дочерних элементов находится в фокусе.В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль : focus-within вместе со стилем : hover родительского элемента и точно увидеть, где мы находимся в раскрывающемся меню навигации. В нашем случае это будет ul li: focus-within> ul :

  ul li: hover> ul,
ул ли: фокус внутри> ул,
ul li ul: hover {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}

Sweet! Оно работает!

Быстрый объезд! Если вы поддерживаете только современные браузеры, CSS, который мы видели до сих пор, подойдет.Но вы должны знать, что когда какой-либо браузер не понимает часть селектора, он выбрасывает весь селектор. Поэтому, если вы хотите поддерживать IE 11, вы не можете смешивать часть : focus-within .

  / * Этот составной селектор по-прежнему будет работать в IE 11, потому что: focus-within не смешивается с * /
ul li: hover> ul,
ул ли ул: наведите указатель мыши,
ul li ul: focus {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}

/ * IE 11 не получит этого, но, по крайней мере, меню верхнего уровня будут работать * /
ul li: focus-within> ul {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}

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

В большинстве случаев, например, для прямых ссылок, мы обычно можем просто написать что-то вроде:

  a: парение,
фокус {
  ...
}

Но в этом случае, поскольку мы применяем стили наведения на основе родительского li , мы снова можем использовать : focus-within , чтобы получить то же ощущение при переходе по табуляции. Это потому, что мы не можем на самом деле сфокусировать на li (если мы не добавим tabindex = "0" ). На самом деле мы фокусируемся на ссылке ( a ) внутри нее.: focus-within позволяет нам по-прежнему применять стили к родительскому li при фокусировке на ссылке (чертовски круто!):

  ли: парение,
li: focus-within {
  ...
}

На этом этапе, поскольку мы применяем стиль фокусировки, мы можем сделать что-то, что обычно не рекомендуется (удалить стиль этого синего контура кольца фокусировки). Мы можем сделать это по:

  li: focus-within a {
  наброски: нет;
}

Приведенный выше код указывает, что когда мы фокусируемся на элементах списка через ссылку ( a ), не применяем схему к элементу ссылки ( a ).Это довольно безопасно писать таким образом, потому что мы задаем стили исключительно для состояния наведения, а в браузерах, которые не поддерживают : focus-within , ссылка все равно будет иметь кольцо фокусировки. Теперь наше меню выглядит так:

Окончательное меню с использованием состояний : focus-within , : hover и настройка исчезновения кольца фокусировки

А как насчет ARIA?

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

Вы добавляете aria-haspopup = "true" к родительскому элементу раскрывающегося меню, чтобы указать альтернативное состояние, и включаете aria-label = "submenu" в само раскрывающееся меню (в данном случае наш список с class = "dropdown" .

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

Предупреждение о поддержке браузера

Говоря о предостережениях, давайте поговорим о поддержке браузером. Хотя : focus-within действительно имеет довольно хорошую поддержку браузера , важно отметить, что Internet Explorer и Edge не поддерживаются, поэтому ваши пользователи на этих платформах не смогут видеть навигацию.

Desktop
Chrome Firefox IE Edge Safari
60 52 Нет 798 10,1

Android Chrome Android Firefox Android iOS Safari
91 89 91 10.3

Окончательным решением здесь было бы использование как разметки ARIA, так и CSS : focus-within , чтобы обеспечить надежное раскрывающееся меню для ваших пользователей.

Если вы хотите иметь возможность использовать эту функцию в будущем, проголосуйте за нее на Edge User Voice! И проголосуйте за : кольцо фокусировки , пока вы на нем, так что мы сможем стилизовать это кольцо фокусировки и создать красивый интерактивный веб-интерфейс для всех 😀

Подробнее о

: фокус в пределах и A11Y

Как оформить раскрывающийся список с помощью CSS?

< html >

< головка >

9065 9065

9065 9065 h2 {

цвет: зеленый;

}

выберите {

-внешний вид веб-набора: нет;

-моз-внешний вид: нет;

-ms-внешний вид: нет;

внешний вид: отсутствует;

контур: 0;

фон: зеленый;

фоновое изображение: нет;

граница: сплошной черный 1 пиксель;

}

.выберите {

положение: относительное;

дисплей: блочный;

ширина: 20em;

высота: 3em;

line-height: 3;

фон: # 2C3E50;

переполнение: скрыто;

радиус границы:.25em;

}

выбрать {

ширина: 100%;

высота: 100%;

маржа: 0;

заполнение: 0 0 0 .5em;

цвет: #fff;

курсор: указатель;

}

select :: - ms-expand {

дисплей: нет;

}

.select :: after {

content: '\ 25BC';

Положение: абсолютное;

верх: 0;

правый: 0;

внизу: 0;

заполнение: 0 1em;

фон: # 34495E;

события указателя: нет;

}

.выберите: hover :: после {

цвет: # F39C12;

}

.select :: после {

-webkit-transition: .25s

-o-переход: .25s all easy;

переход:.25 с легкостью;

}

стиль >

головка >

685

корпус

< центр >

< h2 > GeeksforGeeks h2 >

>

906 «выберите» >

< выберите имя = «slct» id = «slct» 5 5 5 option > Предметы информатики option >

< опция значение = "1" > Операционная система опция >

значение = "2" > Компьютерные сети опция >

< опция значение = "3" > Структура данных опция >

< опция значение = "4" > Алгоритм опция >

значение = "5" > Программирование на C опция > 9 0005

< опция значение = «6» > JAVA опция >

00

div >

центр >

корпус 3> 3

Как создать раскрывающееся меню в CSS

Что такое выпадающие списки?

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

Примеры:

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

  .dropdown {
  положение: относительное;
  дисплей: встроенный блок;
}

.dropbtn {
  цвет фона: красный;
  отступ: 10 пикселей;
}

.dropdown-content {
  дисплей: нет;
  позиция: абсолютная;
}

.dropdown: hover .dropdown-content {
  дисплей: блок;
}

Вам нужны отдельные классы div для создания кнопки и еще один div для разделения списка того, что содержит кнопка.

Пример 

    
  # myNav1 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    верх: 0;
    слева: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0.3 с;
    непрозрачность: 0,85;
}

# myNav2 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    внизу: 0;
    справа: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0,3 с;
    непрозрачность: 0,85;
}

.overlay-content {
    положение: относительное;
    ширина: 100%;
    выравнивание текста: центр;
    маржа сверху: 30 пикселей;
}

# myNav1-content {
    верх: 12%;
    осталось: 5%;
    дисплей: нет;
}

# myNav2-content {
    верх: 12%;
    справа: 10%;
    дисплей: нет;
}

Дополнительная информация о раскрывающихся списках CSS:

Как создать раскрывающееся меню в HTML и CSS

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

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

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

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

По сути, для его создания я использовал два типа программного кода. Один из них - это HTML, который помог построить структуру этой строки меню. Другой - это программный код CSS, который помог его разработать. Щелкните здесь, чтобы загрузить исходный код.

HTML-код:

Войти в полноэкранный режимВыйти из полноэкранного режима

Код CSS:

  html {
    background-image: url (image.jpg);
    размер фона: обложка;
    фон-повтор: без повторения;
    высота: 700 пикселей;
    background-position: center;
}
тело{
    размер шрифта: 22 пикселя;
    высота строки: 32 пикселя;
    цвет: #ffffff;
    семейство шрифтов: «Open Sans», без засечек;
}
nav {
    цвет фона: # 1289dd;
}
nav ul {
    отступ: 0;
    маржа: 0;
    стиль списка: нет;
    положение: относительное;
}
nav ul li {
    дисплей: встроенный блок;
    цвет фона: # 1289dd;
}
nav a {
    дисплей: блок;
    отступ: 0 10 пикселей;
    цвет: #fff;
    высота строки: 60 пикселей;
    размер шрифта: 20 пикселей;
    текстовое оформление: нет;
}
/ * Скрыть раскрывающийся список по умолчанию * /
nav ul ul {
    дисплей: нет;
    позиция: абсолютная;
    верх: 60 пикселей;
}
/ * наведение * /
nav a: hover {
    цвет фона: # 000000;
}
/ * Отображение раскрывающегося списка при наведении * /
nav ul li: hover> ul {
    дисплей: наследовать;
}
/ * Раскрывающийся список Fisrt Tier * /
nav ul ul li {
    ширина: 170 пикселей;
    float: нет;
    отображение: элемент списка;
    положение: относительное;

}

/ * ============ Второй, третий и другие уровни =========== * /
nav ul ul ul li {
    положение: относительное;
    верх: -60 пикселей;
    слева: 170 пикселей;
}

/ * Измените это, чтобы изменить символ раскрывающегося списка * /
li> a :: after {content: '+';}
li> a: only-child :: after {
    содержание: '';
}

Войти в полноэкранный режимВыйти из полноэкранного режима

Вы также можете скачать файлы с исходным кодом по данной ссылке.Щелкните здесь, чтобы загрузить исходный код.

Раскрывающийся список - Материализация

выравнивание Строка 'левый' Определяет край, по которому выравнивается меню.
автозапуск логическое значение правда Если true, автоматически фокусируется раскрывающийся список клавиатуры.
constrainWidth логическое значение правда Если true, ограничить ширину размером активатора раскрывающегося списка.
контейнер Элемент null Предоставьте элемент, который будет ограничивающим контейнером раскрывающегося списка.
крышка Спусковой крючок логическое значение правда Если false, раскрывающийся список будет отображаться под триггером.
закрытьOnClick логическое значение правда Если true, закрывать раскрывающийся список при щелчке по элементу.
наведение логическое значение ложь Если true, раскрывающийся список открывается при наведении курсора.
дюймов Продолжительность Число 150 Продолжительность перехода ввода в миллисекундах.
выход Продолжительность Число 250 Продолжительность перехода в миллисекундах.
onOpenStart Функция null Функция вызывается при начале ввода раскрывающегося списка.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *