Категория	Результат	Дата
Только клавиатура	✔ (пройти) пройти	–	2018-6-11
NVDA 2018.1 + ФФ Квантум 59.0.2	✔ (пройти) пройти	–	2018-6-11
JAWS 2018.3 + IE 11	✔ (пройти) пройти	–	2018-6-11
КУСАЧКИ 2018.3 + FF ESR 52.7.3	✔ (пройти) пройти	–	2018-6-11

Категория	Результат	Дата
Только клавиатура	✔ (пройти) пройти	–	2018-6-11
NVDA 2018.1 + ФФ Квантум 59.0.2	✔ (пройти) пройти	–	2018-6-11
JAWS 2018.3 + IE 11	✔ (пройти) пройти	–	2018-6-11
КУСАЧКИ 2018.3 + FF ESR 52.7.3	✔ (пройти) пройти	–	2018-6-11

Категория	Результат	Дата
Только клавиатура	✔ (пройти) пройти	–	2018-6-11
NVDA 2018.1 + ФФ Квантум 59.0.2	✔ (пройти) пройти	–	2018-6-11
JAWS 2018.3 + IE 11	✔ (пройти) пройти	–	2018-6-11
КУСАЧКИ 2018.3 + FF ESR 52.7.3	✔ (пройти) пройти	–	2018-6-11

Категория	Результат	Дата
Только клавиатура	✔ (пройти) пройти	–	2018-6-11
NVDA 2018.1 + ФФ Квантум 59.0.2	✔ (пройти) пройти	–	2018-6-11
JAWS 2018.3 + IE 11	✔ (пройти) пройти	–	2018-6-11
КУСАЧКИ 2018.3 + FF ESR 52.7.3	✔ (пройти) пройти	–	2018-6-11

Категория	Результат	Дата
Только клавиатура	✔ (пройти) пройти	–	2018-6-11
NVDA 2018.1 + ФФ Квантум 59.0.2	✔ (пройти) пройти	–	2018-6-11
JAWS 2018.3 + IE 11	✔ (пройти) пройти	–	2018-6-11
КУСАЧКИ 2018.3 + FF ESR 52.7.3	✔ (пройти) пройти	–	2018-6-11

Html выпадающее меню: Горизонтальное выпадающее меню

10.05.2021 alexxlab

Содержание

Как сделать многоуровневое выпадающее меню только с HTML и CSS (возможно, крошечное JavaScript)

Новичок в CSS и может найти только одноуровневые меню. Вот меню и список пунктов:

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Forums</a>
        <ul>
            <a href="#">Basketball</a>
            <ul>
                <li>
                    <a href="#">Trading</a>
                </li>
                <li>
                    <a href="#">Personal Collections</a>
                </li>
                <li>
                    <a href="#">Box Breaks</a>
                </li>
            </ul>
        </ul>
    </li>
</ul>

Как видите, он будет многоуровневым. Теперь, когда у меня есть CSS, сначала отображаются только главная страница и форумы, а когда я навожу курсор на форумы, баскетбол-это displayed…but, как и последующие пункты меню. Я хочу, чтобы они оставались скрытыми, пока я не нависну над баскетболом. Кто-нибудь знает, как сделать это только с CSS или как можно меньше JavaScript? Спасибо. Вот код CSS, который у меня есть:

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
}

ul li
{
    position: relative;
}

li ul
{
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

ul li a
{
    display: block;
    text-decoration: none;
    color: #777;
    background: #bad8f8;
    padding: 2px 0 2px 10px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

li:hover ul
{
    display: block;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.  validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

html css menu stylesheet drop-down-menu
Поделиться Источник XstreamINsanity 20 января 2011 в 22:09
3 ответа
Wordpress многоуровневое выпадающее меню
Я создал собственную тему для своего сайта. Здесь я хочу создать многоуровневое выпадающее меню, и я сделал это с помощью панели мониторинга, но появляется только выпадающее меню.
Javascript многоуровневое выпадающее меню
HTML код: <ul class=nav-menu> <li id=no onmouseover=dropDown() onmouseout=reverseDropDown()> <a href=# >Birds</a> <ul class=menu> <li id=no2 ><a href=# onmouseover=dropDown2() onmouseout=reverseDropDown2()>Ratites</a> <ul class=submenu>…

1

Вот рабочая демонстрация:
http://jsfiddle.net/rcravens/aqz8q/
Я сделал две вещи.
Небольшая реструктуризация списка ul/li. Некоторые элементы были не в Ли.
Используется ‘li:hover > ul’ для выбора только прямых дочерних элементов.
Надеюсь, это поможет.
Боб
Поделиться rcravens 20 января 2011 в 22:17

0

То, как вы структурировали свой css, приводит к тому, что все потомки «Basketball» наследуют его css. Вместо этого вы должны использовать child(«>») или :first-child selector. Посмотрите на разделы 5.5 и 5.6 здесь, чтобы понять, о чем я говорю: http:/ / www.w3.org/TR/CSS2 / selector. html

Если вы хотите сделать динамические меню, я бы настоятельно рекомендовал использовать javascript, а не полагаться исключительно на css, если только вы не уверены, что многие люди, просматривающие ваш сайт, будут отключены от javascript.
Поделиться Bhavya 20 января 2011 в 22:23

0

Попробуйте добавить
ul li ul{position: absolute; top: 0; left: 0; width: 250px; height: 250px; background-color: #EEE;}
И идите оттуда 🙂
Поделиться plebksig 20 января 2011 в 22:18
Похожие вопросы:

многоуровневое меню с css &html?
Я хочу создать многоуровневое меню с чистым css & html. положение меню должно контролироваться css. Кто-нибудь может мне помочь?

Многоуровневое выпадающее меню без css эффектов наведения asp.net jquery
Я хочу создать многоуровневое выпадающее меню в asp.net, используя c# для составного элемента управления. Кто-нибудь знает или знает какие-нибудь указания о том, как его создать? Я посмотрел на…

Twitter Многоуровневое Выпадающее Меню Bootstrap
Можно ли иметь многоуровневое выпадающее меню с помощью элементов twitter bootstrap 2? В оригинальной версии этой функции нет.

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

Javascript многоуровневое выпадающее меню
HTML код: <ul class=nav-menu> <li id=no onmouseover=dropDown() onmouseout=reverseDropDown()> <a href=# >Birds</a> <ul class=menu> <li id=no2 ><a href=#…

Как сделать выпадающее меню полной ширины и push-контент только с HTML+CSS?
Я пытаюсь создать чистое и простое выпадающее меню HTML+CSS, которое будет открываться в режиме полной ширины под каждым элементом, а также будет нажимать контент. Это изображение и jsfiddle лучше…

Как сделать многоуровневое выпадающее меню с помощью select option mentod
я хочу сделать многоуровневое выпадающее меню с помощью метода select и option <select> <option value= data-display-text=Select>None</option> <option…

Многоуровневое выпадающее меню Bokeh
Я хочу сделать многоуровневое выпадающее меню, что-то вроде того, что есть в этом XKCD: Есть ли какой-то способ, чтобы подкатегории складывались таким образом, используя выпадающее меню Боке? Мой…

ReactJS многоуровневое выпадающее меню
Я пытаюсь создать многоуровневое выпадающее меню ReactJs. Я использую следующий пост/код в качестве базы: следующий пост и этот код jsfiddle в качестве отправной точки моего компонента ReactJs:…

Как развернуть выпадающее меню с помощью css , javascript и html?
У меня есть выпадающее меню на моей странице , когда пользователь нажимает кнопку выпадающего меню, кнопка должна развернуться и отобразить данные . вот чего я хочу Вот это HTML <div…

Создаем анимированное выпадающее меню при помощи CSS3
Я убежден, что CSS3 функции, такие как переходы, анимация и трансформация могут добавить дополнительную привлекательность многим элементам в Ваших проектах.
В этой статье вы увидите, как можно построить симпатичное, анимированное выпадающее меню при помощи одного только CSS3.
Онлайн-демо
HTML
Структура меню очень простая — это неупорядоченный список с ссылками. Вот фрагмент его кода:
<ul>
<li><a href=»#»>Home</a></li>
<li>
<a href=»#»>Categories</a>
<ul>
<li><a href=»#»>CSS</a></li>
<li><a href=»#»>Graphic design</a></li>
<li><a href=»#»>Development tools</a></li>
<li><a href=»#»>Web design</a></li>
</ul>
</li>
<li><a href=»#»>Work</a></li>
<li><a href=»#»>About</a></li>
<li><a href=»#»>Contact</a></li>
</ul>
CSS
Сначала сбрасываем стили по-умолчанию:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
Первый уровень меню.

Возможности CSS3 по созданию таких вещей как градиент, тени и закругленные углы легко позволят нам реализовать следующее:
#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
Clear floats.
Это метод Nicolas Gallagher, который я обычно использую:
#menu:before,
#menu:after {
content: «»;
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
Список элементов.
Обратите внимание на селектор #menu li:hover>a. Это, пожалуй, наиболее важный CSS трюк для этого выпадающего меню.
Итак, вот как это работает: выбираем элемент «а», который является дочерним для «li», а элемент «li» должен быть в свою очередь потомком «#menu». Подробнее о селекторах читайте здесь.
#menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
Подпункты меню.
С помощью свойства CSS3 transitions мы можем создать анимацию изменяя такие CSS-свойства, как margin или opacity. И я использовал это для анимации подменю. Вот что в результате получилось:
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
Стили для первого и последнего элемента меню.
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: »;
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
jQuery

Данное меню работает во всех популярных современных браузерах, но если вам нужно добавить поддержку также IE6, то без использования JavaScript не обойтись.
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$(‘li’).has(‘ul’).mouseover(function(){
$(this).children(‘ul’).css(‘visibility’,’visible’);
}).mouseout(function(){
$(this).children(‘ul’).css(‘visibility’,’hidden’);
})
}
});
Онлайн-демо
Данное меню протестировано в Firefox 8, Chrome 15, Opera 11.52, Safari и IE7.
Скачать исходники.
Перевод

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Горизонтально выпадающее меню css
Создать простое горизантальное меню на CSS не сложно, а довольно просто, нам не потребуется даже использовать JavaScript. Делается это очень просто, поэтому давайте сразу же перейдём к коду.
HTML
1. Создадим разметку кода в html. Дадим меню уникальный id.

CSS
Разметка готова, теперь добавим стили-CSS для неё, не забываем указывать нужное id.
#menu { padding: 0; margin: 0; font-size: 100%; font-family: Georgia; } #menu li { list-style: none; float: left; height: 33px; padding: 0; margin: 0; width: 150px; text-align: center; background: #171717; position: relative; padding-top: 12px; } #menu li ul { list-style: none; padding: 0; margin: 0; width: 150px; display: none; position: absolute; left: 0; top: 45px; } #menu li ul li { float: none; height: 33px; margin: 0; width: 150px; text-align: center; background: #7F7F7F; } #menu li a { display: block; width: 150px; height: 33px; color: #fff; text-decoration: none; } #menu li:hover ul, #menu li:hover ul { display: block; } #menu li:hover, #menu li:hover { background: #424242; }
Просто вставьте этот код и меню будет работать.
Демонстрация:
Вот так просто и создаётся меню, достаточно просто скопировать код и вы увидите такой результат.
Горизонтальное выпадающее меню HTML + CSS
Это простое меню с несколькими уровнями, которое полностью создано на чистом CSS, где подойдет под многие тематические сайты. Идея состоит в том, чтобы оживить каждый пункт меню после изменения уровня. Анимация начинается с щелчка элемента и задержки распространяются через категорию, что можно присвоить каждому запросу. Простая и понятная анимация следуют той же логике для входящих элементов нового уровня многоуровневой навигаций
В качестве дополнительных элементов у нас есть навигационная панель и запросы, виде кнопок, что стильно вписаны под палитру цвета. Более глубокие уровни ссылаются на атрибут данных, где можно добавить медиа запросов для мобильной версии меню с переключением меню, что по умолчанию не вписаны, где сам веб мастер уже после установки может настроить на мобильные гаджеты, чтоб с них также корректно смотрелось и можно было работать с навигацией.
Если немного изменить, то должно получиться примерно следующее, что уже прописано в стилях:
Анимированные меню дает разработчикам хорошее сочетание традиционного стиля и макета, а также быстрые и отзывчивые эффекты анимации, чтобы сделать навигацию более увлекательной для пользователей. В дизайне анимированные ленты выпадают за каждой вкладкой меню при наведении мыши. Дополнительные вкладки и подменю полностью соответствуют дизайнерам.
После того, как мы применили CSS, у нас должно получиться что-то вроде этого:
Чтобы добавить многоуровневые выпадающие списки, мы повторим тот же процесс. Мы выбираем пункт меню, в который хотим добавить новое раскрывающееся меню, и добавим новый ul между li этого пункта меню.
В этом пособии по навигации, вы узнаете о шагах по созданию чистого выпадающего меню, что создано при помощи стилистике CSS. В основном мы будем использовать свойства CSS2, где будет дополнительный небольшой трюк.
И если все сделано правильно, когда мы наводим верх над пунктом меню, то должны увидеть раскрывающийся список с тремя другими добавленными нами элементами.
Как ранее говорили в этом материале, здесь используем псевдоэлемент CSS3, где :only-child в нашем случае это проверяет, есть ли у родительского элемента какие-либо другие элементы внутри других тегов li, если нет, то он удаляет плюс +, который добавляется по умолчанию.
И вот как должен выглядеть конечный результат:
Приступаем к установке:
HTML
Чтобы добавить раскрывающийся список к одному элементу, здесь прописываем ul внутри li, где мы хотим вывести его.
Код
<nav>
  <ul>
  <li><a href=»#»>Главная</a></li>
  <li><a href=»http://zornet. ru»>Zornet.Ru</a>
  <ul>
  <li><a href=»#»>Стили CSS</a></li>
  <li><a href=»#»>Скрипты сайта</a></li>
  <li><a href=»#»>Шаблоны ресурса</a>
  </li>
  </ul>
  </li>
  <li><a href=»#»>Стилистика CSS</a></li>
  <li><a href=»#»>Раскрутка SEO</a></li>
  <li><a href=»#»>Дизайн</a></li>
  <li><a href=»#»>Связь</a></li>
  </ul>
</nav>

Как вы можете видеть в приведенном коде, где был добавлен неупорядоченные списки с несколькими элементами списка во втором li, что в этом случае является элементом меню. Здесь обязательно нужно обратить внимание на добавление ul, что прописан после тега привязки.
Осталось прописать стиль CSS, где все элементы по умолчанию все скрыты, где их появление будет, как только тогда, когда у нас есть над родительским элементом.
Поэтому добавьте следующее после вышеуказанного CSS:
Код
nav {
  margin: 0px 0;
  background-color: #c14018;
  width: 100%;
}
nav ul {
  padding:0;
  margin:0;
  list-style: none;
  position: relative;
  }
nav ul li {
  margin: 0px 0px 0 0;
  display: inline-block;
  background-color: #c1411a;
}
nav a {
  display: block;
  padding: 0 17px;
  color: #f5eeee;
  font-size: 19px;
  line-height: 59.9px;
  text-decoration: none;
}
nav a:hover {
  background-color: #69240e;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
}
nav ul li:hover > ul {
  display:inherit;
}
nav ul ul li {
  min-width:168px;
  display:list-item;
  position: relative;
}
nav ul ul ul {
  position: absolute;
  top:0;
  left:100%;
}
li > a:after { content: ‘ +’; }
li > a:only-child:after { content: »; }

Вы можете еще раз анонсировать этот процесс столько раз, сколько хотите, чтобы добавить дополнительные привязки, что идет на выпадающее элементы списков. Кроме того, вам не нужно добавлять его крайнему элементу в раскрывающемся списке.
Многие используют jQuery для достижения этого эффекта раскрывающееся списка, где аналогично используются совершенно другие методы CSS стилей. Вы предпочитаете создавать свои выпадающие списки, что помощью CSS или jQuery.
Позвольте мне знать в комментариях ниже.
Демонстрация
Как сделать плавное выпадающее меню на 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?
Спасибо за внимание и до скорых встреч!
Создание выпадающего (drop-down) меню, используя только HTML и CSS, без jQuery
Сразу говорю, здесь мы не будем рассматривать меню с различными эффектами на jQuery (типо выпадания, выдвижения и прочее).
Только CSS и HTML, невероятно, но этого вполне достаточно для создания весьма неплохих менюшек.
HTML
Обычно менюшки создаются при помощи <ul>-списков. Кстати говоря, если на WordPress меню будет сгенерировано функцией wp_list_categories или функцией wp_nav_menu(), то тоже всё будет отлично работать. Главное не напутать с классами и айдишниками элементов списка. Это предельно важно.
Пока что я покажу вам только как сделать менюшку с одним уровнем вложенности, в данном случае главное — уловить саму суть.
<ul> <li><a href="#">WordPress</a> <ul> <li><a href="#">плагины</a></li> <li><a href="#">темы</a></li> <li><a href="#">хаки</li> </ul> </li> <li><a href="#">Joomla</a> <ul> <li><a href="#">компоненты</a></li> <li><a href="#">модули</a></li> </ul> </li> <li><a href="#">Drupal</a></li> </ul>
Пунктов может быть сколько угодно, выпадающих списков тоже, просто создаёте их по шаблону, подставляя лишь вместо символов # свои ссылки.
CSS
Здесь тоже всё довольно просто, к тому же часть кода ниже я использовал чисто для оформления, свой цвет фона, цвет ссылок и прочее (важное отмечено /* (!) */).
#my-drop-down-menu ul, ul#my-drop-down-menu{ list-style:none; } #my-drop-down-menu{ position:relative; /* (!) */ z-index:3; width:300px; height:20px; margin:0 auto; } #my-drop-down-menu li. list{ float:left; /* (!) */ display:block; /* (!) */ margin:0 5px; } #my-drop-down-menu a{ color: #61ADB0; text-decoration:none; } #my-drop-down-menu ul.child{ background: #463935; padding:5px; position:absolute; /* (!) */ top:29px; /* (!) */ left:-9999px; /* (!) */ z-index:3; border-top: 1px solid #3A2E2B; -moz-box-shadow: 0px 3px 7px #251d1b; -webkit-box-shadow: 0px 3px 7px #251d1b; box-shadow: 0px 3px 7px #251d1b; } #my-drop-down-menu li:hover ul.child{ left:auto; /* (!) */ } #my-drop-down-menu li a.link{ display:block; padding:5px; } #my-drop-down-menu li:hover a.link{ background: #463935; }
Аналогично можно добавлять ещё больше уровней вложенности, вставляя <ul> в <li>
Повторяюсь, зеленым цветом я отметил стили, которые необходимы для того, чтобы меню нормально работало (выпадало).
Миша
Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.
Выпадающее меню на CSS без доступа к HTML, без JavaScript
В некоторых онлайн конструкторах сайтов на определенных тарифах очень ограничен функционал (например — Битрикс24). Бывает нет возможности вставить свой JavaScript-код, а так же поменять HTML-код готовых блоков. Такая политика в общем то не удивительна, надо же как-то монетизировать такие продукты.
Что если все же хочется выпадающее меню на сайте, а базовые модули с таким функционалом не доступны. Попробуем сделать чисто на CSS. Бывает, что его добавлять как раз разрешают.
Итак пример структуры одноуровневого меню, которое будем превращать в двухуровневое:
1 2 3 4 5 6 7 8 9
<ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Four</li> <li>Five</li> <li>Sub el 1</li> <li>Sub el 2</li> </ul>
И 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
ul { word-spacing: -.36em; display: table; position: relative; margin: 0; padding: 0; } li { display: inline-block; padding: 10px; word-spacing: normal; height: 20px; width: 80px; background: gray; } ul:hover li { display: inline-block; } li:nth-child(6), li:nth-child(7) { display: none; position: absolute; left: 200px; background: lightgray; } li:nth-child(6) { top: 40px; } li:nth-child(7) { top: 80px; } li:nth-child(1):hover ~ li:nth-child(6), li:nth-child(2):hover ~ li:nth-child(6), li:nth-child(4):hover ~ li:nth-child(6), li:nth-child(5):hover ~ li:nth-child(6), li:nth-child(1):hover ~ li:nth-child(7), li:nth-child(2):hover ~ li:nth-child(7), li:nth-child(4):hover ~ li:nth-child(7), li:nth-child(5):hover ~ li:nth-child(7) { display: none; }
Вот что у нас получилось:
Как видно, выпадающие пункты меню размещены в конце, иначе начинаются проблемы при отображении. Некоторый CSS-код относится к решению проблемы отступов между элементами типа inline-block (В частности word-spacing и display: table у UL). Неудобство, конечно, еще в том что все отступы пунктов выпадающего меню придется прописывать вручную. А для разных разрешений экрана, по видимому, их надо будет настраивать с помощью медиа-запросов CSS.
Но суть в том, что все же есть техническая возможность сделать выпадающее меню для клиентов, которые пока не готовы платить дополнительный ежемесячный взнос за расширенный функционал онлайн-конструктора.
Выпадающее меню начальной загрузки
Базовое раскрывающееся меню
Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение. из предопределенного списка:
Пример

HTML

CSS

JavaScript

Попробуй сам »
Объяснение примера
Модель .dropdown class указывает раскрывающееся меню.
Чтобы открыть раскрывающееся меню, используйте кнопку или ссылку с классом .dropdown-toggle и в data-toggle = "dropdown" атрибут .
Класс .caret создает значок стрелки курсора (), который указывает, что кнопка представляет собой раскрывающийся список.
Добавьте класс .dropdown-menu к элементу
, чтобы создать раскрывающееся меню.
Выпадающий разделитель
Модель .divider класс используется для разделения ссылок внутри выпадающего меню тонкой горизонтальной рамкой:
Раскрывающийся заголовок
Класс .dropdown-header используется для добавления заголовков в раскрывающееся меню:
Отключить и активировать
Выделите конкретный элемент раскрывающегося списка с помощью класса .active (добавляет синий цвет фона).
Чтобы отключить элемент в раскрывающемся меню, используйте класс .disabled (получает светло-серый цвет текста и значок запрета парковки при наведении курсора):
Пример
CSS

HTML
Попробуй сам »
Позиция раскрывающегося списка
Чтобы выровнять раскрывающийся список по правому краю, добавьте . dropdown-menu-right класс к элементу с. dropdown-menu:
Выпадение
Если вы хотите, чтобы раскрывающееся меню расширялось вверх, а не вниз, измените элемент
до "dropup" :
Доступность раскрывающегося списка
Чтобы облегчить доступ для людей, использующих программы чтения с экрана, вы должны включить следующие атрибуты role и aria- * при создании раскрывающегося меню:
Пример

HTML

CSS

JavaScript

О нас

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

Bulma: Бесплатная современная CSS-структура с открытым исходным кодом на основе Flexbox
Выпадающий компонент представляет собой контейнер для раскрывающейся кнопки и раскрывающегося меню.
выпадающий основной контейнер
dropdown-trigger контейнер для кнопки
выпадающее меню переключаемое меню, скрыто по умолчанию
dropdown-content dropdown box , с белым фоном и тенью
dropdown-item каждый single item dropdown, который может быть a или div
выпадающий разделитель горизонтальная линия для разделения выпадающих элементов
HTML
Выпадающий элемент Другой выпадающий элемент Активный выпадающий элемент Другой выпадающий элемент С разделителем
Выпадающее содержимое #
В то время как раскрывающийся список может использоваться как якорная ссылка , вы также можете использовать
и вставлять почти любой тип содержимого .
HTML
В раскрывающееся меню можно вставить любой тип содержания . Вместо этого вам просто нужно использовать & lt; div & gt; . Это ссылка
Hoverable или Toggable #
Выпадающий компонент имеет 2 дополнительных модификатора
is-hoverable : раскрывающийся список будет отображаться, когда наведен на , выпадающий триггер
активен : в раскрывающемся списке будет отображаться все время
Хотя реализация CSS : hover работает отлично, класс is-active доступен для пользователей, которые хотят управлять отображением раскрывающегося списка с помощью JavaScript .
HTML
Обзор Модификаторы Сетка Форма Элементы Составные части Макет Более
HTML
В раскрывающееся меню можно вставить любой тип содержания .
Выровнен по правому краю #
Вы можете добавить модификатор is-right , чтобы выпадающий список был выровнен по правому краю.
HTML
Раскрывающийся список по умолчанию выровнен по левому краю .
HTML
Добавьте модификатор is-right для раскрывающегося с выравниванием по правому краю .
Dropup #
Вы можете добавить модификатор is-up , чтобы раскрывающееся меню отображалось над кнопкой раскрывающегося списка.
HTML
Вы можете добавить модификатор is-up , чтобы раскрывающееся меню отображалось над кнопкой раскрывающегося списка.
Переменные #
Имя
Тип
Ценить
Расчетное значение
Вычисляемый тип
$ dropdown-content-background-color
переменная
цвет
$ dropdown-content-padding-bottom
размер
$ dropdown-content-padding-top
размер
тень
0 0. 5em 1em -0.125em rgba ($ scheme-invert, 0,1), 0 0px 0 1px rgba ($ scheme-invert, 0,02)
$ dropdown-item-hover-color
переменная
цвет
$ dropdown-item-hover-background-color
переменная
цвет
$ dropdown-item-active-color
переменная
цвет
$ dropdown-item-active-background-color
переменная
цвет
$ dropdown-divider-background-color
переменная
цвет
Выпадающее меню — Рекомендации по доступности цифровых технологий Orange
Введение
В этом примере мы будем использовать раскрывающееся меню, доступное в библиотеке Boosted.Эта библиотека, основанная на Bootstrap, позволяет быстро создавать компоненты UI, , маркированные оранжевыми цветами.
Заключительный пример
Так выглядит выпадающий список с нашей библиотекой.
Пример кода
Моя корзина Мои заказы Мои данные Выйти
Тестирование
Чтобы это меню было доступным, оно должно использоваться с мышью, клавиатурой и программой чтения с экрана.
Клавиатура навигации
Переместите фокус на «Моя учетная запись» с помощью клавиши Tab и нажмите клавишу Enter .
Откроется меню.
Используйте вверх / вниз стрелки.
Это позволяет вам перемещаться по различным пунктам меню.
Нажмите Escape .
Меню закрывается. При закрытии фокус автоматически перемещается на кнопку, открывшую меню.
Навигационная программа для чтения с экрана
Поместите курсор на «Моя учетная запись».
Программа чтения с экрана сообщает, что есть раскрывающееся меню, и озвучивает раскрывающееся состояние (открыто или закрыто).
Нажмите кнопку Enter .
Открывается меню, выбирается первый элемент. Этот элемент автоматически озвучивается программой чтения с экрана.
Используйте вверх / вниз стрелки.
Они позволяют переходить к различным пунктам меню.
Выберите пункт меню с помощью клавиши Enter .
Меню закрывается. Поскольку фокус перемещается автоматически, программа чтения с экрана снова озвучивает кнопку меню и ее состояние.
ARIA атрибуты
Если вы еще не используете доступный раскрывающийся компонент, вам нужно будет добавить несколько атрибутов ARIA , чтобы программа чтения с экрана правильно озвучивала их.
На кнопке открытия:
Атрибут aria-haspopup = "true" позволяет программе чтения с экрана озвучивать, что это раскрывающееся меню.
Атрибут aria-extended со значением true / false , позволяет озвучивать состояния меню (открытое или закрытое).
Пример:

В пунктах списка меню:
Атрибут role = "menu" в теге списка ul .
Атрибут role = "menuitem" в тегах и .
Пример:
Моя корзина Мои заказы
Многоуровневое раскрывающееся меню с чистым CSS
Последнее изменение 10 сентября 2020 г.
Показывать многоуровневое раскрывающееся меню только с помощью CSS и HTML очень просто и легко. В предыдущем уроке мы показали одноуровневое раскрывающееся меню с помощью jQuery. В этом руководстве мы делаем это для многоуровневого меню без jQuery или любого Javascript.
Посмотреть демоСкачать
HTML-код для многоуровневого меню
Этот HTML-код с вложенным неупорядоченным списком используется для многоуровневого отображения меню.

Популярные игрушки

Видеоигры »

Автомобиль

Велогонка

Рыбалка

Барби

плюшевый мишка

Набор для гольфа

Недавние игрушки

Йойо

Набор врача

Веселая головоломка »

Карты

Числа

Карты Uno

Категория игрушек

Игрушки-батарейки

Remote Toys »

Машины

Самолет

Вертолет

Мягкие игрушки

Магнитные игрушки

Многоуровневое меню CSS
Изначально мы показываем только список элементов родительского меню. При наведении указателя мыши дочерние элементы отображаются с помощью селектора CSS: hover . Мы контролируем позицию списка дочерних меню на основе соответствующего элемента родительского меню с помощью этой таблицы стилей. Стили,
.parent {display: block; position: relative; float: left; line-height: 30px; background-color: # 4FA0D8; border-right: #CCC 1px solid;} .parent a {margin: 10px; color: #FFFFFF; text-decoration: none;} .parent: hover> ul {display: block; position: absolute;} .child {display: none;} .дочерний li {background-color: # E4EFF7; line-height: 30px; border-bottom: #CCC 1px solid; border-right: #CCC 1px solid; ширина: 100%;} .child li a {color: # 000000;} ul {стиль списка: нет; маржа: 0; отступ: 0 пикселей; min-width: 10em;} ul ul ul {left: 100%; top: 0; margin-left: 1px;} li: hover {background-color: # 95B4CA;} .parent li: hover {background-color: # F0F0F0;} .expand {font-size: 12px; float: right; margin-right: 5px;}
Посмотреть демоСкачать
↑ Вернуться к началу
Что такое раскрывающееся меню?
Обновлено: 30.11.2020, Computer Hope
В графическом интерфейсе компьютера раскрывающееся меню — это меню со списком параметров.Заголовок меню или текущий выбранный элемент в списке отображается всегда. При щелчке по видимому элементу другие элементы из списка «раскрываются» для просмотра, и пользователь может выбрать один из этих вариантов.
Например, у многих программ есть раскрывающееся меню «Файл» в верхнем левом углу экрана. Щелчок по тексту «Файл» создает новое меню с дополнительными параметрами.
Выпадающие меню в HTML
Выпадающее меню — это чистый метод отображения большого списка вариантов, поскольку изначально отображается только один вариант, пока пользователь не активирует раскрывающееся окно.Чтобы добавить раскрывающееся меню на веб-страницу, вы должны использовать элемент
В этом примере мы также присвоили значение каждой из этих опций.Эти значения могут быть переданы в любой серверный сценарий для регистрации информации или выполнения действий на основе значений.
Пример вышеуказанного кода
Выберите вариант: Выбор 1, Выбор 2, Выбор 3 Примечание
Ничего не происходит при выборе варианта в раскрывающемся меню выше. Если вы хотите отправить данные с помощью раскрывающегося меню, вы можете использовать нашу форму обслуживания клиентов.
Выпадающие меню в окне программы
Выпадающие меню используются во всех типах программного обеспечения.Например, в операционной системе Windows список возможных тем отображения (показанный ниже) представляет собой раскрывающееся меню.
Как выбрать раскрывающееся меню с помощью клавиатуры
Чтобы выбрать раскрывающееся меню с помощью клавиатуры, нажимайте Tab , пока не будет выбрано раскрывающееся меню. После выбора вы можете использовать клавиши со стрелками вверх и вниз для прокрутки доступных опций. Например, нажмите Tab сейчас, пока не будет выбрано следующее раскрывающееся меню, а затем используйте клавишу со стрелкой вниз для прокрутки списка.Когда вы закончите выбор параметра, нажмите Tab еще раз, чтобы перейти к следующему элементу, или нажмите Enter .
Пример: Выбор 1, выбор 2, выбор 3, последний Совет
Вы также можете нажать первую букву параметра. Например, в раскрывающемся меню выше «Последний» — последний элемент в раскрывающемся меню. Если вы нажмете клавишу « L » на клавиатуре после выбора раскрывающегося меню, оно сразу же прокрутится до этого параметра. Этот совет полезен для больших раскрывающихся меню с несколькими вариантами (например,g. , выбрав штат или страну).
Какую кнопку нужно нажать, чтобы закрыть раскрывающееся меню?
Вы можете нажать клавишу Esc, чтобы закрыть раскрывающееся меню.
Что происходит, когда вы щелкаете элемент в раскрывающемся меню?
При щелчке по элементу в раскрывающемся меню он становится выбранным параметром. Например, если вы заполняете форму, содержащую раскрывающееся меню со списком стран, и выбираете «Соединенные Штаты», это становится вашим выбором. При отправке формы выбранная вами страна будет «США».
Какой значок вы нажимаете, чтобы активировать раскрывающееся меню?
Если в раскрывающемся меню доступен только один вариант (как показано ниже), вы должны щелкнуть значок стрелки вниз рядом с первым вариантом.
Пример: Выбор 1, Выбор 2, Выбор 3 Совет
Сегодня большинство программ также позволяют щелкнуть в любом месте раскрывающегося меню, чтобы просмотреть список доступных параметров.
Что следует использовать в письменной форме: «раскрывающееся меню» или «раскрывающееся меню»?
При написании документации или описании раскрывающегося меню используйте «раскрывающееся меню», если вы не описываете функцию, параметр или команду без дефиса.
Поле со списком, Поле со списком, Меню, Управление с помощью меню, Термины операционной системы, Поле со списком
Раскрывающиеся меню HTML
— Формы HTML — Учебное пособие по HTML
Дом
Учебное пособие по HTML
Раскрывающееся меню HTML
Выпадающие меню, также называемые списками выбора, похожи на переключатели и флажки, поскольку они позволяют выбрать один или несколько вариантов одновременно из заранее определенного списка параметров.Они занимают меньше места по вертикали, чем несколько переключателей и флажков, но не все параметры видны сразу.
Теги используются для создания списка выбора. Каждая опция внутри меню определяется тегами.

Что бежит, но не ходит? <выбрать>
Результат:
Атрибуты меню
Как и другие элементы формы, атрибут name необходим для идентификации выбора при отправке формы.
Атрибут size позволяет изначально отображать более одного параметра, настраивая раскрывающееся меню таким образом, чтобы оно отображалось в виде списка выбора.
Атрибут «множественный» может допускать множественный выбор одновременно.

Что бежит, но не ходит?
Результат:
Поскольку в нашем примере multiple = «yes», удерживание клавиши Shift при выборе каждой опции позволит выбрать более одной опции.
Вы можете использовать элемент, чтобы сгруппировать связанные друг с другом параметры, чтобы упростить их просмотр:

Что бежит, но не ходит?
Результат:
Что бежит, но не ходит? УлиткиГепардысветВодыОблачность
Выпадающий виджет (или: меню, раскрывающееся меню)
Выпадающие списки позволяют переключать видимость элемента. Обычно они содержат какую-то навигацию, будь то простой список ссылок или более сложные элементы. Они могут предлагать от одного до нескольких уровней вложенности.
Мы не называем выпадающие списки просто «меню», поскольку выпадающие списки могут иметь гораздо более широкую область применения, чем меню традиционных приложений.
Общие требования
Следующие требования основаны на хорошо зарекомендовавших себя передовых методах и методах разработки WAI-ARIA: Виджет меню (W3.org).
Помимо многих других требований, мы хотим особо подчеркнуть следующее:
Значение и использование раскрывающегося списка должны быть понятны.
Раскрывающийся список должен работать как с клавиатурой, так и с программами чтения с экрана (с разумным взаимодействием клавиш по умолчанию, таких как Tab , Enter / Пробел , Esc , Стрелка клавиш), а также с мобильных устройств чтения с экрана .
При открытии / закрытии раскрывающегося списка должна подаваться правильная обратная связь.
Кстати, выпадающие списки очень похожи на:
Подтверждение концепции
Прежде чем продолжить, прочтите, что такое «Доказательство концепции» ?.
Простое раскрывающееся меню
Это простое раскрывающееся меню предлагает один расширяемый уровень.
Простое раскрывающееся меню
Играем в футбол Танцы Просмотр фильмов google.ch/search?q=meditate"> медитируйте Другое
*: focus { контур: 2 пикселя с точками # 000; } п { ясно: слева; } p button { маржа сверху: 20 пикселей; } ol { отступ: 1 пиксель; ширина: 100%; } ol> li { плыть налево; стиль списка: нет; положение: относительное; } ol a, ol button { дисплей: блок; граница: 1px solid # 000; цвет: # 000; цвет фона: светло-желтый; отступ: 10 пикселей; ширина: 200 пикселей; размер коробки: рамка-рамка; текстовое оформление: нет; } ol a: hover, ol button: hover { оформление текста: подчеркивание; } ol button { размер шрифта: наследовать; семейство шрифтов: наследовать; выравнивание текста: наследование; высота: 40 пикселей; } ol button: hover { курсор: указатель; } ол кнопка [aria-extended = "true"] + ol { позиция: абсолютная; } ол кнопка [aria-extended = "false"] + ol { дисплей: нет; }
; (функция () { var AdgDropdown AdgDropdown = class AdgDropdown { constructor (el) { это.$ el = $ (el) this.initExpandables () } initExpandables () { вернуть это. $ el.find ('[aria-extended]'). click (e => { var $ button, $ container $ button = $ (e.target) $ container = $ ($ button.next ('*')) if ($ container.is (': visible')) { вернуть this.hide ($ button, $ container) } еще { вернуть this.show ($ button, $ container) } }) } show ($ button, $ container) { $ container.attr ('скрытый', ложь) кнопка возврата $.attr ('расширенная ария', истина) } скрыть ($ button, $ container) { $ container.attr ('скрытый', правда) return $ button.attr ('расширенная ария', ложь) } } $ (документ) .ready (функция () { return $ ('[data-adg-dropdown]'). each (function () { вернуть новый AdgDropdown (это) }) }) } .call (это))
Категория Результат Дата
Только клавиатура ✔ (пройти) пройти – 2018-6-11
NVDA 2018.1 + ФФ Квантум 59.0.2 ✔ (пройти) пройти – 2018-6-11
JAWS 2018.3 + IE 11 ✔ (пройти) пройти – 2018-6-11
КУСАЧКИ 2018.3 + FF ESR 52.7.3 ✔ (пройти) пройти – 2018-6-11
Подробности реализации
Интересные особенности:
Каждый выпадающий переключатель имеет атрибут aria-extended = "false" ; его значение ( true / false ) и видимость соответствующего контента переключается с помощью JavaScript.См. Раздел «Маркировка элементов, расширяемых с помощью расширения aria».
Содержимое раскрывающегося списка переключается с помощью скрытого атрибута (см. Скрытие элементов со всех устройств).
Переключатели раскрывающегося списка
реализованы как элементы
Используя вложенные списки, программы чтения с экрана могут сообщать при входе в списки (и выходе из них) общее количество элементов в текущем списке.
Добавление более сложных функций взаимодействия с клавиатурой, таких как закрытие раскрывающегося списка с помощью Esc или перемещение по нему с помощью клавиш со стрелкой и , было бы простым.Однако для простоты мы воздержались от этого.
Многоуровневое раскрывающееся меню
Некоторые раскрывающиеся списки предлагают более одного уровня вложенности. Просто добавьте больше вложенных списков, чтобы это произошло:
Многоуровневое раскрывающееся меню
Играть в футбол сальса рок-н-ролл линди хоп Чарльстон Садоводство Просмотр фильмов медитируйте Другое
*: focus { контур: 2 пикселя с точками # 000; } п { ясно: слева; } p button { маржа сверху: 20 пикселей; } ol { отступ: 0; } ol> li { плыть налево; стиль списка: нет; положение: относительное; } ol a, ol button { дисплей: блок; граница: 1px solid # 000; цвет: # 000; цвет фона: светло-желтый; отступ: 10 пикселей; ширина: 200 пикселей; размер коробки: рамка-рамка; текстовое оформление: нет; } ol a: hover, ol button: hover { оформление текста: подчеркивание; } ol button { размер шрифта: наследовать; семейство шрифтов: наследовать; выравнивание текста: наследование; высота: 40 пикселей; } ol button: hover { курсор: указатель; } ол кнопка [aria-extended = "true"] + ol { позиция: абсолютная; } ол кнопка [aria-extended = "true"] + ол ол { осталось: 100%; верх: 0; } ол кнопка [aria-extended = "false"] + ol { дисплей: нет; }
; (функция () { var AdgDropdown AdgDropdown = class AdgDropdown { constructor (el) { это. $ el = $ (el) this.initExpandables () } initExpandables () { вернуть это. $ el.find ('[aria-extended]'). click (e => { var $ button, $ container $ button = $ (e.target) $ container = $ ($ button.next ('*')) if ($ container.is (': visible')) { вернуть this.hide ($ button, $ container) } еще { вернуть this.show ($ button, $ container) } }) } show ($ button, $ container) { $ container.attr ('скрытый', ложь) кнопка возврата $.attr ('расширенная ария', истина) } скрыть ($ button, $ container) { $ container.attr ('скрытый', правда) return $ button.attr ('расширенная ария', ложь) } } $ (документ) .ready (функция () { return $ ('[data-adg-dropdown]'). each (function () { вернуть новый AdgDropdown (это) }) }) } .call (это))
Категория Результат Дата
Только клавиатура ✔ (пройти) пройти – 2018-6-11
NVDA 2018.1 + ФФ Квантум 59.0.2 ✔ (пройти) пройти – 2018-6-11
JAWS 2018.3 + IE 11 ✔ (пройти) пройти – 2018-6-11
КУСАЧКИ 2018.3 + FF ESR 52.7.3 ✔ (пройти) пройти – 2018-6-11
Это спорно, как удобное для пользователя меню с глубоко вложенными уровнями действительно хотя.Хороший компромисс — сохранить вложенные списки, но без необходимости переключать их видимость.
Многоуровневый раскрывающийся список с всегда открытыми подуровнями
google.ch/search?q=soccer"> Играем в футбол Танцы Salsa рок-н-ролл Swing линди-хоп Чарльстон Садоводство Просмотр фильмов медитируйте Другое
*: focus { контур: 2 пикселя с точками # 000; } п { ясно: слева; } p button { маржа сверху: 20 пикселей; } ol { отступ: 0; } ol> li { плыть налево; стиль списка: нет; положение: относительное; } ol a, ol button, ol span { дисплей: блок; граница: 1px solid # 000; цвет: # 000; цвет фона: светло-желтый; отступ: 10 пикселей; ширина: 200 пикселей; размер коробки: рамка-рамка; текстовое оформление: нет; } ol a: hover, ol button: hover { оформление текста: подчеркивание; } ol span { стиль шрифта: курсив; } ol button { размер шрифта: наследовать; семейство шрифтов: наследовать; выравнивание текста: наследование; высота: 40 пикселей; } ol button: hover { курсор: указатель; } ол кнопка [aria-extended = "true"] + ol { позиция: абсолютная; } кнопка ol [aria-extended = "true"] + ol ol a, ol button [aria-extended = "true"] + ol ol span { отступ слева: 40 пикселей; } кнопка ol [aria-extended = "true"] + ol ol ol a, ol button [aria-extended = "true"] + ol ol ol span { отступ слева: 80 пикселей; } ол кнопка [aria-extended = "false"] + ol { дисплей: нет; }
; (функция () { var AdgDropdown AdgDropdown = class AdgDropdown { constructor (el) { это. $ el = $ (el) this.initExpandables () } initExpandables () { вернуть это. $ el.find ('[aria-extended]'). click (e => { var $ button, $ container $ button = $ (e.target) $ container = $ ($ button.next ('*')) if ($ container.is (': visible')) { вернуть this.hide ($ button, $ container) } еще { вернуть this.show ($ button, $ container) } }) } show ($ button, $ container) { $ container.attr ('скрытый', ложь) кнопка возврата $.attr ('расширенная ария', истина) } скрыть ($ button, $ container) { $ container.attr ('скрытый', правда) return $ button.attr ('расширенная ария', ложь) } } $ (документ) .ready (функция () { return $ ('[data-adg-dropdown]'). each (function () { вернуть новый AdgDropdown (это) }) }) } .call (это))
Категория Результат Дата
Только клавиатура ✔ (пройти) пройти – 2018-6-11
NVDA 2018.1 + ФФ Квантум 59.0.2 ✔ (пройти) пройти – 2018-6-11
JAWS 2018.3 + IE 11 ✔ (пройти) пройти – 2018-6-11
КУСАЧКИ 2018.3 + FF ESR 52.7.3 ✔ (пройти) пройти – 2018-6-11
По общему признанию, это уже довольно близко к мега выпадающему списку (см. Ниже).
Выпадающее меню двойного назначения
Другой вариант использования — раскрывающиеся списки, которые служат двойной цели: предлагают как переключение раскрывающегося списка, так и переход к элементу.
Существуют реализации этого шаблона, которые реализуют это с помощью одного элемента:
При наведении курсора открывается раскрывающийся список.
При его активации браузер переходит по URL-адресу.
Проблема заключается в том, что событие hover доступно только для указывающих устройств (например, мыши): только клавиатура, программа чтения с экрана или пользователи сенсорного экрана смогут использовать такую реализацию (для дальнейшего обсуждения о hover , см. Ниже).
Лучшим вариантом для этого требования является реализация как элемента для переключения раскрывающегося списка, так и для перехода к элементу:
Выпадающее меню двойного назначения
Физическая активность Играть в футбол Танцы Расслабляющие занятия Просмотр фильмов медитируйте Другое
*: focus { контур: 2 пикселя с точками # 000; } п { ясно: слева; } p button { маржа сверху: 20 пикселей; } .visually-hidden { позиция: абсолютная; слева: -10000 пикселей; верх: авто; ширина: 1 пиксель; высота: 1 пикс; переполнение: скрыто; } ol { отступ: 0; } ol> li { плыть налево; стиль списка: нет; положение: относительное; } ol a, ol button { дисплей: блок; граница: 1px solid # 000; цвет: # 000; цвет фона: светло-желтый; отступ: 10 пикселей; ширина: 170 пикселей; размер коробки: рамка-рамка; текстовое оформление: нет; } ol a: hover, ol button: hover { оформление текста: подчеркивание; } ol button { размер шрифта: наследовать; семейство шрифтов: наследовать; выравнивание текста: наследование; ширина: 31 пикс; высота: 40 пикселей; граница слева: нет; маржа слева: -1px; } ol button: hover { курсор: указатель; } ол кнопка [aria-extended = "true"] + ol { позиция: абсолютная; справа: 0; } ol button [aria-extended = "true"] + ol a { ширина: 200 пикселей; } ол кнопка [aria-extended = "false"] + ol { дисплей: нет; }
; (функция () { var AdgDropdown AdgDropdown = class AdgDropdown { constructor (el) { это. $ el = $ (el) this.initExpandables () } initExpandables () { вернуть это. $ el.find ('[aria-extended]'). click (e => { var $ button, $ container $ button = $ (e.target) $ container = $ ($ button.next ('*')) if ($ container.is (': visible')) { вернуть this.hide ($ button, $ container) } еще { вернуть this.show ($ button, $ container) } }) } show ($ button, $ container) { $ container.attr ('скрытый', ложь) кнопка возврата $.attr ('расширенная ария', истина) } скрыть ($ button, $ container) { $ container.attr ('скрытый', правда) return $ button.attr ('расширенная ария', ложь) } } $ (документ) .ready (функция () { return $ ('[data-adg-dropdown]'). each (function () { вернуть новый AdgDropdown (это) }) }) } .call (это))
Категория Результат Дата
Только клавиатура ✔ (пройти) пройти – 2018-6-11
NVDA 2018.1 + ФФ Квантум 59.0.2 ✔ (пройти) пройти – 2018-6-11
JAWS 2018.3 + IE 11 ✔ (пройти) пройти – 2018-6-11
КУСАЧКИ 2018.3 + FF ESR 52.7.3 ✔ (пройти) пройти – 2018-6-11
Мега раскрывающийся список
Мега раскрывающийся список может содержать гораздо больше, чем просто набор ссылок: он может содержать (почти) все, что является структурированным контентом, будь то абзацы, изображения, элементы форм и т. Д.
Мега раскрывающийся список
google.ch/search?q=soccer"> Игра в футбол Футбол - это командный вид спорта, в который играют две команды по одиннадцать игроков со сферическим мячом. танцы Танец - это вид исполнительского искусства, состоящий из целенаправленно выбранных последовательностей движений человека. сальса Сальса - популярная форма социального танца, зародившаяся на Карибах. рок-н-ролл Рок-н-ролл - это очень спортивная, соревновательная форма партнерского танца, возникшая из линди-хопа. Садоводство Садоводство - это практика выращивания и выращивания растений как часть садоводства. <форма> Пожалуйста, заполните форму ниже, указав свои учетные данные. Войти Имя Пароль Учетных данных еще нет? Пожалуйста, сделайте что-нибудь из следующего: Зарегистрируйте свою учетную запись. Взломать аккаунт другого пользователя. Уходи и больше не возвращайся. О программе
*: focus { контур: 2 пикселя с точками # 000; смещение контура: 2 пикселя; } п { ясно: слева; } p button { маржа сверху: 20 пикселей; } ol { отступ: 0; } ol> li { плыть налево; стиль списка: нет; положение: относительное; } ol a, ol button, ol span { дисплей: блок; граница: 1px solid # 000; цвет: # 000; цвет фона: светло-желтый; отступ: 10 пикселей; ширина: 200 пикселей; размер коробки: рамка-рамка; } ol span { стиль шрифта: курсив; } ol a, ol button { текстовое оформление: нет; } ol a: hover, ol button: hover { оформление текста: подчеркивание; } ol button { размер шрифта: наследовать; семейство шрифтов: наследовать; выравнивание текста: наследование; высота: 40 пикселей; } ol button: hover { курсор: указатель; } ol button [aria-extended = "true"] + форма, ol button [aria-extended = "true"] + ol { позиция: абсолютная; цвет фона: светло-желтый; граница: 1px solid # 000; } ол кнопка [aria-extended = "true"] + форма { слева: -100 пикселей; вправо: -100 пикселей; отступ: 10 пикселей; } ол кнопка [aria-extended = "true"] + ярлык формы { дисплей: встроенный блок; ширина: 100 пикселей; нижнее поле: 10 пикселей; } ол кнопка [aria-extended = "true"] + ol { позиция: абсолютная; } кнопка ol [aria-extended = "true"] + кнопка ol a, ol [aria-extended = "true"] + ol span { font-weight: жирный; ширина: 500 пикселей; } ол кнопка [aria-extended = "true"] + ol p { шрифт: нормальный; дисплей: встроенный блок; } кнопка ol [aria-extended = "true"] + ol ol a, ol button [aria-extended = "true"] + ol ol span { отступ слева: 40 пикселей; } кнопка ol [aria-extended = "true"] + ol ol ol a, ol button [aria-extended = "true"] + ol ol ol span { отступ слева: 80 пикселей; } ол кнопка [aria-extended = "false"] + ol, ol кнопка [aria-extended = "false"] + форма { дисплей: нет; }
; (функция () { var AdgDropdown AdgDropdown = class AdgDropdown { constructor (el) { это. $ el = $ (el) this.initExpandables () } initExpandables () { вернуть это. $ el.find ('[aria-extended]'). click (e => { var $ button, $ container $ button = $ (e.target) $ container = $ ($ button.next ('*')) if ($ container.is (': visible')) { вернуть this.hide ($ button, $ container) } еще { вернуть this.show ($ button, $ container) } }) } show ($ button, $ container) { $ container.attr ('скрытый', ложь) кнопка возврата $.attr ('расширенная ария', истина) } скрыть ($ button, $ container) { $ container.attr ('скрытый', правда) return $ button.attr ('расширенная ария', ложь) } } $ (документ) .ready (функция () { return $ ('[data-adg-dropdown]'). each (function () { вернуть новый AdgDropdown (это) }) }) } .call (это))
Категория Результат Дата
Только клавиатура ✔ (пройти) пройти – 2018-6-11
NVDA 2018.1 + ФФ Квантум 59.0.2 ✔ (пройти) пройти – 2018-6-11
JAWS 2018.3 + IE 11 ✔ (пройти) пройти – 2018-6-11
КУСАЧКИ 2018.3 + FF ESR 52.7.3 ✔ (пройти) пройти – 2018-6-11
Дальнейшие обсуждения
Какие элементы входят в выпадающие списки?
Как объяснялось выше, мега выпадающие списки могут содержать структурированный контент различного типа.Но не злоупотребляйте этой возможностью. Например, вставка «больших» структурных элементов, таких как заголовки (
до ) или элементов секционирования HTML 5 (например,
или
), в эти довольно простые структуры вложенных списки (
) кажутся неправильными.
Если вы действительно хотите сделать что-то подобное, вам лучше думать об этом как о немодальных диалогах, см. Виджет «Диалог» (или: модальный, всплывающий, лайтбокс, предупреждение).
Comboboxes как альтернатива?
Раньше комбинированные списки (вместе с некоторым JavaScript) часто использовались как простая альтернатива раскрывающимся меню.
<набор полей> Быстрая навигация <выбор>
Этот метод остается допустимым и по сей день, а с помощью раскрывающийся список может быть даже вложен на один уровень.
Поскольку возможности стилизации этих стандартных элементов управления ограничены, в настоящее время они используются редко.
Включить при наведении?
Существует большой спор о том, должны ли раскрывающиеся меню открываться при наведении курсора на . Прежде всего: непреднамеренное наведение курсора может вызвать мерцание элементов. Но есть также сбивающее с толку (если не мешающее или даже вводящее в заблуждение) поведение, связанное с выпадающими списками, которые открываются (или закрываются) при наведении курсора.
Посмотрите на этот сценарий: пользователь наводит курсор на раскрывающийся список и нажимает на него, но кажется, что ничего не происходит.Это связано с тем, что раскрывающийся список уже был запущен для открытия при наведении курсора, и щелчок по нему сразу же закрывает его.
Еще хуже сценарий: пользователь хочет щелкнуть элемент прямо под закрытым раскрывающимся списком. При наведении указателя мыши на раскрывающийся список (который в настоящее время не представляет интереса для пользователя) событие зависания открывает раскрывающийся список и перекрывает целевой элемент, в результате чего быстрый пользователь вместо этого щелкает элемент в раскрывающемся списке.
Наихудшими являются элементы, которые при наведении курсора переключают раскрывающийся список и переходят на веб-сайт путем активации.Это очень сбивает с толку самых разных пользователей (будь то с особыми потребностями или без них), и его довольно сложно реализовать доступным способом.
Существует множество приемов и обходных путей для минимизации описанных выше проблем, например, использование тайм-аутов или визуальных эффектов. Но в целом проблемы остаются, и обходные пути потенциально приводят к новым побочным эффектам (или даже к менее интуитивному поведению).
По нашему мнению, события зависания следует использовать только для чисто визуальных целей, а переключение видимости контента ни в коем случае не является чисто визуальным.Поэтому гораздо лучше открывать (и закрывать) раскрывающиеся списки только при выделенной активации пользователем.
Ссылки или кнопки?
В наших реализациях раскрывающегося списка мы используем элементы