Javascript выпадающее меню: Как сделать раскрывающееся меню при нажатии

08.05.2021 alexxlab

Содержание

Выпадающее по клику меню на css

я однажды реализовывал подобное меню. там смысл достаточно прост: делаем обычное навигационное меню. раз меню выпадающее — делаем первый и второй уровень (допустим). первый уровень отображается всегда, а вот второй скрываем с помощью display: none;. при наведении на определённый пункт меню первого уровня через псевдокласс :hover отображаем ссылки второго уровня. тут правильно задать позиционирование для второго уровня. а также очень важно (это проблема заставила меня долго мучаться) задать для пункта, при наведении на который будет появляться подменю, padding по-больше. чтобы площадь реагирования на наведение увеличить. Для большей наглядности мой код HTML (упрощённый):

<!DOCTYPE html PUBLIC "-//W3C/DTD//XTHML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtm1" xml:lang="en" lang="ru">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<ul>
            <li><a href="#">О компании</a></li>
            <li><a href="#">Услуги</a>
                <ul>
                    <li><a href="#">Все виды оценки</a></li>
                    <li><a href="#">Автоэкспертиза</a></li>
                    <li><a href="#">Автострахование</a></li>
                    <li><a href="#">Юридические услуги</a></li>
                </ul><!--end sub_nav-->
            </li>
            <li><a href="#">Тарифы</a></li>
            <li><a href="#">Новости</a></li>
            <li><a href="#">Контакты</a></li>
        </ul><!--end main_nav-->
</body>
</html>

И код CSS (тоже упрощён):

#main_nav {
            position: relative;
            top: 15px;
            margin-top: 14px;
            margin-left: 280px;
            }
        #main_nav li{
            display: inline;
            padding: 0 8px;
            border-left: 1px dotted #8b6619;
            position: relative;
            z-index: 2;
            }
        #main_nav li:first-child, #main_nav ul li {
            border-left: none;
            }
        #main_nav ul {
            display: none;
            position: absolute;
            top: 19px;
            left: 0;
            z-index: 1;
            width: 155px;
            }
        #main_nav li a, #main_nav li ul li a{
            color: #8b6619;
            font-family: "Times New Roman", serif;
            font-size: 0.9em;
            font-weight: bold;
            text-decoration: none;
            outline: none;
            padding-bottom: 17px;
            }
        #main_nav li a:hover, 
        #main_nav li ul a:hover {
            color: black;
            }
        /*--------------Подменю--------------*/
            #main_nav li:hover ul {
                display: block;
                }

Вот и всё. Спасибо за голоса!)

меню » Скрипты для сайтов

19.08.2018 4 692 Codepen

Боковое выезжающее меню

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

19.02.2018 7 406 Скрипты / Menu & Nav

Эффект зачеркивания при наведении в меню

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

21.12.2017 16 458 Скрипты / Menu & Nav

Slinky — адаптивное многоуровневое меню

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

11.09.2016 5 198 Скрипты / Menu & Nav

Гибкое горизонтальное меню

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

19.04.2016 8 753 Скрипты / Menu & Nav

Slide out sidebar меню

Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.

24.12.2015 6 730 Скрипты / Menu & Nav

Mega dropdown меню

Mega dropdown меню — jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.

31.07.2014 12 597 Скрипты / Accordion

Вертикальное accordion меню

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

30.07.2014 4 604 Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

25.06.2014 5 537 Скрипты / Menu & Nav

Диагональное меню на CSS

Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.

23.01.2014 3 747 Скрипты / Menu & Nav

Lavalamp меню на CSS3

Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~.

03.01.2014 4 314 Скрипты / Menu & Nav

Анимированный border с меню

Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.

03.07.2013 14 367 Скрипты / Menu & Nav

Адаптивное много-уровневое меню

Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам — font-awesome.css

Выпадающие элементы. Компоненты · Bootstrap. Версия v4.3.1

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

Обзор

Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.

Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js.

Если вы компилируете наши JS файлы, необходим

util.js.

Доступность

Стандарт WAI ARIA описывает и определяет виджет role="menu" как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.

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

role и aria-), необходимых для меню согласно стандарту ARIA.

Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом

.dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>.

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами <button>:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

А вот так — с <a> элементами:

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выпадающая ссылка
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

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

Предупреждение

<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

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

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

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.

Главная Toggle Dropdown Вторичная Toggle Dropdown Успех Toggle Dropdown Предупреждение Toggle Dropdown Опасность Toggle Dropdown

<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Размеры

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

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

Направления

«Выпадающий вверх»

Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.

Split dropup Toggle Dropdown

<!-- Default dropup button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий вправо»

Добавьте класс .dropright и выпадающий элемент будет «выпадать» вправо.

Split dropright Toggle Dropdright

<!-- Default dropright button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div>
  <button type="button">
    Split dropright
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropright</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий влево»

Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.

<!-- Default dropleft button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div>
  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>Toggle Dropleft</span>
    </button>
    <div>
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button">
    Split dropleft
  </button>
</div>

Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов <button>, а не только <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Вы также можете создать неинтерактивные выпадающие элементы класса .dropdown-item-text. Свободно стилизуйте их обычным CSS.

<div>
  <span>Dropdown item text</span>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
</div>

Активные элементы меню

Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Active link</a>
  <a href="#">Another link</a>
</div>

Неактивные элементы меню

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.

Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Отзывчивое выравнивание

Если вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display="static", и используйте классы адаптивных вариантов.

Чтобы выровнять выпадающее меню вправо с заданной точкой останова или больше, добавьте .dropdown-menu{-sm|-md|-lg|-xl}-right.

Left-aligned but right aligned when large screen

<div>
  <button type="button" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Чтобы выровнять выпадающее меню влево с заданной точкой останова или более, добавьте .dropdown-menu-right и .dropdown-menu{-sm|-md|-lg|-xl}-left.

Right-aligned but left aligned when large screen

<div>
  <button type="button" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Обратите внимание, что вам не нужно добавлять атрибут data-display="static" к выпадающим кнопкам на панелях навигации, поскольку Popper.js не используется на панелях навигации.

Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Разделители меню

Разделяйте группы родственных элементов меню разделителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Текст меню

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

<div>
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p>
    And this is more example text.
  </p>
</div>

Формы меню

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

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" placeholder="[email protected]">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <div>
        <input type="checkbox">
        <label for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit">Sign in</button>
  </form>
  <div></div>
  <a href="#">New around here? Sign up</a>
  <a href="#">Forgot password?</a>
</div>

<form>
  <div>
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" placeholder="[email protected]">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" placeholder="Password">
  </div>
  <div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit">Sign in</button>
</form>

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

Используйте data-offset или data-reference, чтобы изменить местоположение раскрывающегося списка.

<div>
  <div>
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div aria-labelledby="dropdownMenuOffset">
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
    </div>
  </div>
  <div>
    <button type="button">Reference</button>
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span>Toggle Dropdown</span>
    </button>
    <div aria-labelledby="dropdownMenuReference">
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
      <div></div>
      <a href="#">Separated link</a>
    </div>
  </div>
</div>

Использование

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным «детям» элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

$('.dropdown-toggle').dropdown()

data-toggle="dropdown" still required

Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle="dropdown" всегда необходим в элементе, запускающем выпадающий элемент.

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="".

Название	Тип	По умолч.	Описание
offset	number \| string \| function	0	Смещение раскрывающегося списка относительно его цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента. Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js
flip	boolean	true	Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs.
boundary	string \| element	‘scrollParent’	Граница ограничения переполнения выпадающего меню. Принимает значения `'viewport'`, `'window'`, `'scrollParent'` или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js.
reference	string \| element	‘toggle’	Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, or an HTMLElement reference. For more information refer to Popper.js’s referenceObject docs.
display	string	dynamic \| static	By default, we use Popper.js for dynamic positioning. Disable this with `static`.

Обратите внимание, что если для boundary установлено значение, отличное от 'scrollParent', позиция position: static применяется к контейнеру .dropdown.

Методы

Метод	Описание
`$().dropdown('toggle')`	Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
`$().dropdown('show')`	Показывает выпадающее меню данной навигационной панели или вкладки.
`$().dropdown('hide')`	Скрывает выпадающее меню данной навигационной панели или вкладки.
`$().dropdown('update')`	Обновляет позицию «выпадения» элемента.
`$().dropdown('dispose')`	Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу «якоря» (ссылка, т.е. <a>), запускающего функциональность toggle.

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

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

175

547

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

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

Для того чтобы получить точно такое же меню, как показано выше, для начала вставьте в шапку своего сайта (между тегами <head> и </head>) следующий код:

HTML код:

<style type="text/css">
    .tab_menu { width: 100%; }
    .tab_menu div { padding: 3px; cursor: pointer; }
    .hide { visibility: hidden; }
    .show { visibility: visible; }
</style>

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

JavaScript код:

<script type="text/javascript">
 function show_Object1() { document.getElementById('div1').className='show'; }
 function hide_Object1() { document.getElementById('div1').className='hide'; }
 function show_Object2() { document.getElementById('div2').className='show'; }
 function hide_Object2() { document.getElementById('div2').className='hide'; }
 function show_Object3() { document.getElementById('div3').className='show'; }
 function hide_Object3() { document.getElementById('div3').className='hide'; }
</script>

Далее, в том месте Вашего сайта, где будет располагаться выпадающее меню, необходимо добавить описание разделов и подразделов меню следующим образом:

HTML код:

<table class="tab_menu">
<tr style="vertical-align: top;"><td>
 <div style="background-color: #00BB00;"
     onmouseover="show_Object1()" onmouseout="hide_Object1()">
  <b>Основные разделы</b>
 </div>
 <div id="div1" onmouseover="show_Object1()" onmouseout="hide_Object1()"
     class="hide" style="background-color: #E8FED8;">
  <a href="index.php" onmouseover="show_Object1()" onmouseout="hide_Object1()">
  Главная</a><br>
  <a href="news.php" onmouseover="show_Object1()" onmouseout="hide_Object1()">
  Новости сайта</a><br>
  <a href="plans.php" onmouseover="show_Object1()" onmouseout="hide_Object1()">
  Планы развития</a><br>
 </div>
</td><td>
 <div style="background-color: #00BB00;"
     onmouseover="show_Object2()" onmouseout="hide_Object2()" >
  <b>Скрипты</b>
 </div>
 <div id="div2" onmouseover="show_Object2()" onmouseout="hide_Object2()"
     class="hide" style="background-color: #E8FED8;">
  <a href="shadow_text.php" onmouseover="show_Object2()" onmouseout="hide_Object2()">
  Скрипт тени к тексту</a><br>
  <a href="gradient.php" onmouseover="show_Object2()" onmouseout="hide_Object2()">
  Градиентная заливка текста</a><br>
  <a href="simple_menu.php" onmouseover="show_Object2()" onmouseout="hide_Object2()">
  Простое меню</a><br>
 </div>
</td><td>
 <div style="background-color: #00BB00;"
     onmouseover="show_Object3()" onmouseout="hide_Object3()" >
  <b>Хитрости</b>
 </div>
 <div id="div3" onmouseover="show_Object3()" onmouseout="hide_Object3()"
     class="hide" style="background-color: #E8FED8;">
  <a href="create_rss.php" onmouseover="show_Object3()" onmouseout="hide_Object3()">
  Как сделать RSS-ленту</a><br>
  <a href="no_www.php" onmouseover="show_Object3()" onmouseout="hide_Object3()">
  Убираем www из адреса сайта</a><br>
 </div>
</td></tr>
</table>

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

Дата создания: 19:23:31 14.10.2011 г.

Дата обновления: 21:34:55 04.04.2013 г.

Посещений: 42273 раз(а).

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

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

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

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

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

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

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

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

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

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

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

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

<ul>

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

</ul>

</nav>

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

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

<ul>

<ul>

</ul>

</li>

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

</ul>

</nav>

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

li { display: block; transition-duration: 0.5s; } li:hover { cursor: pointer; } ul li ul { visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; } ul li ul li { clear: both; width: 100%; }

li {

display: block;

transition-duration: 0.5s;

}

li:hover {

cursor: pointer;

}

ul li ul {

visibility: hidden;

opacity: 0;

position: absolute;

transition: all 0.5s ease;

margin-top: 1rem;

left: 0;

display: none;

}

ul li:hover > ul,

ul li ul:hover {

visibility: visible;

opacity: 1;

display: block;

}

ul li ul li {

clear: both;

width: 100%;

}

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

Проблема

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

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

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

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

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

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

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

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

ul li:hover > ul,

ul li:focus-within > ul,

ul li ul:hover {

visibility: visible;

opacity: 1;

display: block;

}

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

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

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

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

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

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

a:hover, a:focus { … }

a:hover,

a:focus {

…

}

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

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

li:hover,

li:focus-within {

…

}

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

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

li:focus-within a {

outline: none;

}

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

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

Что насчет ARIA?

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

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

<ul>

</ul>

</li>

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

</ul>

</nav>

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

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

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

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

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

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

Автор: Una Kravets

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

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

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

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

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

PSD to HTML

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

Смотреть

Выпадающие меню · Bootstrap на русском

Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.

Содержание

Примеры

Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в .dropdown, или другой элемент, который заявляет, position: relative;. Раскрывающиеся списки могут быть вызваны из <a> или <button> элементы, чтобы лучше соответствовать вашим потенциальным потребностям.

Одиночная кнопка выпадающего меню

Ни один .btn можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с <button> элементы:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

И с <a> элементами:

<div>
  <a href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

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

<!-- Пример одной кнопки опасности - >
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Split кнопка с выпадающим меню

Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением .dropdown-toggle-split для правильного шрифта выпадающего каре.

Мы используем эту экстра-класса, чтобы уменьшить горизонтальную padding по обе стороны от каретки на 25% и удалите margin-left, который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.

<!-- Пример сплит опасности - >
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Изменение размера

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

<!-- Большие группы (кнопка по умолчанию и сплит) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Небольшие группы (кнопка по умолчанию и сплит) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

Вариант списка сверху

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

<!-- Кнопка по умолчанию dropup -->
<div>
  <button type="button">Dropup</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Ссылки выпадающего меню -->
  </div>
</div>

<!-- Кнопка сплит dropup -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Ссылки выпадающего меню -->
  </div>
</div>

Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать <button> элементы в раскрывающихся списках, а не просто <a>ы.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

Внимание! меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.

This dropdown’s menu is right-aligned

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    This dropdown's menu is right-aligned
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

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

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

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

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Добавить .disabled для пунктов в раскрывающемся меню стиль их как отключенные.

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

Использование

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

На мобильных устройствах, открывая выпадающий добавляет .dropdown-backdrop как площадь нажатия для закрытия выпадающего меню При нажатии за меню требование для правильной поддержки iOS. Это означает, что переход от открытого выпадающего меню в другое меню требуется дополнительное нажатие на мобильный.

Примечание: data-toggle="dropdown" атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.

С помощью данных атрибутов

Добавить data-toggle="dropdown" на ссылку или кнопку для переключения в меню.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JavaScript

Вызвать меню через JavaScript:

$('.dropdown-toggle').dropdown()

data-toggle="dropdown" еще требуется

Независимо от того, вызываете ли вы свой выпадающий список через JavaScript или вместо этого используете data-api, data-toggle="dropdown" всегда должно присутствовать на спусковом элементе раскрывающегося меню.

Варианты

None.

Методы

Способ	Описание
`$().dropdown('toggle')`	Переключает меню данной панели навигации и вкладок навигации.

События

Все выпадающие события обстреляли .dropdown-menu’родительский элемент S и relatedTarget свойство, значением которого является переключение элемента привязки.

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // сделать что-то...
})

Многоуровневое выпадающее JavaScript меню | Java Script | Статьи | Программирование Realcoding.Net

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

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

Хэш с исходными данными

Задачу будем решать последовательно. Сначала определимся с форматом входных данных, а имеено: каким должен быть хэш?
Наиболее простой и понятный синтаксис такой (JSON — JavaScript Objecj Notation):

• Код JavaScript

var menuArray = { '1.html' : ["Мониторы", { '5.html' : ["15 дюймов"], '6.html' : ["17 дюймов"], '7.html' : ["19 дюймов"], '8.html' : ["21 и более дюймов"] }], '2.html' : ["Жесткие диски", { '9.html' : ["40-80 Гб"], '10.html' : ["120-160 Гб"], '11.html' : ["180-250 Гб"], '12.html' : ["300-500 Гб"], '13.html' : ["более 500 Гб"] }], '3.html' : ["Процессоры", { 'proc=amd' : ["AMD", { '14.html' : ["Athlon"], '15.html' : ["Barton"], '16.html' : ["Sempron"] }], 'proc=intel' : ["Intel", { '17.html' : ["Pentium"], '18.html' : ["Celeron"] }] }], '4.html' : ["Бонус-карта"] }

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

Такой объект очень легко сформировать на сервере, обработав результаты выборки из БД.

Функции и переменные для формирования меню

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

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

• Код JavaScript


var menuWaitTimer =
 {};
var menuOpenedCount =
 0;
function drawJSMenu(containerId, 
 hash, path) {
      
      var commonClassName =
 "common";
      var parentClassName =
 "parent";
      var levelClassPrefix =
 "level_";
      var menuWaitInterval =
 500; 
      
      var container = 
 document.getElementById(containerId);
      var html = _class
 = mouseOverOut = id
 = "";
      var i;
      var idArray =
 []
      
      
      
      var cicleFunc =
 function(code, hash, 
 level, parentId) {
            if (typeof 
 level != "undefined"
 && level !=
 1) code
 += "<span>n";
            for (i
 in hash)
 {
                  var randId =
 parseInt(Math.random() 
 * 1e10).toString()
 + parseInt(Math.random() 
 * 1e10);
                  _class = 
                        ((typeof hash[i][1]
 != "undefined") 
 ? parentClassName : commonClassName)
 + 
                        " "
 + levelClassPrefix + 
 level;
                  if (typeof 
 hash[i][1]
 != "undefined")
 {
                        id =
 "";
                        idArray.push(randId);
                  } else 
 id = 0;
                  code +=
 "<a" +
 (id ? id : "")
 + " href='" + 
 path + i +
 "'>" + hash[i][0]
 + "</a>n";
                  if (typeof 
 hash[i][1]
 != "undefined") 
 code += cicleFunc(html, 
 hash[i][1], 
 level+1, randId);
            }
            if (typeof 
 level != "undefined"
 && level !=
 1) code
 += "</span>n";
            return code;
      }
      
      html = cicleFunc(html, 
 hash, 1);
      container.innerHTML = html;
      
      for (i
 = 0; i < 
 idArray.length; i++) {
            document.getElementById("a"
 + idArray[i]).onmouseover
 = function()
 {
                  menuOpenedCount++;
                  var absId =
 this.id.substring(1,
 this.id.length);
                  document.getElementById("b"
 + absId).style.display
 = "";
            }
            document.getElementById("a"
 + idArray[i]).onmouseout
 = function()
 {
                  menuOpenedCount--;
                  var absId =
 this.id.substring(1,
 this.id.length);
                  if (typeof 
 menuWaitTimer[absId]
 == "undefined"
 || menuWaitTimer[absId]
 == null)
 {
                        menuWaitTimer[absId]
 = setInterval("hideJSMenu('"
 + absId +
 "')", menuWaitInterval);
                  }
            }
            document.getElementById("b"
 + idArray[i]).onmouseover
 = function()
 {
                  menuOpenedCount++;
                  var absId =
 this.id.substring(1,
 this.id.length);
                  if (typeof 
 menuWaitTimer[absId]
 != "undefined")
 {
                        clearInterval(menuWaitTimer[absId]);
                        menuWaitTimer[absId]
 = null;
                  }
            }
            document.getElementById("b"
 + idArray[i]).onmouseout
 = function()
 {
                  menuOpenedCount--;
                  var absId =
 this.id.substring(1,
 this.id.length);
                  if (typeof 
 menuWaitTimer[absId]
 == "undefined"
 || menuWaitTimer[absId]
 == null)
 {
                        menuWaitTimer[absId]
 = setInterval("hideJSMenu('"
 + absId +
 "')", menuWaitInterval);
                  }
            }
      }
}

function hideJSMenu(id)
 {
      if (menuOpenedCount 
 <= 0)
 {
            menuOpenedCount =
 0;
            if (typeof 
 menuWaitTimer[id]
 != "undefined")
 {
                  clearInterval(menuWaitTimer[id]);
                  menuWaitTimer[id]
 = null;
            }
            if (document.getElementById("b"
 + id))
 {
                  document.getElementById("b"
 + id).style.display
 = "none";
            }
      }
}

Замечание

Работоспособность скрипта проверена в:
— IE 6;
— Mozilla Fifefox 1.5;
— Opera 9.2;

Автор: Александр Бурцев, http://fastcoder.org/

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

Эта страница содержит код копирования / вставки для создания раскрывающегося меню JavaScript (или «Меню перехода»). В этом меню используются элементы формы HTML и JavaScript, чтобы обеспечить быстрое и гибкое меню перехода.

<сценарий> function jumpto (x) { если (документ.form1.jumpmenu.value! = «null») { document.location.href = x } }

Выпадающие меню, подобные этому, иногда называют «меню перехода», потому что оно «перескакивает» на выбранный URL-адрес, как только вы делаете выбор.(В других раскрывающихся меню необходимо нажать кнопку «Перейти» после того, как вы сделали свой выбор — это безопасный путь, если вы беспокоитесь о пользователях, у которых не включен JavaScript).

Расшифровка кода

Приведенный выше код можно разделить на две части: код JavaScript и код HTML. Здесь они разделены:

JavaScript

Этот код JavaScript состоит из функции, которую мы назвали jumpto .Эта функция использует document.location.href для загрузки URL-адреса, предоставленного меню перехода (которое хранится в параметре x ). Он принимает параметр с именем x , который является значением, которое мы передаем, когда вызываем функцию в нашем HTML. В следующем коде я изменил имя формы на form2 , чтобы избежать конфликта с приведенным выше примером (в котором используется form1 ). Вы можете называть свою форму как угодно.

HTML

Часть HTML — это то, что отображает фактическое раскрывающееся меню, которое в данном случае является элементом HTML <значение параметра = https: // www.quackit.com/database/tutorial/> Учебное пособие по базе данных

И вот оно — ваше собственное раскрывающееся меню JavaScript!

`последних бесплатных выпадающих меню на JavaScript и CSS`

Создайте Stripe.com, как меню навигации, используя чистый CSS / CSS3.

 ДемоСкачать  Теги: выпадающее меню, мегаменю Плагин для навигации на обычном JavaScript, который помогает создавать в веб-приложении адаптивную, анимированную, доступную навигацию в виде аккордеона / раскрывающегося списка.
 ДемоСкачать  Теги: меню аккордеона, раскрывающееся меню, адаптивное меню Анимированное выпадающее мега-меню, которое анимирует пункты меню при переключении между навигационными ссылками.На основе навигации по заголовку Stripe.com.
 ДемоСкачать  Теги: выпадающее меню, мегаменю Красивый, анимированный, многоуровневый компонент мегаменю с выпадающим списком, созданный с использованием вложенных списков HTML и чистого CSS.
 ДемоСкачать  Теги: выпадающее меню, мегаменю Доступный, совместимый с WCAG, полностью отзывчивый и удобный для мобильных устройств компонент раскрывающейся панели навигации, написанный на чистом JavaScript.
 ДемоСкачать  Теги: раскрывающееся меню, адаптивное меню Адаптивная система навигации, которая сворачивает элементы горизонтального многоуровневого меню в удобную для мобильных устройств боковую панель навигации с раскрывающимися списками на мобильном устройстве.
 ДемоСкачать  Теги: раскрывающееся меню, адаптивное меню Оптимизированное для SEO, красивое многоуровневое (вложенное) раскрывающееся меню навигации, созданное с использованием чистого CSS и неупорядоченного списка HTML.
 ДемоСкачать  Теги: раскрывающееся меню menu.css — это крошечная библиотека CSS для создания многоуровневых (до 4) горизонтальных выпадающих меню или вертикально расширяющихся меню без какого-либо JavaScript.
 ДемоСкачать  Теги: раскрывающееся меню Menue — это гибкая, многоуровневая, кроссплатформенная выпадающая система навигации за пределами холста как для настольных компьютеров, так и для мобильных устройств.
 ДемоСкачать  Теги: раскрывающееся меню, мобильное меню, меню вне холста, адаптивное меню dropmic — это крошечная библиотека JS с нулевой зависимостью, которая добавляет минимальное чистое раскрывающееся / всплывающее меню к любому элементу при запуске.
 ДемоСкачать  Теги: раскрывающееся меню, раскрывающееся меню Выпадающее меню только для CSS 
   Этому сообщению много дней назад.
 Как человек, который в основном справляется с написанием Javascript, я склонен смотреть на вещи с точки зрения «Готов поспорить, я мог бы сделать это с помощью CSS». В этом посте я покажу вам, как вы можете сделать больше с помощью CSS и отказаться от JavaScript.
 Раньше в моей карьере разработчика я сильно полагался на jQuery, чтобы получить то, что мне нужно. В такой ситуации я бы, вероятно, использовал функцию  slideDown ()  или что-то подобное.
 Теперь мы используем простой старый ванильный JS, чтобы получить то, что нам нужно.Позвольте мне показать вам, как сделать довольно красивую раскрывающуюся навигацию, используя в основном CSS. Секрет перехода на максимальную высоту.
 См. Перо
 Простое раскрывающееся меню Nav с переходом css от Теда Крюгера (@PhiloBeddoe)
 на CodePen.
 Обратите внимание, что в приведенном выше примере, когда вы нажимаете «Выпадающее действие», появляется раскрывающееся меню. Раскрывающийся список имеет максимальную высоту : 0;  по умолчанию. После щелчка мы добавляем класс  active  в раскрывающийся список и меняем свойство  max-height .Я установил его как  100vh , когда он активен. Помните, что это всего лишь  max-height , поэтому я говорю, что раскрывающийся список будет не больше высоты окна. Отсюда вы можете добавить несколько стилей переполнения, чтобы пользователи могли прокручивать, чтобы они видели весь контент в раскрывающемся списке, или вы можете изменить номер. Важная часть состоит в том, что число должно быть конкретным. Надеюсь, это то, что мы увидим в будущем для CSS, но на данный момент это  max-height .
 Чтобы переход был приятным и плавным при открытии и закрытии меню, мы добавим  easy-in-out  для нашей функции времени перехода  . Код будет выглядеть так:
  переход: max-height var (- speed) легкость входа-выхода;
  
 Примечание: для параметра  var (- speed)  установлено значение  0,3 с . Функция тайминга — это ключ к приятной анимации меню при его открытии и закрытии. Если бы мы установили  easy-in , то он открывался бы нормально, но «щелкал», когда вы закрывали меню.
 Обратите внимание, что используется только JS для переключения класса в раскрывающемся списке и раскрывающемся списке. Это, конечно, довольно легко, так что это заставило меня задуматься … Можно ли сделать так, чтобы это раскрывающееся меню работало без javascript и использовало только CSS? Давай попробуем. Я думаю, это было бы круто.
 Когда я думал о том, как бы это сделать, первое, что я подумал, — это установить флажок. Кажется, это единственный способ, которым вы все еще можете настроить таргетинг на состояние в своем коде и запустить переход на максимальную высоту вашего меню.
 Я не уверен в доступности того, чтобы ваше мобильное меню запускалось с помощью флажка, а не кнопки, но на самом деле я не об этом пытаюсь донести. Я пытаюсь сказать, что мыслите нестандартно и раздвиньте границы того, что вы можете делать с помощью CSS. Вы можете использовать переходы CSS по высоте, чтобы получить тот же вид, что и при использовании  .slideDown ()  (привет всем моим разработчикам jQuery).
 Посмотрите рабочий пример ниже.
 См. Перо
 css только раскрывающаяся навигация от Теда Крюгера (@PhiloBeddoe)
 на CodePen.
 CSS здесь может показаться немного более сложным относительно  &: checked + label + .dropdown , но это необходимо. Также обратите внимание на структуру HTML. Вы должны быть уверены, что  label  и  site-nav  являются братьями и сестрами. Это упрощает нацеливание на навигацию по сайту, когда выбрано раскрывающееся действие. Кроме того, вы не хотите, чтобы ваше меню было обернуто этикеткой. Мы также можем использовать эту структуру в раскрывающемся меню для наших подменю.
  
  
  
     Учиться 
  
  
    
       Люди 
    
    
       Адреса 
    
    
       Вещи 
    
  

  
 Я думаю, что это довольно круто, и я надеюсь, что вы тоже.Даже если вы этого не сделаете, все в порядке. Я просто счастлив, что вы дошли до этого места в своем посте. В любом случае, я думаю, что важно раздвинуть границы того, что, по нашему мнению, способно к CSS или любому другому языку в этом отношении. Выйдите из своей зоны комфорта и попробуйте что-нибудь новое.
  Опубликовано 11 декабря 2020 г., автор:  раскрывающихся меню без Javascript | Go Make Things 
  21 марта 2019    ЭЙ!  Эта реализация НЕ рекомендуется. У него есть некоторые проблемы с доступностью, о которых я не знал, когда писал его.
 В прошлом месяце мы рассмотрели, как создавать аккордеоны без JavaScript, используя собственные элементы  
  и   .
 Сегодня я хотел показать вам, как вы можете использовать те же элементы для создания раскрывающихся меню без JavaScript.
 Начальная точка 
 Начнем с основного меню навигации.
  

  Здесь должен быть раскрывающийся список  
  Здравствуйте!  
  Мир  

  
 С помощью этого CSS мы сделали список встроенным в навигацию.
  .my-nav {
стиль списка: нет;
маржа слева: -0,5em;
крайнее правое: -0,5em;
отступ: 0;
}

.my-nav> li {
дисплей: блок;
маржа слева: 0,5em;
крайнее правое: 0,5em;
}

@media (min-width: 40em) {
.my-nav> li {
дисплей: встроенный блок;
}
}

/ **
 * @bugfix Запретить webkit удалить семантику списка
 * 1. Добавьте неразрывный пробел
 * 2. Убедитесь, что это не портит поток DOM.
 * /
.my-nav> li: before {
содержание: "\ 200B"; / * 1 * /
позиция: абсолютная; / * 2 * /
}  
 Вот демонстрация.
 Добавление раскрывающегося списка 
 Для начала заменим раскрывающуюся ссылку:
   Здесь должен быть раскрывающийся список   
 С элементом  
  и   . Мы также добавим под ним список элементов.
 Для удобства добавим класс  .dropdown  к элементу  
 .
  


<подробности>
 Здесь есть раскрывающиеся элементы 

  Привет,  
  Вселенная  



  Здравствуйте!  
  Мир  

   Теперь у нас есть базовая функция отображения / скрытия.Вот обновленная демонстрация.
 Как видите, он работает, но выглядит некорректно и искажает форматирование других элементов.
 Стилизация раскрывающегося списка 
 Чтобы исправить это, давайте добавим немного стиля.
 Во-первых, мы убедимся, что элемент  
  выглядит как интерактивный элемент, сделав его синим, как наши ссылки, и отобразив указатель.
 Мы сделаем сам элемент  .dropdown   встроенным блоком  и зададим ему относительное позиционирование.Это позволит нам разместить контент под ним, как раскрывающийся список.
  / **
 * Стиль интерактивного текста
 * Добавьте свои собственные стили, чтобы они соответствовали другим элементам навигации
 * /
.dropdown> summary {
курсор: указатель;
/ * Настроить отсюда вниз * /
цвет синий;
}

/ **
 * Разместите раскрывающееся содержимое
 * /
.падать {
дисплей: встроенный блок;
положение: относительное;
}  
 Теперь мы можем стилизовать сам выпадающий список.
 Мы зададим ему фон и рамку, чтобы он выглядел как прямоугольник.Мы также добавим  минимальной ширины , чтобы он не был слишком маленьким.
 И, что наиболее важно, мы дадим ему абсолютное позиционирование и поместим его чуть ниже . Dropdown , чтобы он выглядел как раскрывающееся меню свойств. Мы также добавим z-index   из  999 , чтобы он располагался поверх других элементов, а не был скрыт.
  / **
 * Стиль выпадающего списка
 * /
.dropdown> ul {
цвет фона: #ffffff;
граница: сплошная 1px #cccccc;
радиус границы: 0.25em;
минимальная ширина: 19em;
позиция: абсолютная;
верх: 1.5em;
z-индекс: 999;
}  
 Это здорово, но в самом списке все еще есть пункты. Мы также должны добавить  list-style: none . Это требует, чтобы мы также добавили исправление ошибки для браузеров webkit, которое удаляет семантику списка, используемую вспомогательными технологиями.
  / **
 * Стиль выпадающего списка
 * /
.dropdown> ul {
цвет фона: #ffffff;
граница: сплошная 1px #cccccc;
радиус границы: 0,25 м;
стиль списка: нет;
маржа: 0;
отступ: 0;
минимальная ширина: 19em;
позиция: абсолютная;
вверху: 1.5em;
z-индекс: 999;
}

/ **
 * @bugfix Запретить webkit удалить семантику списка
 * 1. Добавьте неразрывный пробел
 * 2. Убедитесь, что это не портит поток DOM.
 * /
.dropdown> ul> li: before {
содержание: "\ 200B"; / * 1 * /
позиция: абсолютная; / * 2 * /
}  
 Вот демонстрация стиля.
 Совместимость с браузером 
 Элемент  
  не поддерживается в IE или Edge. В этих браузерах раскрывающееся содержимое всегда будет видно.
 Edge переходит в режим мигания, поэтому в будущем будет добавлена поддержка. Еще есть полифилл.
 34 меню JavaScript 
 Коллекция бесплатных  ванильных меню навигации JavaScript  примеров кода:  отзывчивый, анимированный, выпадающий, липкий и полностраничный .
 Меню CSS
 Меню jQuery
 Меню React
  
 О коде 
 Адаптивная навигация с анимацией 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: font-awesome.css
 Автор 
 Джозеф Мава
  7 февраля 2020 
 О коде 
 Расширяемое меню 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Автор 
 alphardex
  29 января 2020 
 Сделано с 
 HTML / CSS / JS (TypeScript)
 О коде 
 Подчеркнутый заголовок 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 Автор 
 alphardex
  28 января 2020 
 Сделано с 
 HTML / CSS (SCSS) / JS (TypeScript)
 О коде 
 Меню мигающего текста в шахматном порядке 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 Автор 
 Габриэле Корти
  22 января 2020 
 О коде 
 SVG-навигация 
 Поработайте с синтаксисом SVG, элементом  textPath  и атрибутом  startOffset  для создания интригующей навигации.Анимировано с помощью anime.js.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: anime.js
 Автор 
 Киараш Заринмехр
  20 января 2020 
 О коде 
 Кусочки бумаги Меню навигации 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: gsap.js
 Автор 
 Сикрити Дакуа
  19 января 2020 
 О коде 
 Полностраничная навигация 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: gsap.js
 Автор 
 Янник Брандт
  18 января 2020 
 О коде 
 Навигация по оконным шторам 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Автор 
 Джон Кантнер
  15 января 2020 
 О коде 
 Анимация наложения навигации на всю страницу 
 Концепция навигационного меню, в котором три полосы заполняют экран.Это происходит так, как будто блоки складываются. При сворачивании меню последовательность меняется на обратную.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Автор 
 Леннарт Хасе
  14 января 2020 
 О коде 
 Полностраничная навигация 
 Создал полностраничную навигацию с использованием аниме.js и некоторые SVG.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: anime.js
 Автор 
 Нильс Воогт
  14 января 2020 
 О коде 
 Флип-навигация 
 Хотя немного запаздывает при первом переворачивании …
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 О коде 
 Sticky ScrollSpy Navigation 
 Плавная прокрутка с липкой прокруткой.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 Автор 
 Олувадаре Сейи
  4 января 2020 г. 
 О коде 
 CSS Nav Анимация 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: font-awesome.css
 Автор 
 Крис Вайссенбергер
  27 ноября 2019 
 О коде 
 Заголовок Nav Overflow на Mobile Nav 
 Идея этого заголовка навигации заключается в перемещении элементов, которые больше не помещаются в панель навигации / мобильную навигацию. Уловка заключается в том, чтобы задать заголовку заданную высоту и позволить элементам навигации заголовка обертываться, но скрыть переполнение. Затем используйте JavaScript, чтобы проверить все элементы, которые были упакованы, и показать их в ящике / мобильной навигации.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: resizeobserver.js
 О коде 
 Навигационное меню с круговой анимацией отображения 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 Автор 
 Франческа Ваго
  26 февраля, 2019 
 О коде 
 Интерактивное круговое меню 
 Интерактивное круговое меню в HTML, CSS и JS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: font-awesome.css
 Автор 
 Ибн Аль-Хорезми
  14 февраля 2019 
 Сделано с 
 HTML (мопс) / CSS (SCSS) / JS
 О коде 
 Креативное гамбургерное меню 
 Гамбургер-меню с использованием нового свойства  clip-path  CSS.
 Совместимые браузеры: Chrome, Edge (частично), Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Автор 
 Андрей Шарапов
  1 февраля 2019 г. 
 Сделано с 
 HTML (мопс) / CSS (SCSS) / JS
 О коде 
 Хороший эффект для навигации 
 Отличный эффект наведения и щелчка для панели навигации или другого.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 Автор 
 Хулио Сото
  16 января 2019 
 О коде 
 Навигация с SVG 
 SVG используется для анимации панели навигации. Эффекты срабатывают при наведении курсора и нажатии.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: tweenmax.js
 Автор 
 Такане Ичиносе
  9 ноября 2018 
 О коде 
 Меню ленты 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 О коде 
 Меню с желе 
 Концепция меню Jelly в HTML, CSS и JS.
 Совместимые браузеры: Chrome, Edge (частично), Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 Автор 
 Йов Ангелевски
  31 июля 2018 г. 
 О коде 
 Кнопки навигации 
 Кнопки навигации пользовательского интерфейса.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: font-awesome.css
 Автор 
 Лина Лаванья
  26 июня 2018 
 О коде 
 Код меню 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Автор 
 Райан Маллиган
  26 июня 2018 
 О коде 
 Панели меню сетки CSS 
 Анимированные панели меню на основе сетки CSS.Нажмите на переключатель в верхнем левом углу, чтобы увидеть его в действии.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Сделано с 
 HTML
 CSS
 JavaScript (jquery.js)
 О коде 
 Раскрывающееся меню 
 Пользовательское раскрывающееся меню.
 Автор 
 Ферран Буйреу
  17 февраля 2018 
 Сделано с 
 HTML
 CSS / SCSS
 JavaScript / Babel (jquery.js)
 О коде 
 Адаптивная боковая панель / панель навигации 
 Вертикальная / горизонтальная адаптивная боковая панель / навигационная панель.
 Автор 
 Кайл Брамм
  6 февраля 2018 г. 
 Сделано с 
 HTML
 CSS / SCSS
 JavaScript / Babel (classList.js, smoothscroll.js)
 О коде 
 Навигация вне холста с переходами между страницами 
 Больше экспериментов с переходами и навигацией.Решил добавить немного и для переходов между страницами.
 Автор 
 азуауи Мохамед
  13 декабря 2017 г. 
 Сделано с 
 HTML
 CSS (bootstrap.css, font-awesome.css)
 JavaScript (jquery.js, bootstrap.js)
 О коде 
 Шаблон боковой панели 
 Шаблон боковой панели с раскрывающимся меню на основе Bootstrap.
 Автор 
 МАХЕШ АМБУРЕ
  7 сентября 2017 г. 
 Сделано с 
 HTML
 CSS
 JavaScript (jquery.js)
 О коде 
 Индикаторы боковой панели 
 Боковое меню с индикаторами.
 Автор 
 Хесус Кастро
  1 сентября 2017 г. 
 Сделано с 
 HTML
 CSS / SCSS
 JavaScript / Babel (jQuery.js, TweenMax.js)
 О коде 
 Круговая навигация 
 Экспериментальное меню навигации для технического сайта. Создан с использованием анимационной платформы GreenSock и SVG.
 Автор 
 Микаэль Айналем
  23 августа 2017 
 Сделано с 
 HTML
 CSS
 JavaScript (anime.js)
 О коде 
 Подменю Развернуть 
 Веселая анимация, расширяющая подменю на панели инструментов в веб-приложениях.Переводит, исчезает и изменяет значки SVG. Вдохновлен Вирджилом Панасом, больше переходов подменю на ведение мяча.
 Автор 
 Колин Хорн
  3 августа 2017 г. 
 Сделано с 
 HTML
 CSS / SCSS
 JavaScript (jquery.js)
 О коде 
 Кнопка вкладки «Морфинг» со списком 
 Кнопка «Морфинг» с раскрывающимся списком под ней.
 Автор 
 Гленн МакКомб
  20 июня 2017 г. 
 О коде 
 Концепция кругового / кругового меню 
 Экспериментируем с радиальным меню. Вдохновленный радиальными меню Rust, которые можно раскрыть по щелчку правой кнопкой мыши. Измените количество пунктов меню в правом нижнем углу, чтобы увидеть, как оно работает с другим количеством пунктов меню.
 Сделано с 
 HTML
 CSS
 JavaScript (jquery.js)
 О коде 
 Раскрывающееся меню 
 Красивое раскрывающееся меню.
 Выпадающее меню навигации, доступное только для CSS 
  Это седьмой пост в серии, посвященной современным решениям CSS для проблем, которые я решал за последние 13 с лишним лет работы фронтенд-разработчиком .
 Этот метод исследует использование:
 Анимация с переходом CSS   и преобразование  
 Использование : фокус в псевдоклассе 
 CSS-сетка для позиционирования
 техника динамического центрирования
 Рекомендации по доступности раскрывающихся меню
 Если вы когда-нибудь вырывались из головы, имея дело с концепцией «намерения наведения», то это обновление для вас!
 Прежде чем мы зайдем слишком далеко, хотя наша методика на 100% использует только CSS, необходимо добавить некоторый Javascript для более полного доступа.Также существует полифилл, необходимый для ключевой функции, чтобы эта функция работала — : focus-within  — для наиболее надежной поддержки. Но мы все еще значительно улучшились по сравнению с тем временем, когда нам требовались один или несколько подключаемых модулей jQuery для создания визуальных эффектов.
  Обновление специальных возможностей — 18.08.20 : Огромное спасибо Майклу Фэирчайлду из Deque (и создателю превосходного ресурса a11ysupport.io) за тестирование оригинального решения с использованием различных вспомогательных технологий. Метод только с CSS требует некоторого Javascript для полного соответствия WCAG 2.1. В частности, необходимо использовать javascript, чтобы предлагать способ закрытия меню без использования мыши или вкладки (например, клавиша выхода) для соответствия критерию успеха 1.4.13. Майкл указал на эту демонстрацию WAI-ARIA Authoring Practices, которая предоставляет дополнительную информацию о необходимых функциях Javascript. Это настоятельно рекомендуемые дополнения для вашего окончательного производственного решения.
 Если вы не использовали Sass, вам может потребоваться пять минут, чтобы понять синтаксис вложенности Sass, чтобы легче всего понять приведенные примеры кода.
 Базовая навигация HTML # 
 Мы будем улучшать это по мере продолжения, но вот наша стартовая структура:
  Привет!  Доступна ранняя регистрация на мой предстоящий июльский семинар с Smashing Conference — Level-Up With Modern CSS
   
  
   О программе  
 
  
  
  
   Пончики  
 
   Кексы  
 
   Шоколад  
 
   Бонбоны  
 
 
 
 
 
   Заказать  
 
 
 
 < / nav>  
 Если на минуту заглянуть в кнопку  , это семантический стандарт для навигационных ссылок.Эта структура гибкая, чтобы жить где угодно на вашей странице, поэтому она может быть оглавлением на боковой панели так же легко, как и основная навигация.
 Прямо за воротами мы реализовали несколько функций специально для обеспечения доступности:
  aria-label  на  , чтобы помочь определить его цель, когда вспомогательные технологии используются для навигации по странице по ориентирам
 Использование кнопки   в качестве фокусируемого, обнаруживаемого элемента для открытия раскрывающегося списка
  aria-control  на .dropdown__title , который ссылается на идентификатор  .dropdown__menu , чтобы связать его с меню вспомогательных технологий
  aria-extended  на кнопке  , которую в вашем окончательном решении необходимо переключать через Javascript, как указано в демонстрации, упомянутой в начале этой статьи
 Как отметил Майкл, использование кнопки  и элемента  также позволяет пользователям Dragon Naturally Speaking сказать что-то вроде «нажмите кнопку», чтобы открыть меню.
 Наш (в основном) начальный вид по умолчанию выглядит следующим образом:
 Начальные стили навигации # 
 Сначала мы дадим несколько стилей контейнера для  nav  и определим его как контейнер сетки. Затем мы удалим стили списка по умолчанию из  nav ul  и  nav ul li .
  nav {
 background-color: #eee; 
 набивка: 0 1бэр; 
 дисплей: сетка; 
 мест размещения: центр;  ul {
 стиль списка: нет; 
 маржа: 0; 
 отступ: 0; 
 дисплей: сетка; 
  li {
 заполнение: 0; 
} 
} 
 } 
  
 Мы потеряли иерархическое определение, но можем начать возвращать его со следующего:
  nav {> ul {
 grid-auto-flow: столбец; 
 > li {
 маржа: 0 0.5рем; 
} 
} 
} 
  
 Используя селектор дочернего комбинатора > , мы определили, что верхний уровень  ul , который является прямым потомком  nav , должен переключить его  grid-auto-flow  на  столбец , который эффективно обновляет его до быть вдоль оси  x . Затем мы добавляем маржу к элементам верхнего уровня  li  для большей четкости. Теперь будущие выпадающие элементы появляются под меню «Сладости» и более четко являются его дочерними элементами:
 Затем мы сначала добавим немного стиля ко всем ссылкам, а также к .dropdown__title , а затем только ссылки верхнего уровня в дополнение к  .dropdown__title . Здесь также мы очищаем собственные стили браузера, унаследованные для элементов  button .
  
 .dropdown__title {
 background-color: transparent; 
 граница: отсутствует; 
 семейство шрифтов: наследование; 
}  nav {
> ul {
 > li {
 a, 
 .dropdown__title {
 text-decoration: none; 
 выравнивание текста: по центру; 
 дисплей: строчно-блочный; 
 цвет: синий; 
 размер шрифта: 1.125rem; 
} 
  
> a, 
 .dropdown__title {
 padding: 1rem 0.5rem; 
} 
 } 
} 
} 
  
 Базовые стили выпадающего списка # 
 До сих пор мы полагались на селекторы элементов, но мы добавим селекторы классов для раскрывающегося списка, поскольку их может быть несколько в данном списке навигации.
 Сначала мы изменим стиль  .dropdown__menu  и его ссылки, чтобы помочь более четко идентифицировать его, когда мы работаем с позиционированием и анимацией:
 .раскрывающийся список {
 позиция: относительная;  .dropdown__menu {
 background-color: #fff; 
 радиус границы: 4 пикселя; 
 box-shadow: 0 0,15em 0,25em rgba (черный, 0,25); 
 отступ: 0.5em 0; 
 мин-ширина: 15 каналов; 
  a {
 цвет: # 444; 
 дисплей: блочный; 
 отступ: 0,5 м; 
} 
} 
} 
  
 Одна из очевидных проблем заключается в том, что  .dropdown__menu  влияет на контейнер  nav , что видно по серому фону  nav  вокруг раскрывающегося списка.
 Мы можем начать исправлять это, добавив  position: absolute  к  .dropdown__menu , что исключает его из обычного потока документов:
 Вы можете видеть, что он выровнен по левому краю и ниже родительского элемента списка. В зависимости от вашего дизайна это может быть желаемое место.
 Мы собираемся применить трюк с центрированием, чтобы выровнять центральное меню с элементом списка:
 . Dropdown__menu { позиция: абсолютная; 
  
 top: calc (100% - 0.25 бэр); 
 осталось: 50%; 
 преобразование: translateX (-50%); 
} 
  
 Магия этого метода центрирования заключается в том, что меню может иметь любую ширину или даже динамическую ширину, и оно будет центрироваться соответствующим образом.
 Стили раскрытия раскрывающегося списка # 
 Есть два основных триггера, которые мы хотим использовать для открытия меню: : hover  и : focus .
 Однако традиционный : focus  не будет сохранять открытое состояние раскрывающегося списка.После того, как исходный триггер теряет фокус, фокус клавиатуры все еще может перемещаться по раскрывающемуся меню, но визуально меню исчезнет.
: фокус в пределах  # В ближайшее время появится псевдокласс : focus-within , и это именно то, что нам нужно, чтобы сделать это раскрывающимся списком только для CSS. Как уже упоминалось во вступлении, для поддержки IE 
 Из MDN я выделил курсивом часть, от которой мы будем извлекать выгоду:
 Псевдокласс : focus-within  CSS представляет элемент, получивший фокус  или содержащий элемент, получивший фокус .Другими словами, он представляет собой элемент, который сам соответствует псевдоклассу : focus   или имеет потомка, которому соответствует : focus  .
 Скрыть раскрывающийся список по умолчанию # 
 Прежде чем мы сможем раскрыть раскрывающийся список, нам нужно скрыть его, поэтому мы будем использовать скрытые стили в качестве состояния по умолчанию.
 Вашим первым инстинктом может быть  display: none , но это не позволяет нам изящно анимировать переход.
 Затем вы можете попробовать просто  opacity: 0 , который явно скрывает его, но оставляет после себя «призрачные ссылки», потому что элемент все еще имеет вычисленную высоту.
 Вместо этого мы будем использовать комбинацию непрозрачности  , преобразования   и видимости  :
  .dropdown__menu {
 преобразование: rotateX (-90deg) translateX (-50%); 
 transform-origin: центр вверху; 
 непрозрачность: 0,3; 
}  
 Мы добавляем непрозрачность, но не полностью до 0, чтобы позже включить немного более плавный эффект.
 И мы обновляем наше свойство  transform , чтобы включить  rotateX (-90deg) , который поворачивает меню в трехмерном пространстве на 90 градусов «назад».Это эффективно убирает высоту и создаст интересный переход на откосе. Также вы заметите свойство  transform-origin , которое мы добавляем для обновления точки, вокруг которой применяется преобразование, по сравнению с горизонтальным и вертикальным центром по умолчанию.
 Кроме того, для соответствия критерию успеха 1.3.2 ссылки должны быть скрыты от пользователей программ чтения с экрана до тех пор, пока они не отобразятся визуально. Мы обеспечиваем такое поведение, добавляя  visibility: hidden  (еще раз спасибо Майклу за этот совет!).
 Прежде чем мы сделаем раскрытие, нам нужно добавить свойство  transition . Мы добавляем его к основному правилу  .dropdown__menu , чтобы оно применялось как при включении, так и при выключении фокуса / наведения, иначе говоря, «вперед» и «назад».
  .dropdown__menu {
 переход: 280 мсек без задержки; 
}  
 Раскрытие раскрывающегося списка # 
 При всех этих предварительных настройках раскрытие раскрывающегося списка при наведении и фокусировке может быть выполнено так же кратко, как:
 .раскрывающееся меню { &: hover, 
 &: focus-within {
  .dropdown__menu {
 opacity: 1; 
 преобразование: rotateX (0) translateX (-50%); 
 видимость: видимая; 
} 
 } 
 } 
  
 Сначала мы инвертируем  visibilty  (иначе другие свойства не работали бы), а затем мы инвертировали  rotateX , сбросив его на 0, а затем доводим непрозрачность  до  до  1  для полная видимость.
 Вот результат:
 Свойство  rotateX  позволяет отображать меню, открывающееся сзади, а непрозрачность ,  просто делает переход в целом немного более мягким.
 Еще раз отметим, что для полной доступности Javascript должен полностью обрабатывать технические события, связанные с клавиатурой, которые не всегда запускают : focus . Это означает, что некоторые зрячие пользователи клавиатуры могут обнаружить раскрывающиеся ссылки, но без сгенерированного события : focus  они не увидят открывающееся раскрывающееся меню. Просмотрите демонстрацию w3c, чтобы узнать, как завершить включение Javascript в это решение.
 Обработка намерения зависания # 
 Если вы какое-то время занимались этим Интернетом, я надеюсь, что следующее заставит вас пойти
 Когда я впервые начал бороться с выпадающими меню, я создавал их в первую очередь для IE7.В большом проекте несколько членов команды спросили что-то вроде: «Можно ли остановить появление меню, если я просто прокручиваю меню или наводю указатель мыши на него?». Решением, которое я наконец нашел после долгого поиска в Google (включая попытки придумать правильную фразу, чтобы получить то, что я искал), был плагин hoverIntent jQuery.
 Мне нужно было это настроить, потому что, поскольку мы используем свойство  transition , мы также можем добавить очень небольшую задержку. В общем, это предотвратит запуск анимации раскрывающегося списка при наведении курсора мыши на «проезжающий».
 Порядок имеет значение, когда мы определяем все свойства перехода в одной строке, и второе числовое значение по порядку будет принято как значение задержки:
  .dropdown__menu {
 // ... существующие стили 
 переход: 280 мс все 120 мс замедление; 
}  
 Посмотреть результаты:
 Для вызова меню требуется довольно неторопливый наведение курсора, что мы можем условно предположить как намерение открыть меню. Задержка все еще достаточно короткая, чтобы ее нельзя было сознательно заметить до открытия меню, так что это победа!
 Вы все равно можете использовать Javascript для улучшения этого, особенно если он собирается запустить «мегаменю», которое будет более разрушительным, но это все еще довольно приятно.
 Намерение наведения — это одно, но на самом деле нам нужен дополнительный сигнал для пользователя о том, что в этом меню есть дополнительные параметры. Чрезвычайно распространенным условием является «каретка» или «стрелка вниз», имитирующая индикатор собственного элемента select.
 Чтобы добавить это, мы обновим стили  .dropdown__title . Мы определим его как контейнер  inline-flex , а затем создадим элемент : after , который использует трюк с границами для создания стрелки вниз. Мы используем тире  translateY () , чтобы оптически выровнять его с нашим текстом:
 .раскрывающийся список { .dropdown__title {
 display: inline-flex; 
 align-items: center; 
  &: после {
 content: ""; 
 бордюр: 0,35 брем твердый прозрачный; 
 border-top-color: rgba (синий, 0,45); 
 левое поле: 0,25em; 
 преобразование: translateY (0,15em); 
} 
} 
 } 
  
 Вот еще одно место, где в конечном итоге вам, возможно, придется улучшить с помощью Javascript.
 Чтобы он оставался только CSS и приемлемым для веб-сайтов, не относящихся к приложениям, вам необходимо применить  tabindex = "- 1"  к телу, эффективно разрешая любые щелчки за пределами меню, чтобы удалить фокус с него и позволить ему закрыть .
 Это немного растянуто — и это может немного расстраивать пользователей — поэтому вы можете улучшить это, чтобы скрыть при прокрутке с помощью Javascript, особенно если вы определяете  nav  для использования позиции : липкий  и прокрутите вместе с пользователем.
 Окончательный результат # 
 Вот окончательный результат с небольшим дополнительным стилем, включая стрелку для более наглядного соединения меню с элементом ссылки, настраиваемые состояния фокуса для всех навигационных ссылок и положение : липкое  на навигационной панели  :
 Стефани Эклс (@ 5t3ph)
 Выпадающая навигация в CSS и JavaScript 
 Перемещаемая ссылка, которая переключает видимость раскрывающегося списка.
 Зависимости 
 Все компоненты основаны на CodyFrame.
 Если вы используете этот компонент, вы также должны включить SCSS / JS следующих компонентов:
 Как записаться 
 Компонент  «Раскрывающийся список»  — это элемент навигации, содержащий список связанных ссылок, видимость которых контролируется триггером раскрывающегося списка (в отличие от компонента «Меню», который переключает видимость набора функций / кнопок).
 Часто используется для группировки и скрытия вторичной навигации (например,g., при использовании внутри компонента основного заголовка). Триггер — это сама ссылка: пользователь может щелкнуть любой элемент раскрывающегося списка и перейти на другую страницу.
 Вспомогательные технологии будут видеть этот компонент в виде списка ссылок. Атрибут  aria-label = "submenu"  используется для уведомления пользователя о переходе в подменю.
 ⚠️ Обязательно используйте подменю с осторожностью: каждый раз, когда вы создаете подменю (вложенный 
 ), вы заставляете пользователей с помощью вспомогательных технологий перемещаться по всем вашим подпунктам.Всплывающее раскрывающееся меню превращается в лабиринт.
 Этот компонент использует компонент «Диагональное перемещение», чтобы различать пользователей, пытающихся навести указатель мыши на раскрывающийся элемент, и пользователей, пытающихся перейти к содержимому подменю.
 Мобильные устройства № 
 Компонент «Раскрывающийся список» был разработан для отображения списка связанных ссылок только для пользователей с указывающим устройством (например, мышью).
 На сенсорных устройствах раскрывающаяся ссылка ведет себя как стандартная ссылка. Это предотвращает проблему двойного касания (первое касание -> раскрытие раскрывающейся ссылки; второе касание -> перенаправление пользователя на выбранную страницу).
 Если вы хотите, чтобы раскрывающийся список имел такое же поведение на сенсорных устройствах, вы можете удалить функцию указателя мультимедиа из файла стиля компонента:
  @media (pointer: fine) {// 👈 удалить указатель мультимедиа
  / * CSS-код * / // 👈 не удалять CSS-код
}  
.