Товаров: 0 (0р.)

Раскрывающееся при нажатии меню css: javascript — Как создать выпадающее меню при нажатии?

Содержание

Плавно открывающееся меню с помощью CSS

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





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


<nav>
	<ul>
		<li>
		<a href="#">пункт 1</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>
		<li>
		<a href="#">пункт 2</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>

	</ul>
</nav>

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


#slow_nav > ul{
	width: 500px;
	margin:25px auto 0;
}

#slow_nav > ul > li{
	list-style: none;
	display: inline-block;
	position:relative;
	padding:0;
}

#slow_nav a{text-decoration:none;}

#slow_nav > ul > li > a{
	font-size:18px;
	padding:5px;
	background-color:#333;
	color:#fff;
}

#slow_nav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	top:15px;
	font-size:15px;
	left:0;
	margin:0;
	padding:0;

/* Данные строки нужны для правильной работы анимации */
	max-height:0px;
	overflow:hidden;
	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.




 4s linear;
/* конец */
}

#slow_nav li:hover ul{
	max-height:300px;
}

#slow_nav li ul li{
	background-color:#333;
	border-bottom:1px solid #888;
}

#slow_nav li ul li:last-child{
	border-bottom:none;
}

#slow_nav li ul li a{
	padding:5px 12px;
	color:#fff;
	display:block;
}

#slow_nav li ul li:hover{
	background-color:#444;
}

#slow_nav li ul li:first-child{
	margin-top:25px;
	position:relative;
}

#slow_nav li ul li:first-child:before{
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#333;
	left:10px;
	top:-10px;
}

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

Первым делом это сама анимация. Нужный код выделен комментариев в коде — /* Данные строки нужны для правильной работы анимации */

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

max-height:0px; и прописываем свойство overflow:hidden;, чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition, которое совершит анимацию.


-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;

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


#slow_nav li:hover ul{
	max-height:300px;
}

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

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

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

WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

На этом все, спасибо за внимание. 🙂

Выпадающие элементы. Компоненты · 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] com">
  </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…
})

Выпадающие списки

Выпадающие списки переключаемы, контекстно перекрываются для отображения списков ссылок и многое другое. Они интерактивны с включенным плагином выпадающих списков 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="https://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>

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

<!-- 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 для правильного интервала вокруг выпадающей каретки.

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

Secondary 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" 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>

<!-- 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" 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 к родительскому элементу.

Split dropup Toggle Dropdown 
<!-- Default dropup button -->
<div>
  <button type="button">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>

<!-- 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>

должно было быть ссылкой, но это уже не так с 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 плагин выпадающего списка переключает скрытый контент (выпадающие меню) путем переключения класса .show на родительский элемент списка.

На мобильных устройствах при раскрытии выпадающего списка добавляется .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" присутствовал в элементе выпадающего элемента.

Опции

Нет.

Методы

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

События

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

Событие Описание
show.bs.dropdown Это событие срабатывает сразу после вызова метода экземпляра показа.
shown.bs.dropdown Это событие вызывается, когда выпадающий список становится видимым для пользователя (будет ждать переходов CSS, чтобы завершить).
hide.bs.dropdown Это событие вызывается немедленно при вызове метода hide instance.
hidden.bs.dropdown Это событие вызывается, когда раскрывающийся список закончил скрываться от пользователя (будет ждать переходов CSS, чтобы завершить). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Адаптивная навигация для мобильного сайта – возможные решения задачи — CMS Magazine

Введение

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

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

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

Сжатие

Самое простое решение — уменьшить все элементы сайта в масштабе.

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

Примеры

Дополнительные материалы

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

Блоки

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

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

Примеры

Дополнительные материалы

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

Очень часто в качестве элемента навигации используют стандартный для браузера выпадающий список. В основе метода лежит создание списка <select> из <UL>-списка, для чего нужен Javascript.

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

Примеры:

Дополнительные материалы

На маленьких экранах и экранах мобильных устройств эти плагины превращают любой <UL> или <OL>-список в список <select>:

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

С идеей выпадающего списка связано использование раскрывающегося меню, оформленного при помощи CSS.

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

Примеры

Дополнительные материалы

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

Вам нужны именно опытные разработчики? Предлагаем вам изучить рейтинг веб-студий от Рейтинга Рунета.

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

Меню, раскрывающееся со сдвигом контента

Аналогично раскрывающемуся меню, оформленному при помощи CSS, сдвигающая контент навигация скрывается и замещается кнопкой «Меню».

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

Примеры

Дополнительные материалы

Якорная ссылка на футер

Ещё одно простое решение — якорная ссылка на футер страницы.

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

Примеры

Дополнительные материалы

Навигация в боковой панели

Пользователям iOS к меню в боковой панели не привыкать. Этот метод навеян такими приложениями для iOS, как Facebook и Twitter. В результате создаётся эффект, будто меню спрятано в левой части экрана.

Примеры

Дополнительные материалы
  • jPanel Menu, Энтони Коланжело (Anthony Colangelo)

Другие способы оформления навигации

Наряду с привычными решениями существует несколько более продвинутых вариантов: навигация во всплывающем окне (popup navigation), навигация, «вытягиваемая» жестом (pull down) и навигация, разворачивающаяся по кругу (path style).

Навигация во всплывающем окне Меню навигации отображается во всплывающем модуле, например, созданном при помощи Remodelista.

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

Навигация по кругу

Навигация по кругу причудливее многих способов оформления, её реализация сильно зависит от CSS3 и Javascript. При нажатии на основную кнопку вокруг неё по кривой выстраиваются пункты меню.

Закрыть меню можно, выбрав один из его элементов или нажав ещё раз на основную кнопку. Если разделы меню имеют вложенные подразделы, пользователю предлагают вернуться на предыдущий уровень, либо выбрать один из представленных пунктов. Инструмент для реализации этого решения платный, найти его можно здесь: Path Style Menu.

Навигация, «вытягиваемая» жестом

В основе метода лежит идея обновления контента с помощью протягивания — Pull-to-Refresh.

В экспериментальном меню навигации стандартный контрол заменён жестовым управлением. Посмотреть на реализацию этого решения можно на Inspect Element.

Заключение

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

Надеюсь, эта статья покажется вам интересной. Всегда полезно узнать о существующих решениях какой-либо задачи: это экономит время и силы. Если вы хотите более подробно изучить сильные и слабые стороны разных способов оформления адаптивной навигации, обратитесь к статье Бреда Фроста (Brad Frost).

Оригинал: http://www.queness.com/post/13093/responsive-mobile-navigation-menumethods-and-solutions


Выпадающее меню на Bootstrap 4 при наведении (событие hover)

Как известно, стандартный dropdown список раскрывается только при нажатии на главный пункт меню. По умолчанию выпадающий список имеет свойство «display: none;», и переходит в «display: block;», когда срабатывает событие click и на оборот — чтобы скрыть, нужно опять нажать на меню.

На примере меню из документации Bootstrap 4:



<nav>



  <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

    <span></span>

  </button>



  <div>

    <ul>



      <li>

        <a href="#">Главная</a>

      </li>



      <li>

        <a href="#">Один</a>

      </li>



      <li>

        <a href="#">Два</a>

      </li>



      <li>

        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Три</a>

        <div aria-labelledby="navbarDropdownMenuLink">

          <a href="#">Три один</a>

          <a href="#">Три два</a>

          <a href="#">Три три</a>

        </div>

      </li>



    </ul>

  </div>



</nav>

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

Чтобы меню раскрывалось и скрывалось при наведении (событие hover), достаточно чуть подправить css файл bootstrap 4 или прописать это в своем файле стилей:



nav.navbar .dropdown:hover > .dropdown-menu {

 display: block; 

} 

Теперь при наведении, нашему списку будет присваиваться свойство «block» и он раскроется. Вот так легко это делается, не правда ли?

Чтобы это работало только на ПК версиях экранов, и не работало на мобильных устройствах, так как там просто отсутствует нормальная работа события hover. Я рекомендую прописать ниже еще вот такой код:



@media only screen and (max-device-width: 992px){

    nav.navbar .dropdown:hover .dropdown-menu{

        display: none;

    }

}

Учтите, что этим вы не отменяете событие click – раскрытие меню по клику. Оно будет так же работать наравне и с наведением.

Как отключить событие click и оставить только событие hover, вы можете прочитать в этой статье:

Переход по ссылке главного (верхнего) меню раскрывающегося списка в Bootstrap 4

 

Всем удачи!

 

Возможно вам так же будет интересно:

«Умное» раскрывающееся вертикальное меню на jquery за 2 минуты

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

Допустим, у нас есть такое праймари меню:

  • Топ 100
  • Графика
    • Абстракция
    • Кино
    • Компьютерная графика

Задача.
При нажатии на пункт меню, который не имеет подменю, должна открываться новая страница (как в обычном меню). А если пункт меню имеет подменю, то страница не должна открываться, а должно выезжать подменю. Надо написать «умный» скрипт, который будет за этим следить.

Решение
Сначала выводим в нужное нам место праймари меню. Можно через блок, можно через page.tpl.php, кому как удобнее. Я обычно вывожу вторым способом:

<?php if ($primary_links): ?>
  <div id = "menu"><?php print menu_tree('primary-links'); ?></div>
<?php endif; ?>

В общем, вывели меню. Для него подойдёт следующий css:

div#menu ul {
  padding: 0;
}
 
div#menu ul li {
  display: block;
  border-bottom: 1px solid #211f1b;
  margin-bottom: 5px;
  padding: 0;
}
 
div#menu ul li a {
  color:#211F1B;
  display:block;
  font-family:Verdana;
  font-size:18px;	
  font-weight:bold;
  padding:5px 0;
}
 
div#menu ul li a:hover,
div#menu ul li a.active,
div#menu ul li a:active {
  color: #005693;
  text-decoration: none;	
  outline: none;
}
 
div#menu ul ul {
  display: none; /* собственно, самое важное :) */
}	
 
div#menu ul ul li {
  border: none;
  margin: 0;
}
 
div#menu ul ul li a {
  font-size: 11px;	
  padding-left: 20px;
}
 
div#menu ul ul li a:hover,
div#menu ul ul li. active-trail a {
  background: #b7b7b7;
  color: #fff;
}
 
div#menu ul ul li.active-trail ul li a {
  background: #fff;
  color: #000;
}

Теперь осталось создать скрипт, который будет раздвигать пункты меню, имеющие подменю. Создаём файл menu.js и добавляем туда такой текст:

$(document).ready(function() {
  $('div#menu>ul>li>a').click(function() {
    if ($(this).parent().find('ul').length) {
      $(this).parent().find('ul').slideToggle(200);				
      return false;
    }
  });
});

Подключаем наш скрипт в шаблон. Чистим кэш. Проверяем, наслаждаемся.

Таким же образом можно сделать и горизонтальное меню, слегка поменяв css.

30 классных уроков создания CSS меню

CSS сегодня — штука жизненно важная для веб-дизайна. Дежурка периодически публикует переводы интересных статей и уроков по CSS. Однако, хороших материалов много, и чтобы перевести их все, потребуется куча времени. Сегодняшняя подборка — для тех, кто дружит с английским языком или уже достаточно разбирается в вопросе, чтобы понять суть статьи по коду и демо-примерам. Это подборка неплохих туториалов по созданию навигационного меню на CSS. Используя приемы или их элементы, изложенные в этих уроках, вы сможете добавить динамики своему сайту, придать ему современный стильный вид. Некоторые из этих туториалов мы впоследствии переведем и опубликуем в нашем журнале.

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

How-to: DropDown CSS Menu
Демо

Выпадающие странички на CSS

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
Демо

Отличное горизонтальное выпадающее меню на CSS

A Great CSS Horizontal Drop-Down Menu
Демо

Создаем раскрывающийся при нажатии header

Designing the Digg Header: How To & Download
Демо

Меню-гармошка с изображениями на Jquery

Image Menu with Jquery
Демо

Горизонтальное меню на чистом CSS

Демо

Создайте выпадающее меню с подпунктами на CSS и немножко JavaScript

Create your own drop down menu with nested submenus using CSS and a little JavaScript
Демо

CSS-спрайты, время для JavaScript

CSS Sprites2 – It’s JavaScript Time
Демо

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

How To Create A Simple Drop Down Menu With CSS3
Демо

Классное меню на CSS

Advanced CSS Menu
Демо

Стильное меню из опускающихся квадратов с изображениями на CSS

Slide Down Box Menu with jQuery and CSS3
Демо

Гранжевое меню с пунктами, выдвигающимися под разными углами

Grungy Random Rotation Menu with jQuery and CSS3, к сожалению, в Опере 11. 60 поворот работать не будет.
Демо

Делаем клёвую анимированную навигацию на jQuery и CSS

Create a Cool Animated Navigation with CSS and jQuery
Демо

Горизонтальное меню на CSS

CSS UL LI – Horizontal CSS Menu

Делаем забавное анимированное навигационное меню на чистом CSS

Create a Fun Animated Navigation Menu With Pure CSS
Демо

Как сделать CSS-меню на спрайтах

How to Make a CSS Sprite Powered Menu

Дополнительные CSS-штучки для меню

Advanced CSS Menu Trick
Демо

Анимированные вкладки

Animated horizontal tabs
Демо

Меню в стиле фиш-ай на чистом СSS 

Pure CSS Fish Eye Menu
Демо

Красивая навигация табами на CSS

Sweet tabbed navigation using CSS3
Демо

Делаем простую стильную навигацию с помощью CSS Jquery

Creating a Simple yet Stylish CSS Jquery Menu
Демо

Горизонтальные вкладки в два уровня на jQuery

jQuery Drop Line Tabs
Демо

Честное выпадающее меню на CSS без хаков и javascript

CSS dropdown menu without javascripting or hacks
Демо

Горизонтальное меню с иконками на CSS

Horizontal CSS Menu With Icons
Демо

Делаем говорящее меню навигации на чистом CSS

Create A Speaking Block Navigation Menu Using Pure CSS

Делаем анимированное меню на CSS

Making a CSS3 Animated Menu
Демо

Горизонтальный список — меню на CSS

Horizontal CSS List Menu

Как сделать анимированное меню на CSS

Making a CSS3 Animated Menu
Демо

Как сделать красивую навигационную панель на CSS3

How To Create A Clean CSS3 Navigation Bar
Демо

Подборка stylishwebdesigner. com



Комментарии

Оставить ответ

Похожие статьи

Случайные статьи

Выпадающее меню навигации, доступное только для 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 #

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

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

Прямо за воротами мы реализовали несколько функций специально для обеспечения доступности:

  1. aria-label на
  2. Использование кнопки в качестве фокусируемого, обнаруживаемого элемента для открытия раскрывающегося списка
  3. aria-controls на .dropdown__title , который ссылается на идентификатор .dropdown__menu , чтобы связать его с меню для вспомогательных технологий
  4. aria-extended на кнопке , которую в вашем окончательном решении необходимо переключать через Javascript, как указано в демонстрации, упомянутой в начале этой статьи

Как заметил Майкл, использование кнопки button также позволяет пользователям 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 {
 цвет фона: прозрачный; 
 граница: отсутствует; Семейство шрифтов 
: наследование; 
} 
 nav {
> ul {
 
> li {
 a, 
 .dropdown__title {
 текстовое оформление: нет; 
 выравнивание текста: по центру; Дисплей 
: строчно-блочный; 
 цвет: синий; 
 размер шрифта: 1.125rem; 
} 
 
 
> a, 
 .dropdown__title {
 padding: 1rem 0.5rem; 
} 
 
} 
} 
}

Базовые стили выпадающего списка #

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

Сначала мы изменим стиль .dropdown__menu и его ссылки, чтобы помочь более четко идентифицировать его, когда мы работаем с позиционированием и анимацией: 

 .раскрывающийся список {
 позиция: относительная; 
 .dropdown__menu {
 цвет фона: #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%); 
 трансформация происхождения: верхний центр; 
 непрозрачность: 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 для использования позиции : липкий и прокрутите вместе с пользователем.

Окончательный результат #

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

Стефани Эклс (@ 5t3ph)

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

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

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

В этой статье:

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

Появится пример меню

CSS-код для Drop Menu

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

HTML-код для выпадающего меню

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

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

Разгадывая тайны раскрывающихся списков на чистом CSS - Dotted Squirrel

Как это работает. Почему это работает. С репо кода.

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

Хотя большинство фреймворков CSS делают это автоматически, иногда вам просто нужно сделать это самостоятельно.

Но вот вопрос - как?

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

Вот краткое руководство о том, как все это работает и почему работает, с примерами кода.

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

Вот краткая навигация по всей статье:

Основные концепции, которые необходимо понять в первую очередь

Актуальное руководство

Расшифровка относительного и абсолютного позиционирования

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

Все мы знаем, что он может перемещать вещи, но как это работает?

Давайте начнем с родственника и начнем с кода ниже: 

 
 Здесь текст 
 
 
 Здесь снова текст

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

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

простираются до края вашего браузера.

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

Итак, допустим, мы хотим применить относительно к нашим тегам p и переместить его вправо и вниз. Мы бы написали примерно так: 

 p {положение: относительное; слева: 50 пикселей; верх: 50 пикселей; }

Это приведет к следующему результату:

Блоки p и перемещаются соответственно (50 пикселей слева и 50 пикселей сверху). Относительность его исходной точки зависит от экрана.

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

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

Например, ваш HTML-код выглядит примерно так: 

 
 
 
 Здесь текст 
 
 
 Здесь снова текст

А ваш CSS выглядит примерно так: 

 div {положение: относительное; слева: 50 пикселей; верх: 50 пикселей; }

Ваш визуальный результат будет примерно таким:

Так где же здесь абсолютное позиционирование?

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

Например, представьте, что у вас есть следующий HTML-код: 

 
 Здесь текст 
 
 
 
 
 Здесь текст 
 
 
 Здесь снова текст 
 
 
 
 
 Здесь текст

Вот как поток будет выглядеть в нормальных условиях:

Если бы вы применили position: absolute к вашему div , а затем переместили его, исходные координаты не были бы основаны на угловой точке вашего текущего положения, скорее, они были бы основаны на верхнем левом углу вашего окна.

В дополнение к этому, весь блок div будет перемещен из вашего естественного потока блоков. Он будет располагаться поверх всего остального, как если бы он существовал на собственном уровне. Ширина также уменьшается до ширины самого большого элемента внутри (который также схлопнулся).

В итоге получается так:

Итак, если вы начнете перемещать его, и ваш код css будет выглядеть примерно так: 

 div {позиция: абсолютная; верх: 0; слева: 10 пикселей; }

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

В итоге это выглядит примерно так:

Так как же работает комбинация относительного и абсолютного позиционирования CSS?

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

Если контейнера нет, окно эквивалентно родительскому контейнеру.

Итак, если у вас есть комбинация CSS, которая выглядит примерно так: 

 div {позиция: относительная;} 
 div p {позиция: абсолютная; верх: 50 пикселей; }

Вы получите что-то вроде этого:

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

Высота div также уменьшается. Почему?

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

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

Блоки, рядные блоки, рядные

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

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

блочный элемент по умолчанию 

 <адрес> <статья>