Как сделать боковую панель в html

HTML: Боковая панель

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

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

 
Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты
Оставить заявку
Читайте также
Услуга 2
Описание новой услуги
Ссылка на услугу
Услуга 3
Описание новой услуги
Ссылка на услугу
Услуга 4
Описание новой услуги
Ссылка на услугу

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

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:

• Логотип
• Секция навигации. Внутри неё маркированный список из двух элементов

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

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

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

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

Мой код отличается от решения учителя ��

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

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

Прочитал урок — ничего не понятно ��

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

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

Полезное

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

Выезжающая боковая панель (sidebar)

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

Демонстрация адаптивного макета с sidebar от настольного компьютера до мобильного устройства. Светлая и темная тема на iOS и Android.

Веб-тактика

В компоненте выезжающей боковой панели (sidebar) предстоит объединить несколько важных функций веб-платформы:

1. CSS :target
2. CSS сетка
3. CSS преобразования
4. CSS Media Queries для области просмотра и пользовательских предпочтений
5. JS для focus (UX-улучшение)

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

CSS-псевдокласс :target

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

@media (max-width: 540px) < #sidenav-open < visibility: hidden; >#sidenav-open:target < visibility: visible; >>

Изменнение хэша в URL страницы.

CSS grid

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

Сетка

Основной элемент макета #sidenav-container представляет собой сетку, которая создает 1 строку и 2 столбца с названием stack для первой.

#sidenav-container < display: grid; grid: [stack] 1fr / min-content [stack] 1fr; min-height: 100vh; >@media (max-width: 540px) < #sidenav-container >* < grid-area: stack; >>

Подложка

Анимированный HTML=элемент – боковая панель навигации. У него есть 2 дочерних элемента: контейнер с навигацией с названием [nav] и подложка с названием [escape] , назначение которой – закрывать панель с меню.

#sidenav-open

Демонстрация происходящего от смены соотношения.

CSS 3D-преобразования и переходы

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

• Анимировать разворачивание/сворачивание
• Анимировать с плавным движением, только если пользователь не возражает
• Анимировать visibility , чтобы фокус клавиатуры не исчезал за пределы экрана

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

Доступность движения

Кто-то не любит плавное движение при появлении боковой панели и предпочитает быстрое появление sidebar. Такое предпочтение можно учитывать с помощью настройки внутри медиа-запроса prefers-reduced-motion: reduce значения CSS-переменной —duration . Это учитывает предпочтения пользователя для движения (если доступно), настроенные в операционной системе.

#sidenav-open < --duration: .6s; >@media (prefers-reduced-motion: reduce) < #sidenav-open < --duration: 1ms; >>

Демонстрация взаимодействия с применением duration и без неё.

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

Transition, transform, translate

Панель скрыта (по умолчанию)

Чтобы установить для боковой панели навигации на мобильном устройстве состояние по умолчанию, за пределами экрана, нужно спозиционировать элемент с помощью transform: translateX(-110vw) .

Обратите внимание, к типовому значению -100vw для скрытия за пределы экрана, добавлены ещё 10vw , чтобы гарантировать, что тень блока боковой навигации не попадёт в видимую область окна, когда панель скрыта.

@media (max-width: 540px) < #sidenav-open < visibility: hidden; transform: translateX(-110vw); will-change: transform; transition: transform var(--duration) var(--easeOutExpo), visibility 0s linear var(--duration); >>

Панель открыта

Когда, при изменении хэша в URL, :target соответствует HTML-элементу #sidenav-open , его надо спозиционировать с помощью translateX() в установленные для открытого состояния координаты 0 и наблюдать, как CSS переместит элемент из его исходной позиции -110vw в указанную, равную 0 , в течение var(—duration) времени.

@media (max-width: 540px) < #sidenav-open:target < visibility: visible; transform: translateX(0); transition: transform var(--duration) var(--easeOutExpo); >>

Изменение видимости

Следующая цель – реализовать невидимость меню, когда sidebar скрыт, от программ чтения с экрана. Это нужно, чтобы фокус не переводился на меню, скрытое за пределами экрана. Для этого можно изменять CSS-свойство visibility панели при изменениях :target :

• Когда панель появляется, чтобы она была видимой и на ней можно было сфокусироваться, не следует изменять свойство visibility .
• Когда панель скрывается, visibility должно изменяться на hidden , но с задержкой, т.е. после того, как она покинет видимую часть окна

Улучшение UX-доступности

Ссылки

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

Демонстрация озвучивания и UX-взаимодействия с клавиатурой.

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

:is(:hover, :focus)

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

.hamburger:is(:hover, :focus) svg > line

Немного Javascript

Кнопка Esc для сворачивания

Клавиша Escape на клавиатуре должна закрывать меню, например так:

const sidenav = document.querySelector('#sidenav-open'); sidenav.addEventListener('keyup', event => < if (event.code === 'Escape') document.location.hash = ''; >);

UX-фокус

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

sidenav.addEventListener('transitionend', e => < const isOpen = document.location.hash === '#sidenav-open'; isOpen ? document.querySelector('#sidenav-close').focus() : document.querySelector('#sidenav-button').focus(); >)

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

Пример выезжающей боковой панели:

Выдвижная боковая панель на CSS

Данное решение сделано с использованием флажка checkbox и не требует скриптов.

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

Пример:

Выдвижная панель:

Информация в панеле

HTML:

Информация в панеле

В данном коде обязательным условием является, чтобы боковая панель

следовала сразу за флажком checkbox

Т.к. панель имеет фиксированное позиционирование, ее можно разместить в любом месте страницы. Основываясь на этом, можно сделать кнопку, которая будет менять свой стиль и текст: side-button-1 (для нее, тоже важна последовательность html тегов.

Если изменять переключатель не нужно, как у кнопки side-button-2 , то ее можно ставить где угодно, как угодно и сколько угодно раз. Например:

Моя кнопка 1
Моя кнопка 2

CSS:

/* Оформление панели */
#side-checkbox < display : none ; position : fixed ; z-index : 999999 ; left : -360px ; background : #337AB7 ; transition : all 0.5s ; width : 320px ; height : 100vh ; box-shadow : 10px 0 20px rgba ( 0,0,0,0.4 ) ; color : #FFF ; padding : 40px 20px ; font-size : 20px ; padding-bottom : 10px ; margin-bottom : 20px ; border-bottom : 2px solid #BFE2FF ; /* Оформление кнопки на странице */ .side-button-1-wr < text-align : center ; /* Контейнер для кнопки, чтобы было удобнее ее разместить */ .side-button-1 < display : inline-block ; .side-button-1 .side-b < margin : 10px ; text-decoration : none ; position : relative ; font-size : 20px ; line-height : 20px ; padding : 12px 30px ; color : #FFF ; font-weight : bold ; text-transform : uppercase ; font-family : 'Roboto' , Тahoma, sans-serif ; background : #337AB7 ; cursor : pointer ; border : 2px solid #BFE2FF ; .side-button-1 .side-b:hover, .side-button-1 .side-b:active, .side-button-1 .side-b:focus < color : #FFF ; .side-button-1 .side-b:after, .side-button-1 .side-b:before < position : absolute ; height : 4px ; bottom : -6px ; transition : all 280ms ease-in-out ; .side-button-1 .side-open:after, .side-button-1 .side-open:before < background : green ; .side-button-1 .side-close:after, .side-button-1 .side-close:before < background : red ; .side-button-1 .side-b:before < .side-button-1 .side-b:hover:after, .side-button-1 .side-b:hover:before < width : 100% ; /* Переключатели кнопки 1 */ .side-button-1 .side-close < display : none ; #side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open < display : none ; #side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close < display : block ; #side-checkbox:checked + .side-panel < /* Оформление кнопки на панеле */ .side-button-2 < font-size : 30px ; border-radius : 20px ; position : absolute ; right : 8px ; cursor : pointer ; transform : rotate ( 45deg ) ; color : #BFE2FF ; transition : all 280ms ease-in-out ; .side-button-2:hover < transform : rotate ( 45deg ) scale ( 1.1 ) ; color : #FFF ; Нравится 82 В закладки

• Опубликовано: 11.12.2019 / Обновлено: 04.06.2021
• Рубрики: Весь сайт, Меню и аккордеоны
• Метки: CSS, Авторское
• 51071 просмотр

Смотрите также:

Полезные решения на CSS

Сборник из простых решений на CSS, которые пригодятся при оформлении сайта.

Вертикальный аккордеон для фотографий

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

Вертикальные вкладки

Адаптивные вертикальные вкладки на jQuery

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

Ваш комментарий отправлен!

Комментарии:

СЕРГЕЙ: 01.04.2023 в 11:47

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

Владимир: 23.03.2023 в 18:16

Доброго времени суток. А под валидатор как подогнать данное действо. Для lable вроде как div внутри не допустим с точки зрения хз чего) А так все работает круть как всегда. Тот момент когда в авторе не сомневаешься.

Alexander: 24.03.2023 в 06:24
Поменяйте div на span ��
Владимир: 24.03.2023 в 09:22
Да со span проходит благодарю. Пришлось маленько поправить оформление и норм.
СЕРГЕЙ: 22.02.2023 в 23:55
А как вместо кнопки сделать флажок типа бокового меню?
Alexander: 23.02.2023 в 08:47
position: fixed и вместо текста иконку
Сергей: 21.11.2022 в 00:30

Просто шикарно! Очень вовремя мне попалась эта статья и в целом ваш сайт.
На редкость полезный и толковый сайт. Спасибо вам.
А как вместо крестика поставить треугольники? В закрытом состоянии углом внутрь (к центру), а в закрытом состоянии — углом наружу. Получится подсказка типа открыть-закрыть. В смысле — понятно, что это можно сделать с помощью псевдоэлементов или маленьких картинок, но как без JS отловить закрытое и открытое состояние панели?

Alexander: 21.11.2022 в 11:16
Без JS это изходить из :checked, как основная кнопка сделана.
Сергей: 26.04.2022 в 09:36
А если в панель не помещается содержимое, как добавит вертикальный скролл?
Alexander: 26.04.2022 в 11:57

 
Информация в панеле

Обернуть в див со стилями:

overflow-y: auto; height: 100%;

Илья: 21.10.2020 в 14:34

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

Alexander: 21.10.2020 в 15:48

Для этого нужен лейбл фиксированный во весь экран, а чтобы он кликался, он должен перекрывать весь сайт.

Мартин: 03.06.2021 в 16:19
Не подскажете как это сделать?
Alexander: 04.06.2021 в 08:46

Ну это уже JS
Если на нем делать боковоую панель, то смысла нет городить все эти чекбоксы
На днях сделаю JS вариант

Миша: 28.09.2020 в 09:41
Спасибо, отличное решение.
Юлия: 24.09.2020 в 23:45

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

Alexander: 25.09.2020 в 01:42
Дублировать: ID, классы и т.д.
Но тут удобнее на JS будет уже
Юлия: 25.09.2020 в 10:14
[quote] я продублировала, но ничего не получилось, вылезает панель от исходных настроек
Alexander: 26.09.2020 в 17:30
Дайте ссылку на результат, так сложно понять что не так и тем более обьяснить.
Юлия: 19.10.2020 в 09:33

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

Георгий: 18.09.2020 в 20:50
если справа нужна панель, то что менять чтобы всё отлично работало?
Alexander: 19.09.2020 в 06:04

.side-panel < left: -360px; box-shadow: 10px 0 20px rgba(0,0,0,0.4); left: 100%; box-shadow: -10px 0 20px rgba(0,0,0,0.4); > #side-checkbox:checked + .side-panel < left: 0; left: calc(100% - 360px); >

Илья: 14.09.2020 в 17:19
И настроить на стили на свою кнопку?
Alexander: 14.09.2020 в 17:30
Только эта кнопка должна быть label и с правильным for
Илья: 14.09.2020 в 17:39
т.е. отстилизовать под свой дизайн я не смогу?
Alexander: 14.09.2020 в 18:41
Почему?
Или редактируйте эту кнопку, что в примере, или ставьте любую свою:

Моя кнопка 

Только это должен лейбл быть, чтобы он открывал панель.
А стили ставьте хоть в виде ссылки, хоть в виде кнопки, хоть в виде фото.

Роман: 21.10.2021 в 17:56

Хорошее решение, только что открыл и не пойму, при переделке панели на правую сторону, я не меняю никаких id и названий лейблов, заменил то, что выше в коментарии писали (ориентация панели), но панель справа не открывается? Каким образом лейбл менять? спасибо

Роман: 21.10.2021 в 20:11
Разобрался Александр, все Ок! подписка
ddd: 13.12.2022 в 21:06
В чем была проблема? Не могу разобраться
Роман: 14.12.2022 в 15:36
Никаких проблем нет, просто внимательнее смотрите на CSS
Михаил: 05.04.2022 в 08:12
Подскадите, пожалуйста, как сделать не кнопкой, а иконкой (картинкой)?
Alexander: 05.04.2022 в 09:17

Боковая панель навигации

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

На этой странице На этой странице

Как это устроено

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

• Offcanvas использует тот же код JavaScript, что и модальные окна. Концептуально они очень похожи, но представляют собой отдельные плагины.
• Точно так же некоторые переменные источник Sass для стилей и размеров offcanvas наследуются от переменных модального окна.
• При отображении offcanvas включает фон по умолчанию, на который можно щелкнуть, чтобы скрыть offcanvas.
• Как и в модальных окнах, одновременно может отображаться только один неактивный холст.

Внимание! Учитывая, как CSS обрабатывает анимацию, Вы не можете использовать margin или translate в элементе .offcanvas . Вместо этого используйте класс как независимый элемент оболочки.

Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion . См. раздел с уменьшенным движением в нашей документации по специальным возможностям.

Примеры

Компоненты Offcanvas

Ниже приведен пример offcanvas, который отображается по умолчанию (через .show на .offcanvas ). Offcanvas включает поддержку заголовка с кнопкой закрытия и дополнительный класс тела для некоторого начального заполнения. Мы рекомендуем по возможности включать заголовки offcanvas с действиями по отклонению или предоставлять явное действие по отклонению.

Offcanvas

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

div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">  div class="offcanvas-header">  h5 class="offcanvas-title" id="offcanvasLabel">Offcanvash5>  button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть">button>  div>  div class="offcanvas-body">  Здесь размещается контент для offcanvas. Вы можете разместить здесь практически любой компонент Bootstrap или пользовательские элементы.  div> div>

Живая демонстрация

Используйте кнопки ниже, чтобы отображать и скрывать элемент offcanvas с помощью JavaScript, который переключает класс .show на элемент с классом .offcanvas .

• .offcanvas скрывает содержимое (по умолчанию)
• .offcanvas.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-bs-target . В обоих случаях требуется data-bs-toggle=»offcanvas» .

Ссылка с помощью атрибута href Кнопка с атрибутом data-bs-target

Offcanvas

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

• Действие
• Другое действие
• Что-то еще здесь

a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">  Ссылка с помощью атрибута href a> button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">  Кнопка с атрибутом data-bs-target button>  div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">  div class="offcanvas-header">  h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvash5>  button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть">button>  div>  div class="offcanvas-body">  div>  Какой-то текст в качестве заполнителя. В реальной жизни у вас могут быть элементы, которые Вы выбрали. Нравится, текст, изображения, списки и т. д.  div>  div class="dropdown mt-3">  button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">  Кнопка раскрывающегося списка  button>  ul class="dropdown-menu">  li>a class="dropdown-item" href="#">Действиеa>li>  li>a class="dropdown-item" href="#">Другое действиеa>li>  li>a class="dropdown-item" href="#">Что-то еще здесьa>li>  ul>  div>  div> div>

Прокрутка Body

Прокрутка элемента отключена, когда видимы offcanvas и его фон. Используйте атрибут data-bs-scroll , чтобы включить прокрутку .

Включить прокрутку тела

Offcanvas с прокруткой тела

Попробуйте прокрутить оставшуюся часть страницы, чтобы увидеть эту опцию в действии.

button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Включить прокрутку телаbutton>  div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">  div class="offcanvas-header">  h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas с прокруткой телаh5>  button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть">button>  div>  div class="offcanvas-body">  p>Попробуйте прокрутить оставшуюся часть страницы, чтобы увидеть эту опцию в действии.p>  div> div>

Прокрутка тела и подложка

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

Включить прокрутку и фон

Фон с прокруткой

Попробуйте прокрутить оставшуюся часть страницы, чтобы увидеть эту опцию в действии.

button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Включить прокрутку и фонbutton>  div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">  div class="offcanvas-header">  h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Фон с прокруткойh5>  button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть">button>  div>  div class="offcanvas-body">  p>Попробуйте прокрутить оставшуюся часть страницы, чтобы увидеть эту опцию в действии.p>  div> div>

Статический фон

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

Переключить статический offcanvas

Offcanvas

Я не закроюсь, если вы нажмете вне меня.

button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">  Переключить статический offcanvas button>  div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">  div class="offcanvas-header">  h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvash5>  button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть">button>  div>  div class="offcanvas-body">  div>  Я не закроюсь, если вы нажмете вне меня.  div>  div> div>

Темный offcanvas

Устарело в v5.3.0 Добавлено в версии 5.2.0

Измените внешний вид offcanvases с помощью утилит, чтобы они лучше соответствовали различным контекстам, таким как темные панели навигации. Здесь мы добавляем .text-bg-dark к .offcanvas и .btn-close-white к .btn-close для правильной стилизации с темным offcanvas. Если у вас есть раскрывающиеся списки, рассмотрите возможность добавления .dropdown-menu-dark в .dropdown-menu .

Внимание! Темные варианты компонентов устарели в версии 5.3.0 с введением цветовых режимов. Вместо добавления упомянутых выше классов вручную установите data-bs-theme=»dark» для корневого элемента, родительской оболочки или самого компонента.

Offcanvas

Разместите контент offcanvas здесь.

div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">  div class="offcanvas-header">  h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvash5>  button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Закрыть">button>  div>  div class="offcanvas-body">  p>Разместите контент offcanvas здесь.p>  div> div>

Отзывчивость

Добавлено в версии 5.2.0

Отзывчивые классы offcanvas скрывают содержимое за пределами области просмотра от указанной контрольной точке и ниже. Выше этой контрольной точки содержимое внутри будет вести себя как обычно. Например, .offcanvas-lg hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.

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

Отзывчивый offcanvas

Это содержимое в .offcanvas-lg .

button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Переключатель offcanvasbutton>  div class="alert alert-info d-none d-lg-block">Измените размер окна браузера, чтобы отображался адаптивный переключатель offcanvas.div>  div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">  div class="offcanvas-header">  h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Отзывчивый offcanvash5>  button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Закрыть">button>  div>  div class="offcanvas-body">  p class="mb-0">Это содержимое в code>.offcanvas-lgcode>.p>  div> div>

Отзывчивые классы offcanvas доступны для каждой контрольной точке.

• .offcanvas
• .offcanvas-sm
• .offcanvas-md
• .offcanvas-lg
• .offcanvas-xl
• .offcanvas-xxl

Размещение

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

• .offcanvas-start помещает offcanvas слева от области просмотра (показано выше)
• .offcanvas-end помещает offcanvas в правую часть области просмотра
• .offcanvas-top помещает offcanvas в верхнюю часть области просмотра
• .offcanvas-bottom помещает offcanvas в нижнюю часть области просмотра

Попробуйте верхний, правый и нижний примеры ниже.

Переключить верхнюю часть offcanvas

Offcanvas вверху

button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Переключить верхнюю часть offcanvasbutton>  div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">  div class="offcanvas-header">  h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas вверхуh5>  button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть">button>  div>  div class="offcanvas-body">  .  div> div>

Переключатель справа offcanvas

Offcanvas справа

button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Переключатель справа offcanvasbutton>  div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">  div class="offcanvas-header">  h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas справаh5>  button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть">button>  div>  div class="offcanvas-body">  .  div> div>

Переключатель снизу offcanvas

Offcanvas внизу

button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Переключатель снизу offcanvasbutton>  div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">  div class="offcanvas-header">  h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas внизуh5>  button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть">button>  div>  div class="offcanvas-body small">  .  div> div>

Доступность

Так как панель offcanvas концептуально является модальным диалогом, не забудьте добавить aria-labelledby=». » — ссылку на заголовок offcanvas — в .offcanvas . Обратите внимание, что Вам не нужно добавлять role=»dialog» , поскольку мы уже добавляем его через JavaScript.

CSS

Переменные

Добавлено в версии 5.2.0

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

--#offcanvas-zindex: #$zindex-offcanvas>; --#offcanvas-width: #$offcanvas-horizontal-width>; --#offcanvas-height: #$offcanvas-vertical-height>; --#offcanvas-padding-x: #$offcanvas-padding-x>; --#offcanvas-padding-y: #$offcanvas-padding-y>; --#offcanvas-color: #$offcanvas-color>; --#offcanvas-bg: #$offcanvas-bg-color>; --#offcanvas-border-width: #$offcanvas-border-width>; --#offcanvas-border-color: #$offcanvas-border-color>; --#offcanvas-box-shadow: #$offcanvas-box-shadow>; --#offcanvas-transition: #transform $offcanvas-transition-duration ease-in-out>; --#offcanvas-title-line-height: #$offcanvas-title-line-height>;

Sass переменные

$offcanvas-padding-y: $modal-inner-padding; $offcanvas-padding-x: $modal-inner-padding; $offcanvas-horizontal-width: 400px; $offcanvas-vertical-height: 30vh; $offcanvas-transition-duration: .3s; $offcanvas-border-color: $modal-content-border-color; $offcanvas-border-width: $modal-content-border-width; $offcanvas-title-line-height: $modal-title-line-height; $offcanvas-bg-color: var(--#$prefix>body-bg); $offcanvas-color: var(--#$prefix>body-color); $offcanvas-box-shadow: $modal-content-box-shadow-xs; $offcanvas-backdrop-bg: $modal-backdrop-bg; $offcanvas-backdrop-opacity: $modal-backdrop-opacity; 

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

Плагин offcanvas использует несколько классов и атрибутов для выполнения тяжелой работы:

• .offcanvas скрывает содержимое
• .offcanvas.show показывает содержимое
• .offcanvas-start скрывает offcanvas слева
• .offcanvas-end скрывает offcanvas справа
• .offcanvas-top скрывает offcanvas сверху
• .offcanvas-bottom скрывает offcanvas внизу

Добавьте кнопку отклонения с атрибутом data-bs-dismiss=»offcanvas» , который запускает функциональность JavaScript. Обязательно используйте с ним элемент для правильного поведения на всех устройствах.

Через атрибуты данных

Переключение

Добавьте к элементу data-bs-toggle=»offcanvas» и data-bs-target или href , чтобы автоматически назначить управление одним элементом offcanvas. Атрибут data-bs-target принимает CSS-селектор для применения offcanvas. Не забудьте добавить класс offcanvas к элементу offcanvas. Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show .

Отклонение

Отклонение может быть достигнуто с помощью атрибута data-bs-dismiss на кнопке ** внутри offcanvas**, как показано ниже:

button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть">button> 

или на кнопке вне offcanvas, используя дополнительный data-bs-target , как показано ниже:

button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Закрыть">button> 

Хотя поддерживаются оба способа отклонения модального окна, имейте в виду, что удаление модального окна извне не соответствует [Шаблон диалогового окна (модального) Руководства по авторской работе ARIA] (https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/). Делайте это на свой страх и риск.

Через JavaScript

Включить вручную с помощью:

const offcanvasElementList = document.querySelectorAll('.offcanvas') const offcanvasList = [. offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl)) 

Опции

Поскольку параметры можно передавать через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs- , как в data-bs-animation=»» . Обязательно измените тип регистра имени параметра с “camelCase” на “kebab-case” при передаче параметров через атрибуты данных. Например, используйте data-bs-custom-class=»beautifier» вместо data-bs-customClass=»beautifier» .

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config , который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config=» и data-bs-title=»456″ , окончательное значение title будет 456 , а отдельные атрибуты данных переопределяют значения, указанные в data-bs-config . Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay=» .

Окончательный объект конфигурации — это объединенный результат data-bs-config , data-bs- и js object , где последний заданный ключ-значение переопределяет другие.

Название	Тип	По умолчанию	Описание
backdrop	boolean or the string static	true	Применить фон на тело, пока открыт offcanvas. В качестве альтернативы укажите static для подложки, которая не закрывает экран при нажатии.
keyboard	boolean	true	Закрывает offcanvas при нажатии клавиши выхода.
scroll	boolean	false	Разрешает прокрутку тела, когда открыт offcanvas.

Методы

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

Активирует Ваш контент как элемент offcanvas. Принимает необязательные параметры object .

Вы можете создать экземпляр offcanvas с помощью конструктора, например:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas') 

Метод	Описание
getInstance	Статический метод, который позволяет вам получить экземпляр offcanvas, связанный с элементом DOM.
getOrCreateInstance	Статический метод, который позволяет вам получить экземпляр offcanvas, связанный с элементом DOM, или создать новый, если он не был инициализирован.
hide	Скрывает элемент offcanvas. Возврат к вызывающей стороне до того, как элемент offcanvas был фактически скрыт (то есть до того, как произойдет событие hidden.bs.offcanvas ).
show	Показывает элемент offcanvas. Возврат к вызывающей стороне до того, как элемент offcanvas был фактически показан (то есть до того, как произойдет событие shown.bs.offcanvas ).
toggle	Переключает элемент offcanvas на показанный или скрытый. Возврат к вызывающей стороне до того, как элемент offcanvas был фактически показан или скрыт (то есть до того, как произойдет событие shown.bs.offcanvas или hidden.bs.offcanvas ).

События

Класс offcanvas в Bootstrap предоставляет несколько событий для подключения к функциональности offcanvas.

Тип события	Описание
hide.bs.offcanvas	Это событие запускается сразу после вызова метода hide .
hidden.bs.offcanvas	Это событие запускается, когда элемент вне холста был скрыт от пользователя (будет ожидать завершения переходов CSS).
hidePrevented.bs.offcanvas	Это событие запускается, когда отображается offcanvas, его фон является static и выполняется щелчок за пределами offcanvas. Событие также запускается, когда нажата клавиша escape, а для параметра keyboard установлено значение false .
show.bs.offcanvas	Это событие срабатывает немедленно при вызове метода экземпляра show .
shown.bs.offcanvas	Это событие запускается, когда элемент offcanvas становится видимым для пользователя (будет ожидать завершения переходов CSS).

const myOffcanvas = document.getElementById('myOffcanvas') myOffcanvas.addEventListener('hidden.bs.offcanvas', event =>   // сделайте что-нибудь.  >) 

• Разработано и создано со всей любовью командой Bootstrap с помощью наших участников.
• Код под лицензией MIT, документация CC BY 3.0.
• Текущая версия 5.3.2.