Выезжающее меню на CSS
В продолжение примеров различных UI-элементов сайтов, которые можно сделать без Javascript, сегодня распишу как можно сделать выезжающее меню на чистом CSS.
И снова ДЕМО, для начала.
Начнем пожалуй со HTML-структуры:
input нам необходим для определения видимости меню: то есть если он выбран, то меню видно и наоборот.
label – это наша кнопка-бургер, которая привязана к инпуту.
ul – сам блок меню.
Теперь CSS (писал только для WebKit -браузеров: Opera 16+, Safari, Chrome).
Здесь много раздолья для креативных людей, но главные параметры – это width и left . Он должны иметь одинаковое значение, но left при этом является отрицательным. Тем самым мы прячем нашу меню слева от экрана. Также добавил анимацию transition: left .2s для красоты процесса выезда из-за пределов экрана.
Его просто делаем невидимым.
Оформлять также можно как угодно. Я сделал просто серую кнопку с белыми полосками в левом верхнем углу. Сюда тоже добавил анимации для самой кнопки и для полосок (просто для красоты).
Теперь, так называемая «магия»:
CSS3-селекторы позволяют нам определять состояние чекбокса и применять, в зависимости от этого те или иные свойства для соседних элементов :checked
. В данном примере мы при «чекнутом» инпуте сдвигаем кнопку меню .hidden-menu-ticker:checked
.btn-menu влево на 160 пикселей, меню до левого края .hidden-menu-ticker:checked
.hidden-menu . Остальные стили написаны для полосок кнопки меню, чтобы они при нажатии превращались в крестик и наоборот.
Создание компонента Sidenav
В данной статье я хочу поделиться одним из способов создания адаптивной боковой панели навигации (sidenav), поддерживающей управление с клавиатуры, работающей как с JavaScript, так и без него, и поддерживаемой всеми браузерами. Посмотреть демонстрацию можно здесь
Если Вы предпочитаете видео, ниже представлена YouTube-ролик по данной статье:
Обзор
Создать адаптивную навигацию непросто. Некоторые пользователи могут работать с помощью клавиатуры, одни при входе на сайт будут использовать мощный компьютер, другие — маленькое мобильное устройство. Но каждый из посетителей должен иметь возможность открыть и закрыть меню.
Демонстрация адаптивности макета на десктопе и мобильных:
Светлая и тёмная тема на iOS и Android
Подходы
При исследовании данного компонента я совместил несколько концепций веб-разработки:
CSS-медиазапросы для области видимости и предпочтений пользователей
JS для увеличения удобства использования
В моём решении на больших экранах боковая панель статична, а «выезжающей» становится только когда ширина области видимости меньше 540px . Данный размер будет контрольной точкой для переключения между интерактивной раскладкой для мобильных и статической для десктопов.
CSS-псевдокласс :target
Ссылка <a> , открывающая панель, устанавливает в URL-хэш значение #sidenav-open . У самого же элемента боковой панели имеется id , который соответствует этому значению. Закрывающая ссылка устанавливает в URL-хэш пустое значение ( » ):
Нажатие на эти ссылки изменяет состояние (отображение или скрытие) боковой панели в зависимости от URL в адресной строке:
CSS Grid
Раньше для компонента боковой панели я использовал только абсолютное или фиксированное позиционирование. Технология CSS Grid с её синтаксисом grid-area , открывает ещё один способ, позволяя нам на одну строку или колонку назначить несколько элементов.
Стопки
Основной элемент макета #sidenav-container является grid-элементом, который создаёт 1 строку и 2 колонки, а первая ячейка получает имя stack . Когда пространство ограничено, CSS назначает все элементы, дочерние по отношению к <main> в одну и ту же grid-область, размещая все элементы в одну ячейку в виде стопки.
Подложка
<aside> — это анимированный элемент, который содержит боковую навигацию. У него есть два дочерних элемента: контейнер <nav> , которому задано имя [nav] и подложка <a> с именем [escape] , которая используется для закрытия меню.
С помощью изменения значений 2fr & 1fr можно настроить соотношение между панелью и оставшимся пространством при открытом боковом меню.
Демонстрация результата изменения размера панели
CSS трансформации и переходы
Теперь наш макет умещается и в небольшую область видимости мобильного устройства. Пока что боковая панель по умолчанию накладывается на основное содержимое. Вот функционал, который я хочу дополнить в следующем разделе:
Анимированное открытие и закрытие
Анимация только в том случае, если пользователь не предпочитает её отключать
Анимирование visibility , чтобы фокус клавиатуры не выходил за пределы экрана
Так как дело дошло до реализации анимированного движения, прежде всего я бы хотел начать с доступности
Доступная анимация
Не все хотят видеть анимацию выезжающего меню. В нашем примере от предпочтения пользователя зависит значение CSS-переменной —duration , определяющей длительность анимации. Данная переменная находится внутри медиазапроса, который учитывает настройки операционной системы пользователя.
Демонстрация работы интерфейса с разными настройками анимирования
Теперь, если пользователь предпочитает уменьшенное количество анимации, панель будет появляться мгновенно.
Переход, трансформация, смещение
Скрытая панель (по умолчанию)
Чтобы на мобильных по умолчанию панель находилась за пределами экрана, я смещаю её с помощью transform: translateX(-110vw).
Обратите внимание, что в дополнение к обычной ширине области видимости -100vw я дополнительно добавил 10vw , чтобы быть уверенным, что в скрытом состоянии тень от боковой панели не будет видна на экране.
Открытая панель
Когда элемент #sidenav соответствует псевдоклассу :target , установите позиционирование с помощью translateX() на стандартное значение 0 и посмотрите, как CSS в течение времени, установленного в переменной var(—duration) , сместит элемент с его исходной позиции «скрыто», равной -110vw в позицию «открыто», равную 0 .
Переход для свойства visibility
Теперь, когда панель находится за пределами области видимости, её нужно скрыть и от скринридеров, чтобы они не переводили фокус на её элементы. Я реализовал это с помощью перехода (transition) для свойства visibility , который выполняется при смене псевдокласса :target .
При открытии переход применять не нужно, чтобы сразу видимая панель выезжала из-за пределов экрана
При закрытии панели для свойства visibility нужно применить переход, но с задержкой, чтобы она становилась невидимой только после завершения перехода
Улучшения доступности
Ссылки
Для управления состоянием панели, приведённое выше решение полагается на изменения URL-адреса. Естественно, здесь нужно использовать элемент <a> , который имеет некоторые преимущества в плане доступности. Давайте дополним наши интерактивные элементы доступными подписями, отражающими их назначение.
Демонстрация взаимодействия с помощью клавиатуры и скринридера
Теперь наши основные кнопки взаимодействия содержат понятное обозначение для пользователей как мыши, так и клавиатуры.
:is(:hover, :focus)
Этот удобный псевдокласс позволяет нам задать стили одновременно для состояний hover и focus
Добавление JavaScript
Escape для закрытия
Кнопка Escape на клавиатуре должна закрывать меню, правильно? Давайте реализуем такую возможность
История браузера
Чтобы каждое открытие и закрытие панели не создавало отдельную запись в истории браузера, для кнопки закрытия добавьте следующий код
При закрытии панели запись в истории будет удалена, как если бы панель никогда и не открывалась
Фокус
Следующий фрагмент кода помогает нам поместить фокус на кнопки открытия и закрытия при соответствующем действии панели. Я хочу сделать переключение простым
Когда боковая панель открывается, фокус попадает на кнопку закрытия. Когда же панель закрывается, фокус попадает на кнопку открытия. Я делаю это с помощью JavaScript, вызывая на элементе focus() .
Заключение
Теперь вы знаете о моём подходе в реализации данного компонента. Как бы его реализовали Вы?
How to build a sliding menu bar using HTML, CSS and JavaScript
A menu is what you look for when you land at a website. It has options and gives you access to everything the website has to offer you. You would definitely say it is an important part of a website, right?
My friend Girish patil and I started a biweekly newsletter for fronted developers this month. The first newsletter features sliding menu bars, and so here I am writing about how we built it.
Before we begin, get a container in place for your whole webpage and design the width and height according to your requirements. Now, inside the container, you have to place a sliding menu. In this article, we’ll explain how to create a left sliding menu.
Let’s get started
The HTML code for the slider is given below. It is a basic bare version.
An anchor tag is used to open the menu when clicked on. This is what triggers the menu to open, so you can see why it’s called slider-trigger. The menu component is what lies in the slider-parent class.
Now design the menu bar in CSS. Pay attention to the design details.
Let’s now break down the above snippet and discuss how it works.
Maxwidth defines the maximum width up to which the div can occupy. In a smaller window, it can occupy less that 250px. The div occupies 250px when the window is stretched all the way out on the screen.
At times, the user might look at the website on a much smaller screen, so we want our div to resize accordingly.
Moving on, let’s look at why left : -250px? This is done to get that smooth sliding action for the menu. Notice that the value for left is negative, which tells us that the menu starts 250px to the left of the starting position (which is 0). So it is presently not in the visible area.
We don’t want the sliding menu to be seen at all, which is why we add opacity and make its visibility hidden. Everybody likes animation, and it gives an interesting visual feel. This animation can be done using the transition component.
YAYYY! The basic slider is done!
Now that the basic slider is done, let’s understand what happens when the slider bar is active — that is, when the anchor tag that opens the menu bar is clicked.
Focus on the active class in the CSS code given above. Notice that the values for opacity and visibility are changed. This change is made to make the slider (which was previously hidden) visible on the screen.
Also, you might wonder: why is it now left : 0? Previously, the slider was out of the screen. Now that we want the menu to start at the left side of the screen, we change the value of left to 0.
OH! The animation! Add the transition component again so that when the slider is active, it eases in from the left smoothly.
It’s done! You have designed the components, so what is the next step? JavaScript! It’ll put all this into action.
Adding some JavaScript
Let’s look into how JavaScript wraps everything and gets the slider working. We want the slider to open when the anchor tag slider-trigger is clicked. So we get that element into a variable sliderTrigger. Later on we get the whole slider element into the variable slider. Now, we add an event listener that implements a function when the sliderTrigger element is clicked.
The function that is written controls the mechanics of opening and closing the sliding menu bar. Remember that we had an active and a normal slider-parent class.
The hack we implement here is to add the active class when the sliderTrigger element is clicked, and remove the active class when the same element is clicked again. To do that we use the code given below, to check if the variable contains the class active.
If the value is true, we remove the class active from the list. What happens then? The sliding menu bar closes. If the value is false, we add the class active to the classlist. Now what happens? Yes, the sliding menu bar is displayed. It is that simple.
Voilà it’s done!! Look who is clapping 😉
The working of the same code is shown below in the CodePen.
While this is a basic example, I’m sending out examples of more complex and different types of sliding menu bars in my newsletter.
Как создать бургер меню с выезжающей панелью на чистом CSS
Сегодня будет простенькая статья о том как сделать простое выезжающее меню без использования скриптов, то есть на чистом html + CSS. Данный урок будет полезен тем, кто верстает простые макеты, хочет создать свой сайт и изучает верстку. Конечно же, подойдет и мастерам, что создают темы на WordPress. Материал интересный и отлично подойдет для создания простых меню или меню для мобильных устройств, то бишь которое появляется на адаптивных страницах.
Я использовал данный вариант несколько рази и вот недавно мне попался схожий, но он был сложнее и с большим количеством кода, поэтому я решил опубликовать статью о своем варианте и поделится этим 100% рабочим методом с вами. Пример того как работает все это можно посмотреть нажав на кнопку ниже. Если это то что нужно вам и вы хотите сделать выезжающее меню с левой или правой стороны без использования скриптов у себя на сайте, то давайте перейдем к коду.
Первое что понадобится — добавить html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню — это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.
В нужное вам место на сайте добавьте html следующий код:
Давайте я подробно распишу что и как тут устроено и для чего каждый элемент
- Сначала идет главный блок-контейнер с классомburger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
- Далее идет чекбокс с ID — menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
- Далее идет label с классом —menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
- После идет наше основное меню в виде ul списка с классом — menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру — делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.
Как вы поняли, суть способа в том, что у нас есть скрытое меню за пределами страницы и обычный чекбокс, стилизованный под бургер меню. Когда мы нажимаем на чекбокс, мы задаем новые параметры для нашей скрытой панели/блока который появляется сбоку. В примере он выезжает слева, можете поменять и сделать справа.
Для начала, давайте добавим сами CSS стили, чтобы заработало, а уже потом сможете их менять. Открывайте свой файл стилей и добавьте в него следующий кусок кода:
Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.
left: -100%; — в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.
Ну и мои стили для пунктов меню. Тут можете задавать что хотите, свои, эти стили не обязательны
Задаем правила, что делать с нашим бургер меню, и самим меню, когда происходит активирование чекбокса, то есть когда вы жмете по нему и по label. Одну полоску мы поворачиваем, а две нижние поднимаем вверх и тоже поворачиваем и в результате из трех полосок получаем крестик. Так же делаем видимым наш скрытый блок с пунктами меню.
В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы — left: 0;. Если хотите справа, то просто смените на right: 0;.
Ну и весь код целиком, если вы не копировали по порядку, предыдущие отрезки.
сли вы все сделали правильно и нигде не допустили ошибку, то все должно работать так как в примере. Очень надеюсь, что вам понравилась статья и вы воспользовались ней. Если у вас возникли вопросы или проблемы, можете обратиться ко мне или заказать услугу по доработке вашего сайта. Контакты можете найти в шапке или подвале сайта.