Выезжающее меню на CSS
В продолжение примеров различных UI-элементов сайтов, которые можно сделать без Javascript, сегодня распишу как можно сделать выезжающее меню на чистом CSS.
И снова ДЕМО, для начала.
Начнем пожалуй со HTML-структуры:
input нам необходим для определения видимости меню: то есть если он выбран, то меню видно и наоборот.
label – это наша кнопка-бургер, которая привязана к инпуту.
ul – сам блок меню.
Теперь CSS (писал только для WebKit -браузеров: Opera 16+, Safari, Chrome).
.hidden-menu
Здесь много раздолья для креативных людей, но главные параметры – это width и left . Он должны иметь одинаковое значение, но left при этом является отрицательным. Тем самым мы прячем нашу меню слева от экрана. Также добавил анимацию transition: left .2s для красоты процесса выезда из-за пределов экрана.
.hidden-menu-ticker
Его просто делаем невидимым.
.btn-menu < color: #fff; background-color: #666; padding: 5px; position: fixed; top: 5px; left: 5px; cursor: pointer; transition: left .23s; z-index: 3; width: 25px; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; >.btn-menu span < display: block; height: 5px; background-color: #fff; margin: 5px 0 0; transition: all .1s linear .23s; position: relative; >.btn-menu span.first
Оформлять также можно как угодно. Я сделал просто серую кнопку с белыми полосками в левом верхнем углу. Сюда тоже добавил анимации для самой кнопки и для полосок (просто для красоты).
Теперь, так называемая «магия»:
.hidden-menu-ticker:checked ~ .btn-menu < left: 160px; >.hidden-menu-ticker:checked ~ .hidden-menu < left: 0; >.hidden-menu-ticker:checked ~ .btn-menu span.first < -webkit-transform: rotate(45deg); top: 10px; >.hidden-menu-ticker:checked ~ .btn-menu span.second < opacity: 0; >.hidden-menu-ticker:checked ~ .btn-menu span.third
CSS3-селекторы позволяют нам определять состояние чекбокса и применять, в зависимости от этого те или иные свойства для соседних элементов :checked ~ . В данном примере мы при «чекнутом» инпуте сдвигаем кнопку меню .hidden-menu-ticker:checked ~ .btn-menu влево на 160 пикселей, меню до левого края .hidden-menu-ticker:checked ~ .hidden-menu . Остальные стили написаны для полосок кнопки меню, чтобы они при нажатии превращались в крестик и наоборот.
выезжающее меню справа на чистом CSS
У меня краткий вопрос, почему когда боковое меню слева выезжает по нажатию на гамбургер нормально, но когда, меню справа, то при нажатии на гамбургер меню сдвигает страницу. если надо скину код, но я думаю опытные поймут о чем я. мне буквально в двух словах объяснить почему так происходит, и какое(какие) свойства на это влияет, спасибо.
Waxom Home About Us Portfolio Features Blog Pricing Shortecodes Contact 
* < padding:0; margin:0; >header < background:url(img/bg.jpg); background-size:cover; background-position:center center; height:1024px; >.wrapper < margin:0 auto; max-width:1240px; width:90%; >.logo < padding-top:40px; padding-left:40px; width:auto; display:inline-block; float:left; >.logo img < height:55px; width:auto; >.logo span < font-family: 'Montserrat', sans-serif; font-size:30px; vertical-align:top; font-weight:700; line-height:normal; color:#fff; >.nav-wrapper < display:flex; float:right; width:auto; height:25px; padding-top:45px; >.nav-link < padding:0 10px; text-decoration:none; color:#fff; transition:color 0.1s linear; font-size:14px; >.nav-link:nth-child(n+9) < padding:0 20px; >.nav-link:nth-child(n+9):hover < opacity:0.7; >.nav-link:hover < color:#c7b299; >#check < display:none; position:absolute; >.label:after < content: '\2630'; text-decoration: none; font-size:30px; position:absolute; left:0; top:100px; display:none; >@media screen and (max-width:1024px) < .nav-wrapper < flex-direction:column; position:absolute; z-index:10; top:150px; right:-150px; padding-top:0; width:200px; height:auto; background:lightgrey; transition:left 0.2s linear; >.label:after < display:block; >#check:checked ~ .nav-wrapper < right:0; >#check:checked ~ .label:after < content: '\2715'; >> Отслеживать
Роман Ромашко
задан 23 апр 2019 в 16:21
Роман Ромашко Роман Ромашко
91 1 1 серебряный знак 8 8 бронзовых знаков
Может добавляется прокрутка?) без кода ничего не понятно
23 апр 2019 в 16:23
Приложите код, вариантов множество
– user298256
23 апр 2019 в 16:30
код скинул, немного не оформил меню при адаптивности но просто черновик по этому пока еще не доработал
23 апр 2019 в 16:42
можете в стилях поменять с right на left и увидите разницу
Как сделать выезжающее меню на сайте?
Добрый день, тостеровцы!
Пишу адаптивный дизайн, и вот никак не могу сообразить, как же мне организовать выезд менюшки по клику по «бутерброду»? Знаю, что в сети есть куча скриптов на эту тему, но совсем не понимаю, что с этими скриптами собственно делать, как устанавливать. Да и все найденные мной скрипты с различными анимациями, а мне нужно, чтоб банально по клику появлялся блок слева (или справа, не суть), а по повторному клику — скрывался.
Прошу подсказать, заранее спасибо.
- Вопрос задан более трёх лет назад
- 32493 просмотра
Комментировать
Решения вопроса 1
Самоделкин.
Для блока слева создай отдельный элемент на странице. Например, div с id «menu». В него помещай все, что тебе нужно. Умеешь подключать JQuery? На всякий случай, объясню.
Вот эту строчку впихни в head своей страницы. Теперь у нас подключен JQuery.
Что мы делаем дальше? Дальше нам надо отловить клик по нашему «бутерброду» и после клика, собственно, и выдвинуть менюху. Как это делается:
$(document).ready(function() < $("#menu").click(function() < $(this).addClass("show"); >); >);Этот код просто выдели в отдельный .js файл (ну и подключи его как простой .js скрипт, разумеется. Только он должен быть подключен после того, как подключишь JQuery).
Короче, что мы сделали: мы отловили клик по этому элементу и повесили на него функцию, которая к нашему div’у добавит класс «show». Дальше уже чистый css.
#menu < /* тут твои стили */ left: -350px; >#menu.show < /* тут твои стили */ left: 0px; >Я думаю, суть ясна. Когда у менюхи появляется класс «show», то тогда мы просто «выдвигаем» ее из-за левого края страницы. По желанию можно сделать это плавным:
#menu < /* тут твои стили */ transition: left ease 0.2s; left: -350px; >#menu.show < /* тут твои стили */ left: 0px; >Кстати, этот код написан под менюху, шириной в 350px.
Теперь ее надо закрыть. Тут 2 способа. Хотя нет, 3.
Можно отловить в нашем скрипте уход мышки с элемента и просто убрать класс «show» (mouseleave, removeClass()). А можно отловить клик по НЕэлементу див. Это тоже в JQ.
А можно еще расставить флаги, и контролировать, когда меню открыта, при нажатии на бутерброд, делать одно, и когда закрыта — другое.
Как сделать выезжающее меню css
Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.
Светлая тема Тёмная тема
Поделиться
- Учебник
- Браузер: документ, события, интерфейсы
- Введение в события
- Введение в браузерные события
Создать раскрывающееся меню
важность: 5
Создать меню, которое по нажатию открывается либо закрывается:
P.S. HTML/CSS исходного документа можно и нужно менять.
HTML/CSS
Для начала создадим разметку HTML/CSS нашего меню.
Меню – это отдельный графический компонент на странице, так что его лучше вынести в отдельный DOM-элемент.
Список пунктов меню может быть представлен в виде списка ul/li .
Для заголовка мы используем тег , потому что , как и любой блочный элемент, имеет скрытое свойство display:block , а значит, занимает ширину 100%.
Сладости (нажми меня)!Таким образом, если мы зададим обработчик события onclick , то он будет срабатывать по клику на всей ширине поля.
…тег – строчный элемент, по умолчанию имеет свойство display: inline , который занимает ровно столько места, сколько занимает сам текст:
Сладости (нажми меня)!Переключение меню
Переключение меню
Переключение меню должно менять стрелку и скрывать или показывать список элементов меню.
Все эти изменения прекрасно обрабатываются средствами CSS. Посредством JavaScript мы будем отмечать текущее состояние меню, добавляя или удаляя класс .open .
Без класса .open меню будет закрыто:
.menu ul < margin: 0; list-style: none; padding-left: 20px; display: none; >.menu .title::before
…А с ним (с классом .open ) стрелка будет меняться, и список будет показываться:
.menu.open .title::before < content: '▼ '; >.menu.open ul