Меню гамбургеров, меню выдвижных ящиков, меню вне холста: как бы вы это ни называли, скрытие основной навигации сайта за пределами экрана становится повсеместным шаблоном в адаптивном веб-дизайне. Все больше и больше сайтов имеют значок с фиксированным положением, при нажатии которого весь сайт перемещается в сторону, чтобы открыть скрытое меню навигации.
Несмотря на то, что существует множество плагинов jQuery, которые создадут этот эффект для вас, на самом деле это довольно легко сделать без использования JavaScript вообще.
Эта статья покажет вам, как сделать простую версию меню вне холста и скользящего эффекта, используя только CSS.
Прежде чем мы начнем, я хотел бы отметить, что использование этого метода для создания меню ящика означает, что навигация вашего сайта всегда будет в ящике, независимо от размера области просмотра. Если вы хотите, чтобы меню выдвижных ящиков использовалось только на небольших экранах, вам придется использовать некоторый JavaScript для управления порядком DOM или использовать какой-нибудь прикольный CSS, чтобы меню выглядело прямо на больших экранах. Другими словами: это красиво и просто, но это не всегда правильное решение для любой ситуации.
Вот демонстрация CodePen, показывающая конечный результат:
Начните с некоторого HTML
Разметка для нашего меню вне холста немного отличается от стандартного меню навигации. Вместо того, чтобы вставлять его в заголовок сайта, мы начнем прямо с <body> .
Это основная структура:
<ul class="navigation"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">Portfolio</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Blog</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger"></label> <div class="site-wrap"> <!-- insert the rest of your page markup here --> </div>
Вы можете видеть, что разметка нашего сайта состоит из трех основных элементов: навигация, флажок и пара меток, а также фактическое содержание сайта.
Несколько вещей, на которые стоит обратить внимание:
- Раздел навигации находится в порядке следования исходного кода, потому что он «позади» всего остального на сайте. Вы можете использовать любые HTML-теги, которые вы хотите построить навигацию. Здесь я использую неупорядоченный список, который является общим.
- Триггером для выдвижения нашего меню является флажок ввода с меткой. Обычно метка появляется перед входом или оборачивается вокруг входа. В этом случае ввод должен идти непосредственно перед меткой. Мы увидим почему позже, когда мы добавим CSS.
- Остальная часть нашего сайта должна быть завернута в уникальный div. Это так, что когда мы открываем меню, все остальное может слегка сместиться за пределы экрана, чтобы показать скрытые элементы навигации под ним.
Теперь, когда у нас есть базовая структура HTML, мы можем начать делать ее красивой!
CSS для пунктов меню
Давайте начнем со стилизации меню навигации и пунктов. Прежде всего, мы должны убедиться, что наше навигационное меню находится за содержимым нашей страницы и что оно остается на месте, даже если пользователь прокручивает:
.navigation { list-style: none; background: #111; width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
Затем я добавил несколько стилей, чтобы наша навигация выглядела эффектно (цвета фона, границы, градиенты и т. Д.). Я не буду воспроизводить код здесь, но вы можете просмотреть демо, чтобы проверить их.
Теперь у нас есть несколько приятных на вид пунктов меню, но они выглядят не так хорошо, когда весь наш контент лежит поверх них. Давайте добавим некоторые стили, чтобы скрыть меню, пока мы не готовы к этому.
CSS для обёртки сайта
Для начала давайте удостоверимся, что контент сайта полностью охватывает наше меню. На этом этапе вы можете добавить несколько абзацев lorem ipsum в ваш .site-wrap , если вы еще не добавили никакого содержимого.
.site-wrap { min-width: 100%; min-height: 100%; background-color: #fff; position: relative; top: 0; bottom: 100%; left: 0; z-index: 1; }
Обратите внимание, что мы должны указать фон для .site-wrap иначе меню будет отображаться. Конечно, вы можете использовать любой фон, какой захотите. Я добавил следующее к моему:
.site-wrap { /* ...previous styles here... */ padding: 4em; background-image: linear-gradient(135deg, rgb(254,255,255) 0%, rgb(221,241,249) 35%, rgb(160,216,239) 100%); background-size: 200%; }
CSS для триггера меню
Далее мы добавим стили, которые изменяют триггер меню из стандартного флажка, в классическую иконку «гамбургер», которую мы все знаем и любим.
Во-первых, давайте спрячем флажок.
.nav-trigger { position: absolute; clip: rect(0, 0, 0, 0); }
Примечание редактора: Первоначально этот код использовал display: block вместе с нулевой шириной и высотой для флажка, чтобы сделать его невидимым, но все же доступным. Оказывается, эта комбинация вызывала сбой iOS в браузере при открытии меню. Я изменил технику, чтобы использовать вместо этого свойство clip , которое, похоже, имеет тот же уровень доступности.
Здесь мы скрываем флажок, используя свойство clip, которое требует, чтобы элемент был установлен в position: absolute .
Теперь давайте <label> элемент <label> :
label[for="nav-trigger"] { position: fixed; top: 15px; left: 15px; z-index: 2; }
Сначала мы устанавливаем метку position: fixed чтобы она оставалась в том же месте, что и пользователь. Свойства top и left определяют, как далеко от края области просмотра будет находиться значок. Мы также гарантируем, что z-index триггера как минимум на один больше, чем у элемента .site-wrap .
Затем мы добавляем дополнительные объявления, чтобы превратить ярлык в значок «гамбургер».
label[for="nav-trigger"] { /* ... previous styles here... */ width: 30px; height: 30px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>"); background-size: contain; }
Я использовал встроенный SVG в качестве фонового изображения, но вы можете использовать любой значок, который вы хотите , в том числе :before и :after псевдоэлементы, чтобы воссоздать значок «гамбургер» с использованием чистого CSS.
Обратите внимание, я также включил cursor: pointer; визуально указывать интерактивность с помощью ввода на основе курсора.
CSS для запуска триггера
Теперь, когда наше меню, оболочка сайта и триггер стилизованы, давайте добавим несколько последних строк CSS, которые заставят все это работать.
.nav-trigger:checked + label { left: 215px; } .nav-trigger:checked ~ .site-wrap { left: 200px; box-shadow: 0 0 5px 5px rgba(0,0,0,0.5); }
Второй блок объявления выше гарантирует, что оболочка сайта будет сдвинута вправо на 200 пикселей. Я также добавил тень коробки в оболочку сайта, чтобы придать ему дополнительный визуальный вид, когда его накладывают поверх меню.
Первый селектор ( .nav-trigger:checked + label ) управляет положением триггера, когда меню открыто. Вы захотите добавить число, которое мы использовали ранее для label[for="nav-trigger"] к сумме, которую вы хотите, чтобы оболочка сайта выскользнула. Так что в этом случае: 15px + 200px = 215px.
Это где порядок источника элементов триггера становится важным. Второй селектор использует ~ , общий родственный селектор, для нацеливания .site-wrap при .nav-trigger . Порядок исходных данных нашего флажка здесь не так важен.
Однако мы должны нацеливаться как на .site-wrap и на наш элемент <label> зависимости от того, отмечен ли наш флажок или нет. Для этого мы используем + (соседний селектор брака), чтобы нацелиться на элемент <label> который находится рядом с флажком. Если мы поместим метку на первое место, мы не сможем переместить ее вместе с оболочкой сайта, когда мы активируем наш триггер.
В завершение мы можем добавить CSS-переход как к триггеру, так и к обертке сайта, чтобы открыть меню с плавной анимацией. Убедитесь, что в вашу версию включены все соответствующие атрибуты с префиксом браузера, или используйте что-то вроде Autoprefixer .
.nav-trigger + label, .site-wrap { transition: left 0.2s; }
И последнее: обязательно скрывайте переполнение по оси x вашего <body> . Без этого ваши пользователи смогут прокручивать все окно влево и вправо, когда меню открыто.
body { overflow-x: hidden; }
Готовый продукт
Вот и все! Мы успешно создали красивое навигационное меню без JavaScript. Опять же, вот CodePen, чтобы продемонстрировать, как это выглядит, когда все это объединяется:
Теперь, когда вы знаете, как это делается, не стесняйтесь поиграть с этой идеей. Сделайте версию, которая скользит справа, или создайте меню с левым и правым меню.
Мне бы очень хотелось посмотреть, что вы можете придумать, поэтому поделитесь CodePen вашего собственного дизайна в комментариях или со ссылками на другие примеры чисто CSS-экранных навигационных меню.