Css выпадающий список: Горизонтальное выпадающее меню

Добавлено 05.03.197022.06.2021 автор alexxlab

Содержание

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.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>

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

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

color:green;

}

select {

-webkit-appearance: none;

-moz-appearance: none;

-ms-appearance: none;

appearance: none;

outline: 0;

background: green;

background-image: none;

border:1px solid black;

}

. select {

position: relative;

display: block;

width: 20em;

height: 3em;

line-height: 3;

background: #2C3E50;

overflow: hidden;

border-radius: .25em;

}

select {

width: 100%;

height: 100%;

margin: 0;

padding: 0 0 0 .5em;

color: #fff;

cursor: pointer;

}

select::-ms-expand {

display: none;

}

. select::after {

content: '\25BC';

position: absolute;

top: 0;

right: 0;

bottom: 0;

padding: 0 1em;

background: #34495E;

pointer-events: none;

}

.select:hover::after {

color: #F39C12;

}

.select::after {

-webkit-transition: .25s all ease;

-o-transition: . 25s all ease;

transition: .25s all ease;

}

</style>

</head>

<body>

<center>

<h2>GeeksforGeeks</h2>

<div class="select">

<select name="slct" id="slct">

<option>Computer Science Subjects</option>

<option value="1">Operating System</option>

<option value="2">Computer Networks</option>

<option value="3">Data Structure</option>

<option value="4">Algorithm</option>

<option value="5">C programming</option>

<option value="6">JAVA</option>

</select>

</div>

</center>

</body>

</html>

Как Создать Выпадающее Меню CSS

Введение

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

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Что вам понадобится

Перед тем, как мы начнем это руководство, вам понадобится следующее:

Доступ к контрольной панели вашего хостинга

Шаг 1 — Создание HTML-файла

Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html. Для этого мы будем использовать Файловый менеджер. Однако тот же результат может быть достигнут с использованием FTP-клиента (создайте файл menu. html на вашем компьютере и загрузите его на ваш хостинг).

Шаг 2 — Добавление кода HTML меню

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

dropdown, mainmenubtn и dropdown-child. Классы необходимы для применения правил CSS.

<div>
  <button>Главное меню</button>
  <div>
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>

Вот, как это выглядит без применения каких-либо CSS-правил:

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

Шаг 3 — Как создать выпадающее меню CSS

Мы стилизуем наш HTML код используя следующие CSS правила:

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}

.mainmenubtn:hover {
    background-color: red;
    }
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.

Ниже представлен финальный результат нашего файла menu.html:

<html>
<head>
<style>
.mainmenubtn {
    background-color:  red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Главное меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www.  вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>
</body>
</html>

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

Как только вы закончите, финальный результат должен быть похож на это:

Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.

Заключение

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

Как создать в HTML выпадающий список?

Приветствую вас, друзья и коллеги!

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

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

Навигация по статье:

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

Для создания в html выпадающего списка существует тег <select>, который совместно с тегом <option>, позволяет создавать элементы интерфейса, содержащие перечень параметров в виде выпадающего списка с возможностью единичного или множественного выбора.

Перечень атрибутов для тега <select>:

autofocus – установка фокуса на элементе при загрузки страницы
disabled – отключение элемента
multiple – множественный выбор элементов раскрывающегося списка html
required – делает обязательным для заполнения
size – определяет высоту в закрытом состоянии. Задается числовым значением.

form – подключение к форме обратной связи
name – имя, для получения выбранного значения и передачи его в скрипт для обработки

Для последних трёх значение указывается в кавычках, все остальные просто дописываются к тегу <select>

Атрибуты для тега <option>:

disabled – позволят заблокировать пункт для выбора
label — дает возможность задать метку для элемента
selected – устанавливает пункт выбранным по умолчанию
value – позволяет задать значение для пункта, которое будет передано в форму для отправки или в скрипта для обработки.

Ниже я приведу несколько примеров использования атрибутов для тегов <select> и <option>

Пример самого простого раскрывающегося списка html:

Код:

<select> <option>Опция 1</option> <option>Опция 2</option> </select>

<option>Опция 1</option>

<option>Опция 2</option>

</select>

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

size. В случае, если он не задан, то в раскрывающемся списке html отображается по умолчанию 1 элемент.

Ширина элемента по умолчанию определяется исходя из ширины самой длинной записи. Так же ее можно изменять CSS-стилями.

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

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

<select multiple> <option>Москва </option> <option>Санкт-Петербург</option> </select>

<option>Москва </option>

<option>Санкт-Петербург</option>

</select>

Выбор нескольких позиций осуществляется при помощи зажатой клавиши CTRL + клик указателем мышки по нужному элементу.

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

Как задать выбранный пункт по умолчанию

В случае если вам нужно задать в html выпадающем списке опцию, которая будет отображаться по умолчанию, используем атрибут selected. Например:

<select name=»country»> <option disabled>Выберите страну</option> <option selected>Россия</option> <option >Белоруссия</option> </select>

<option disabled>Выберите страну</option>

<option selected>Россия</option>

<option >Белоруссия</option>

</select>

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

Как подключить раскрывающийся список html к форме

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

Атрибут name позволяет задать имя для <select>. Далее, заданное имя можно использовать в качестве переменной в скриптах.

Например:

<select name=»count» > <option value=» Москва «>Москва</option> <option value=» Казахстан «>Казахстан</option> <option value=» Белоруссия «>Белоруссия</option> </select>

<option value=» Москва «>Москва</option>

<option value=» Казахстан «>Казахстан</option>

<option value=» Белоруссия «>Белоруссия</option>

</select>

Далее, вы можете использовать полученные данные в php-функции. Например, вот так:

function dataSelect(a) { n = a.count.selectedIndex if(n) alert(«Страна: » + f.count.options[n].value) }

function dataSelect(a) {

n = a.count.selectedIndex

if(n) alert(«Страна: » + f.count.options[n].value)

}

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

Например:

</select>

Где «cont-form» — это ID формы.

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

Успехов вам в создании выпадающих списков!
До встречи в следующих статьях!

С уважением Юлия Гусарь

Как сделать плавное выпадающее меню на CSS • ЭРА ТЕХНОЛОГИЙ

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

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

Верстаем меню HTML + CSS

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

Что мы имеем? Самый обыкновенные ненумерованный список с идентификатором «top_menu» и со ссылками, обернутыми в элементы этого самого списка. Все банально и просто. При наведении пункты меню меняют цвет… это все вы уже знаете и понимаете, как это сделать (я надеюсь).

Добавляем меню второго уровня

Чтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «li», сразу после закрывающего тега «a».

Позиционируем вложенные списки абсолютно по отношению к «li», в которые они вложены. А все «li» верхнего уровня позиционируем относительно (relative). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu”) нужно задать

position: absolute;
top: 100%;

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

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

Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.

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

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

Выпадающему меню добавляем:

display: none;

А чтобы его отобразить, нужно прописать:

#top_menu > li:hover > ul {
   display: block;
}

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

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

Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.

Ну что же, давайте еще немного поколдуем над ним.

Плавное выпадающее меню – это просто

Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!

Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block;).

Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.

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

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

Что нам понадобилось для анимации? Два состояния пунктов нашего меню, а также свойство transition, которое проинтерполировало эти состояния, то есть заполнило все промежуточные значения за отведенный промежуток времени. Вот и все!

Еще проще можно было бы сделать с применением jQuery, но мы же оговорили сначала, что будем сегодня работать с чистым CSS. А еще красивее можно было сделать, добавив к анимациям кривые Безье, однако эта тема немного выходит за рамки сегодняшней. Но мы к ней обязательно вернемся позже.

Вывод:

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

Кстати это был мой первый урок по CSS. Опишите, как вам? Понятно все объяснил или нужно еще подробнее разжевывать? И стоит ли вообще продолжать писать статьи на тему лайфхаков в CSS?

Спасибо за внимание и до скорых встреч!

Выпадающий список в HTML — Тег в HTML и теги и .

В прошлый раз мы очень подробно обсудили атрибуты тега <input> и особенно подробно атрибут type и его возможности.

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

Тег <select> в HTML.

Основной тег, который необходим для создания выпадающего списка это тег <select>. Именно с него мы и начнем.

Это парный тег после добавления, которого в HTML документ появится раскрывающийся список. Но при использовании только тега <select> самих пунктов для выбора не появится. А если нет пунктов, значит и нечего выбрать. Чтобы добавить пункты списка необходимо использовать тег <option>, о котором мы поговорим чуть ниже.

Для начала рассмотрим синтаксис тега <select>. Добавляется он внутрь элемента <form>, это следует учитывать.

Таким образом, может выглядеть самый простой вариант HTML-кода для вывода HTML-тега <select>.

Тег <option> в HTML.

Как я упоминал чуть выше, этот тег существует для добавления пунктов списка в выпадающий список, выводимый с помощью тега <select>. Этот тег чем-то по предназначению напоминает тег <li> для создания элементов HTML-списка.

Синтаксис тега <option> в HTML не представляет ничего особенного и в самом простом варианте его можно использовать так:

Пункт списка

То есть из сказанного выше становится понятно, что мы должны использовать два HTML-тега для создания выпадающего списка это тег <select> и тег <option>.

Тег <optgroup> в HTML.

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

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

Синтаксис также прост, но стоит учитывать, что внутри тега <optgroup> должен присутствовать тег <option>.

Второй пунктТретий пункт

Если же говорить о полном коде выпадающего списка, то он может выглядеть примерно так:

Первый пунктВторой пунктТретий пункт

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

Видео урок: Выпадающий список в HTML — Тег <select> в HTML и теги <option> и <optgroup>.

HTML-справочник и другие материалы можно и нужно скачать здесь!

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

CSS: Выпадающее меню с задержкой

Обычное выпадающие css-меню сделанное с помощью переключения display:none;/display:block; повешенного на hover обладает двумя раздражающими недостатками:

— подменю показывается мгновенно, как только курсор мыши попал в область родительского пункта
— подменю мгновенно пропадает, как только курсор вышел за пределы подменю

Пример такого меню:

<ul>
    <li>
        <a href="#">item</a>
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
        </ul>
   </li>
</ul>

<style>
. menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-item {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    background: #E1E1E1;
}
.menu .menu-item a {
    display: block;
    padding: 5px 10px;
}
.menu .submenu {
    display: none; /* По умолчанию скрываем подменю */
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #E1E1E1;
}
.menu .menu-item:hover .submenu {
    display: block; /* Показываем подменю при ховере */
}
.menu .submenu-item {
    margin: 0;
    padding: 5px 10px;
}
</style>

Демо

Чтобы создать небольшую задержку перед показом и скрытием подменю раньше приходилось использовать javascript, но теперь наткнулся на css вариант.

Весь фокус в свойстве transition, а точнее его подсвойстве transition-delay, которое позволяет добавить задержку перед показом анимации:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property: opacity, visibility; /* Важно чтобы transition применялось к обоим свойствам */
    transition-duration: 0. 2s; /* Добавляем анимацию 0.3 сек. */
    transition-delay: 0.15s; /* Добавляем задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Демо

Поскольку анимацию нельзя вешать на display, то для скрытия подменю приходится использовать связку opacity:0; visibility:hidden;.

Решено с помощью 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 не поддерживаются, поэтому ваши пользователи на этих платформах не смогут видеть навигацию.

Настольный компьютер

Chrome	Firefox	IE	Edge	Safari
60	52	Нет	79	10 Мобильный планшет
Android Chrome	Android Firefox	Android	iOS Safari
91	89	91	10.3

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

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

Подробнее о

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

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

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

Меню CSS
Выпадающее меню начальной загрузки

Автор

Зеландия
11 декабря 2018

О коде

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

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

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

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

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

Автор

Марко Бесаньи
29 июня 2018

О коде

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

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

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

Автор

Халида Астатин
29 июня 2018 г.

О коде

Градиентное меню

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

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

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

Автор

Мохамед Айман
28 июня 2018

О коде

Главное меню

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

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

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

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

О коде

Меню CSS

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

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

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

Автор

Винсент Дюран
28 июня 2018

О коде

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

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

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

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

О коде

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

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

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

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

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

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

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

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

Автор

Каталин Рошу
2 сентября 2013 г.

О коде

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

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

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

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

Автор

Джон Урбанк
5 сентября 2012 г.

О коде

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

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

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

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

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

< html >

< Головка >

<

0 стиль

 9 9002 9 9000 9000 900  h2 {
    цвет: зеленый; 
   } 
    select {
    -webkit-appearance: none; 
    -моз-внешний вид: нет; 
    -ms-внешний вид: нет; 
    внешний вид: отсутствует; 
    контур: 0; 
    фон: зеленый; 
    фоновое изображение: нет; 
    граница: сплошной черный 1 пиксель; 
   } 
   .выберите {
    положение: относительное; 
    дисплей: блок; 
    ширина: 20em; 
    высота: 3em; 
    высота строки: 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 :: after {
    -webkit-transition: .25s all easy; 
    -o-переход: .25s all easy; 
    переход:.25 с легкостью; 
   } 
      стиль  > 
      головка  > 
    <  корпус  >  9000
    <  центр  > 
    <  h2  > GeeksforGeeks   h2  > 
    <  div   класс   =   div   класс    «выберите»  > 
    <  выберите   имя   =   «slct»   id   =   «slct»  > 
    <  option  > Предметы информатики   option  > 
    <  опция   значение   =   "1"  > Операционная система   опция  > 
    <  опция   значение   =   "2"  > Компьютерные сети   option  > 
    <  option   value   =   "3"  > Структура данных   опция  > 
    <  опция   значение   =   "4"  > Алгоритм   опция  > 
    <  опция   значение   =   "5"  > Программирование на C   опция  >  9 0003
    <  опция   значение   =   "6"  > JAVA   опция  > 
      выберите  > 
      div  > 
      центр  > 
      корпус  > 
    html  > 
 Как создать раскрывающееся меню в CSS 
 Что такое выпадающие списки?  Выпадающие меню используются в CSS для скрытия предопределенного списка внутри кнопки.
 Примеры:
  
  
  
     Один 
     Два 
     Три 
  
  
 Затем вы должны настроить классы в CSS следующим образом:
  .dropdown {
  положение: относительное;
  дисплей: встроенный блок;
}

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

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

.dropdown: hover .dropdown-content {
  дисплей: блок;
}  
 Вам нужны отдельные классы div для создания кнопки и еще один div для разделения списка того, что содержит кнопка.
 Пример 
  
  
        
  
            
  
                
                     Содержание 1 
                
                
                     Контент 2 
                
  
            
  
         
  
         
  
              и время 
            
  
                
                     Содержание 3 
                
                
                    Содержание 4 
                
                
                   Содержание 5 
                
  
            
  
         
  
 
  
  # 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: 
 Выпадающие списки · Bootstrap 
 Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.
 Обзор 
 Выпадающие списки - это переключаемые контекстные наложения для отображения списков ссылок и многого другого. Они сделаны интерактивными с помощью включенного плагина JavaScript для выпадающего меню Bootstrap. Они переключаются нажатием, а не наведением курсора; это намеренное дизайнерское решение.
 Выпадающие списки созданы на основе сторонней библиотеки Popper.js, которая обеспечивает динамическое позиционирование и обнаружение области просмотра. Не забудьте включить popper.min.js перед загрузкой JavaScript в Bootstrap или используйте загрузочную программу .bundle.min.js / bootstrap.bundle.js , который содержит Popper.js. Popper.js не используется для размещения раскрывающихся списков на панели навигации, хотя динамическое позиционирование не требуется.
 Если вы создаете наш JavaScript из исходного кода, для него требуется  util.js .
 Доступность 
 Стандарт  WAI   ARIA  определяет фактический виджет  role = "menu" , но это характерно для меню, подобного приложениям, которое запускает действия или функции. Меню ARIA  могут содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.
 С другой стороны, выпадающие списки Bootstrap разработаны так, чтобы быть общими и применимыми к различным ситуациям и структурам разметки. Например, можно создавать раскрывающиеся списки, содержащие дополнительные входные данные и элементы управления формами, такие как поля поиска или формы входа в систему. По этой причине Bootstrap не ожидает (и не добавляет автоматически) ни один из атрибутов  role  и  aria- , необходимых для истинных меню  ARIA .Авторы должны сами включить эти более конкретные атрибуты.
 Однако Bootstrap добавляет встроенную поддержку для большинства стандартных взаимодействий с меню клавиатуры, таких как возможность перемещаться по отдельным элементам  .dropdown-item  с помощью клавиш курсора и закрывать меню с помощью клавиши  ESC .
 Примеры 
 Оберните переключатель раскрывающегося списка (ваша кнопка или ссылка) и раскрывающееся меню в  .dropdown  или другой элемент, который объявляет  position: relative; .Выпадающие списки можно запускать из элементов    или  
  

     Действие 
     Другое действие 
     Здесь что-то еще

   И с элементами   :
  
  
    Выпадающая ссылка
  

  
     Действие 
     Другое действие 
     Здесь что-то еще 
  
  
 Самое приятное то, что вы можете сделать это и с любым вариантом кнопок:
  

  
  
     Действие 
     Другое действие 
     Здесь что-то еще 
     
     Отдельная ссылка 
  
  
 Раскрывающиеся списки кнопок 
 Аналогичным образом создайте раскрывающиеся списки с разделенными кнопками с практически такой же разметкой, что и раскрывающиеся списки с одной кнопкой, но с добавлением .dropdown-toggle-split  для правильного интервала вокруг выпадающего курсора.
 Мы используем этот дополнительный класс, чтобы уменьшить горизонтальное заполнение   по обе стороны от каретки на 25% и удалить  margin-left , добавляемое для обычных раскрывающихся списков кнопок. Эти дополнительные изменения удерживают курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой. Вторичный 
 Переключить раскрывающийся список  

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

  
  
    ...
  


  
  
  
    ...
  




  
  
    ...
  


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

  
  
    
  




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

  
  
    
  




  
  
  
    
  
  
 Вариация капли 
 Запуск раскрывающихся меню слева от элементов путем добавления .dropleft  родительскому элементу.
  

  
  
    
  




  
    
    
      
    
  
  
  
 Раньше содержимое выпадающего меню  содержало ссылки , но в версии 4 это уже не так.Теперь вы можете дополнительно использовать элементы

   По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя.Добавьте  .dropdown-menu-right  к  .dropdown-menu , чтобы выровнять раскрывающееся меню по правому краю.
  Внимание!  Выпадающие списки размещаются благодаря Popper.js (кроме случаев, когда они содержатся в панели навигации).
  
  
  
    
    
    
  
  
 Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.  
    Раскрывающийся заголовок  
   Действие 
   Другое действие 
  
 Отдельные группы связанных пунктов меню с разделителем.
  
   Действие 
   Другое действие 
   Здесь что-то еще 
   
   Отдельная ссылка 
  
 Поместите форму в раскрывающееся меню или превратите ее в раскрывающееся меню и используйте утилиты полей или заполнения, чтобы дать ей необходимое отрицательное пространство.
  
  <форма>
    
       Адрес электронной почты 
      
    
    
       Пароль 
      
    
    
      
      
        Запомни меня
      
    
    
  
   
   Впервые здесь? Зарегистрироваться 
   Забыли пароль? 
  
  <форма>
  
     Адрес электронной почты 
    
  
  
     Пароль 
    
  
  
    
    
      Запомни меня
    
  
  
  
 Добавьте  .active  к элементам в раскрывающемся списке, чтобы  сделать их активными .
  
   Обычная ссылка 
   Активная ссылка 
   Другая ссылка 
  
 Добавьте  .disabled  к элементам в раскрывающемся списке, чтобы  пометили их как отключенные .
  
   Обычная ссылка 
   Отключенная ссылка 
   Другая ссылка 
  
 Использование 
 С помощью атрибутов данных или JavaScript плагин раскрывающегося списка переключает скрытый контент (раскрывающиеся меню) путем переключения .показать класс  в родительском элементе списка. Атрибут  data-toggle = "dropdown"  используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.
 На устройствах с сенсорным экраном открытие раскрывающегося списка добавляет пустые ( $ .noop ) обработчики  mouseover  к непосредственным дочерним элементам элемента  . Этот, по общему признанию, уродливый хакер необходим для обхода причуды в делегировании событий iOS, которая в противном случае помешала бы нажатию в любом месте за пределами раскрывающегося списка запускать код, закрывающий раскрывающийся список.После закрытия раскрывающегося списка эти дополнительные пустые обработчики  mouseover  удаляются.
 Через атрибуты данных 
 Добавьте  data-toggle = "dropdown"  к ссылке или кнопке, чтобы переключить раскрывающийся список.
  
  
  
    ...
  
  
 Через JavaScript 
 Вызов раскрывающихся списков с помощью JavaScript:
  $ ('.dropdown-toggle '). dropdown ()  
 data-toggle = "dropdown"  все еще требуется Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api,  data-toggle = "dropdown"  всегда должен присутствовать в элементе триггера раскрывающегося списка.
 Опции 
 Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к  data- , как в  data-offset = "" .
 Номер Имя  Тип  По умолчанию  Описание
 смещение  | строка | функция  0  Смещение раскрывающегося списка относительно цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
 флип  логический  правда  Разрешить разворачивание раскрывающегося списка в случае перекрытия ссылочного элемента.Для получения дополнительной информации обратитесь к документации Popper.js.
 граница  строка | элемент  'scrollParent'  Граница ограничения переполнения раскрывающегося меню. Принимает значения  'viewport' ,  'window' ,  'scrollParent'  или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации Popper.js preventOverflow.
 Обратите внимание, когда для границы   установлено любое значение, отличное от  'scrollParent' , к  применяется стиль  position: static .выпадающий контейнер .
 Методы 
 Метод  Описание
  $ (). Раскрывающийся список ('переключение')  Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
  $ (). Раскрывающийся список («обновление»)  Обновляет положение раскрывающегося списка элемента.
  $ (). Раскрывающийся список ('удалить')  Уничтожает раскрывающийся список элемента.
 События 
 Все события dropdown запускаются в родительском элементе  .dropdown-menu  и имеют свойство  relatedTarget , значение которого является переключаемым элементом привязки.
 Показано Событие  Описание
  показать.bs.dropdown  Это событие запускается немедленно при вызове метода экземпляра шоу.
 .бс. выпадающий  Это событие вызывается, когда раскрывающийся список становится видимым для пользователя (ожидает завершения переходов CSS).
  hide.bs.dropdown  Это событие запускается сразу после вызова метода экземпляра hide.
  hidden.bs.dropdown  Это событие вызывается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
  $ ('# myDropdown'). On ('show.bs.dropdown', function () {
  // сделай что-нибудь…
})  
 Раскрывающийся список - Материализовать 
 выравнивание  Строка  'левый'  Определяет край, по которому выравнивается меню.
 автозапуск  логический  правда  Если true, автоматически фокусируется раскрывающийся список для клавиатуры.
 constrainWidth  логический  правда  Если истина, ограничить ширину до размера активатора раскрывающегося списка.
 контейнер  Элемент  null  Предоставьте элемент, который будет ограничивающим контейнером раскрывающегося списка.
 крышка триггера  логический  правда  Если false, раскрывающийся список будет отображаться под триггером.
 закрытьOnClick  логический  правда  Если верно, закрывать раскрывающийся список при щелчке по элементу.
 парение  логический  ложь  Если true, раскрывающийся список открывается при наведении курсора.
 дюймов Продолжительность  Число  150  Продолжительность перехода ввода в миллисекундах.
 вых Продолжительность  Число  250  Продолжительность перехода в миллисекундах.
 onOpenStart  Функция  null  Функция вызывается при начале ввода раскрывающегося списка.
 onOpenEnd  Функция  null  Функция вызывается при завершении ввода раскрывающегося списка.
 onCloseStart  Функция  null  Функция вызывается при выходе из раскрывающегося списка.
 onCloseEnd  Функция  null  Функция вызывается при выходе из раскрывающегося списка.
 html - раскрывающееся меню, которое открывается вверх / вверх с чистым css 
 html - раскрывающееся меню, которое открывается вверх / вверх с чистым css - qaru  Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
 Спросил  9 лет, 8 мес назад 
 Просмотрено
 127k раз
 Я создал раскрывающееся меню с чистым CSS и поместил его в место, которое мне нравится, за исключением того, что я хочу, чтобы оно было «раскрывающимся», а не «раскрывающимся», поскольку строка меню находится внизу расположение.Что мне нужно добавить или изменить, чтобы он «выпал»?
  #menu * {
  отступ: 0;
  маржа: 0;
  шрифт: 12px грузия;
  тип-стиль-список: нет;
}
#menu {
  маржа сверху: 100 пикселей;
  плыть налево;
  высота строки: 10 пикселей;
  слева: 200 пикселей;
}
#menu a {
  дисплей: блок;
  текстовое оформление: нет;
  цвет: # 3B5330;
}
#menu a: hover {background: # B0BD97;}
#menu ul li ul li a: hover {
  фон: # ECF1E7;
  отступ слева: 9 пикселей;
  граница слева: сплошной 1px # 000;
}
#menu ul li ul li {
  ширина: 140 пикселей;
  граница: нет;
  цвет: # B0BD97;
  padding-top: 3 пикселя;
  padding-bottom: 3px;
  отступ слева: 3 пикселя;
  отступ справа: 3 пикселя;
  фон: # B0BD97;
}
#menu ul li ul li a {
  шрифт: 11px arial;
  шрифт: нормальный;
  вариант шрифта: капители;
  padding-top: 3 пикселя;
  padding-bottom: 3px;
}
#menu ul li {
  плыть налево;
  ширина: 146 пикселей;
  font-weight: жирный;
  граница-верх: сплошной 1px # 283923;
  нижняя граница: сплошной 1px # 283923;
  фон: # 979E71;
}
#menu ul li a {
  font-weight: жирный;
  отступ: 15 пикселей 10 пикселей;
}
#menu li {
  положение: относительное;
  плыть налево;
}
#menu ul li ul, #menu: hover ul li ul, #menu: hover ul li: hover ul li ul {
  дисплей: нет;
  тип-стиль-список: нет;
  ширина: 140 пикселей;
}
#menu: hover ul, #menu: hover ul li: hover ul, #menu: hover ul li: hover ul li: hover ul {
  дисплей: блок;
}
#menu: hover ul li: hover ul li: hover ul {
  позиция: абсолютная;
  маржа слева: 145 пикселей;
  маржа сверху: -22px;
  шрифт: 10 пикселей;
}
#menu: hover ul li: hover ul {
  позиция: абсолютная;
  маржа сверху: 1px;
  шрифт: 10 пикселей;
}  
  
  
       На главную  
      
          О нас  
          Заявление об ограничении ответственности  
      
    
    
        Области практики  
      
          Гражданское право  
          Уголовное право & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          
              Joomla  
              Drupal  
              WordPress  
          
        
  Семейное право & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          
              Joomla  
              Drupal  
              WordPress  
          
        
  Личные травмы & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          
              Joomla  
              Drupal  
              WordPress  
          
        
  Нарушения правил дорожного движения & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          
              Joomla  
              Drupal  
              WordPress  
          
        
  Часто задаваемые вопросы  
      
    

       поверенный  
      
          X  
          X  
          X  
          X  
      
    

       Свяжитесь с нами  
      
          Местоположения & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          
              Офис Rockville  
              Офис Фредерика  
              Офис Greenbelt  
          
        
  Телефонный справочник  
          Почтовый адрес  
      

    

       Ресурсы  
      
          Полезные ссылки  
          Аффилированные лица & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          
              Поставщики медицинских услуг  
              Страховые компании  
          
        
 
    
   Новости и amp; События  
      
          Статьи для прессы  
          Информационный бюллетень  
          События  
          Блог  
      
    
   испанский  
      
          X  
      

  
  
Мохаммад Усман 31.1k1616 золотых знаков8181 серебряный знак7979 бронзовых знаков
 Создан 18 окт.
 серый костюм 41311 золотой знак44 серебряных знака77 бронзовых знаков
 2 Добавить  bottom: 100%  к вашему  #menu: hover ul li: hover ul  rule
 Демо 1 
  #menu: hover ul li: hover ul {
    позиция: абсолютная;
    маржа сверху: 1px;
    шрифт: 10 пикселей;
    внизу: 100%; / * добавлен этот атрибут * /
}
  
 Или еще лучше, чтобы подменю не имели такого же эффекта, просто добавьте это правило
 Демо 2 
  #menu> ul> li: hover> ul {
    внизу: 100%;
}
  
 Демо 3 
 источник: http: // jsfiddle.net / W5FWW / 4/
 И чтобы вернуть границу, вы можете добавить следующий атрибут
  #menu> ul> li: hover> ul {
    внизу: 100%;
    border-bottom: 1px сплошной прозрачный
}
  
 Создан 18 окт.
 Джозеф Марикл Джозеф Марикл 68.10k1414 золотых знаков103103 серебряных знака120120 бронзовых знаков
 8 Если мы используем выбранный раскрывающийся список, то мы можем использовать нижеприведенный css (JS / JQuery не требуется)
  
<стиль>
.selected-container .chosen-drop {
    нижняя граница: 0;
    верхняя граница: сплошной 1px #aaa;
    верх: авто;
    внизу: 40 пикселей;
}

.chosen-container.chosen-with-drop .chosen-single {
    граница-верх-левый-радиус: 0 пикселей;
    граница-верх-правый-радиус: 0 пикселей;

    граница-нижний-левый-радиус: 5 пикселей;
    граница-нижний-правый-радиус: 5 пикселей;

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

.chosen-container.chosen-with-drop .chosen-drop {
    граница-нижний-левый-радиус: 0 пикселей;
    граница-нижний-правый-радиус: 0px;

    граница-верх-левый-радиус: 5 пикселей;
    граница-верх-правый-радиус: 5 пикселей;

    тень коробки: нет;

    нижнее поле: -16 пикселей;
}

  
 Создан 17 янв.
 Рохит Партэ 1,6181818 серебряных знаков1313 бронзовых знаков
 lang-html
 Stack Overflow лучше всего работает с включенным JavaScript Ваша конфиденциальность
 Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
 Принимать все файлы cookie 
 Настроить параметры
 .No related posts.

Имя	Тип	По умолчанию	Описание
смещение	\| строка \| функция	0	Смещение раскрывающегося списка относительно цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
флип	логический	правда	Разрешить разворачивание раскрывающегося списка в случае перекрытия ссылочного элемента.Для получения дополнительной информации обратитесь к документации Popper.js.
граница	строка \| элемент	'scrollParent'	Граница ограничения переполнения раскрывающегося меню. Принимает значения `'viewport'` , `'window'` , `'scrollParent'` или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации Popper.js preventOverflow.

Метод	Описание
`$ (). Раскрывающийся список ('переключение')`	Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
`$ (). Раскрывающийся список («обновление»)`	Обновляет положение раскрывающегося списка элемента.
`$ (). Раскрывающийся список ('удалить')`	Уничтожает раскрывающийся список элемента.

Событие	Описание
`показать.bs.dropdown`	Это событие запускается немедленно при вызове метода экземпляра шоу.
`.бс. выпадающий`	Это событие вызывается, когда раскрывающийся список становится видимым для пользователя (ожидает завершения переходов CSS).
`hide.bs.dropdown`	Это событие запускается сразу после вызова метода экземпляра hide.
`hidden.bs.dropdown`	Это событие вызывается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).

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