Как сделать боковую панель в 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.

Отзывчивая боковая панель меню

Создать отзывчивую боковую панель меню

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Боковое меню навигации */
.sidebar margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
>

/* Боковой панели ссылок */
.sidebar a display: block;
color: black;
padding: 16px;
text-decoration: none;
>

/* Активная/текущая ссылка */
.sidebar a.active background-color: #4CAF50;
color: white;
>

/* Ссылки на мышь-над */
.sidebar a:hover:not(.active) background-color: #555;
color: white;
>

/* Содержимое страницы. Значение свойства margin-left должно совпадать со значением свойства width боковой панели */
div.content margin-left: 200px;
padding: 1px 16px;
height: 1000px;
>

/* На экранах, которые меньше 700px в ширину, сделать боковую панель в верхней панели */
@media screen and (max-width: 700px) .sidebar width: 100%;
height: auto;
position: relative;
>
.sidebar a
div.content
>

/* На экранах размером менее 400 пикселей панель отображается вертикально, а не горизонтально */
@media screen and (max-width: 400px) .sidebar a text-align: center;
float: none;
>
>

Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.

Фиксированная боковая панель

Узнать, как создать фиксированное боковое меню навигации с помощью CSS.

Создать фиксированную боковую панель

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Меню боковой панели */
.sidenav height: 100%; /* Полная высота: удалите это, если вы хотите «авто» высота */
width: 160px; /* Установите ширину боковой панели */
position: fixed; /* Фиксированная боковая панель (оставайтесь на месте при прокрутке) */
z-index: 1; /* Оставайтесь с верху */
top: 0; /* Оставайтесь на вершине */
left: 0;
background-color: #111; /* Черный */
overflow-x: hidden; /* Отключить горизонтальную прокрутку */
padding-top: 20px;
>

/* Ссылки в меню навигации */
.sidenav a padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
>

/* При наведении курсора мыши на навигационные ссылки измените их цвет */
.sidenav a:hover color: #f1f1f1;
>

/* Стиль содержимого страницы */
.main margin-left: 160px; /* То же, что и ширина боковой панели */
padding: 0px 10px;
>

/* На небольших экранах, где высота меньше 450px, измените стиль боковой панели (меньше отступов и меньший размер шрифта) */
@media screen and (max-height: 450px) .sidenav
.sidenav a
>

Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.

Совет: Зайдите на наш учебник Как сделать — Анимированное боковое меню, чтобы узнать, как создать анимированную, закрываемую боковую навигацию.