Статья, в которой рассмотрим, как с помощью компонента Navbar создать вертикальное схлопывающееся меню для сайта.
Для создания основного вертикального меню необходимо:
- подключить на страницу CSS код, который будет определять вид меню на больших экранах;
- определённым образом организовать HTML код, который будет задавать нужное положение элементов.
HTML и CSS код вертикального меню для сайте на базе Navbar:
...
<!-- CSS -->
<style>
@media (min-width: 768px) {
.navbar-container {
position: sticky;
top: 0;
overflow-y: auto;
height: 100vh;
}
.navbar-container .navbar {
align-items: flex-start;
justify-content: flex-start;
flex-wrap: nowrap;
flex-direction: column;
height: 100%;
}
.
navbar-container .navbar-collapse {
align-items: flex-start;
}
.navbar-container .nav {
flex-direction: column;
flex-wrap: nowrap;
}
.navbar-container .navbar-nav {
flex-direction: column !important;
}
}
</style>
...
<!-- HTML -->
<body>
<div>
<div>
<div>
<!-- Вертикальное меню -->
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<!-- Пункты вертикального меню -->
<ul>
<li>
<a href="#link-1">Ссылка 1</a>
</li>
<li>
<a href="#link-2">Ссылка 2</a>
</li>
<li>
<a href="#link-3">Ссылка 3</a>
</li>
<li>
<a href="#link-4">Ссылка 4</a>
</li>
<li>
<a href="#link-5">Ссылка 5</a>
</li>
</ul>
</div>
</nav>
</div>
<div>
<!-- Основной контент страницы -->
.
navbar-container .navbar-collapse {
align-items: flex-start;
}
.navbar-container .nav {
flex-direction: column;
flex-wrap: nowrap;
}
.navbar-container .navbar-nav {
flex-direction: column !important;
}
}
</style>
...
<!-- HTML -->
<body>
<div>
<div>
<div>
<!-- Вертикальное меню -->
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<!-- Пункты вертикального меню -->
<ul>
<li>
<a href="#link-1">Ссылка 1</a>
</li>
<li>
<a href="#link-2">Ссылка 2</a>
</li>
<li>
<a href="#link-3">Ссылка 3</a>
</li>
<li>
<a href="#link-4">Ссылка 4</a>
</li>
<li>
<a href="#link-5">Ссылка 5</a>
</li>
</ul>
</div>
</nav>
</div>
<div>
<!-- Основной контент страницы -->
.
Демо меню
Как изменить расположение кнопки «гамбургер»
Например, для того чтобы расположить кнопку «гамбургер» в левой части меню, достаточно её просто расположить до бренда:
<nav>
<button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<a href="#">Navbar</a>
...
Например, для того чтобы кнопку поместить по центру, оставшегося после бренда пространства в меню, к ней необходимо добавить классы ml-auto и mr-auto:
... <button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> .
..
Как выровнять пункты в мобильном виде меню
Выравнивание пунктов в мобильном представлении меню выполняется посредством добавления класса text-right
text-center к элементу с классом navbar-nav:... <!-- Выравнивание пунктов по правому краю --> <ul> ...
... <!-- Выравнивание пунктов по центру --> <ul> ...
Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов
Недавно мы публиковали заметку про использование кнопки гамбургер-меню для сайта и возможные ее альтернативы. Сегодня хотелось немного развить тему и поделиться несколькими сопутствующими наработками. В статье будет много ссылок на полезные проекты и скрипты, поэтому загрузка может занять некоторое время. Тем, кто столкнулся с данной задачей и ищет как сделать гамбургер меню на сайте пост однозначно пригодится.
Данный элемент был разработан почти 30 лет назад Нормом Коксом.
Он идеально подходит для мобильных версий сайтов и всех проектов, где навигация не должна отвлекать или закрывать визуальную составляющую страницы. Сейчас иконка гамбургер-меню является неотъемлемой фишкой адаптивной разработки и наверняка знакома большинству пользователей сети. Не смотря на разные альтернативы и противников, она реально стала узнаваемым и универсальным символом.
Примеры сайтов с гамбургер меню
Перед тем как перейти к скриптам, предлагаем оценить некоторые графические наработки и примеры дизайнов сайтов, использующих этот механизм. Часть картинки отображает вид страницы до вызова меню, вторая — после. Посмотреть эффект в действии можно на самих ресурсах, кликая по скриншотам.
Star Wars
Интересная модификация меню с тематикой фильма Звездных Воен.
The Deepend Design
Outdated Browser
NewtonRunning
Brianhoff Design
Brooklyn Bridge Park
Часто при клике на «иконку гамбургера» полоска или блок меню выезжает сбоку или сверху.
Эффект простой, но смотрится неплохо.
The Design Museum
Illusion
Xander
DeModern
Hooch Creative
Появление навигации в данном примере выглядит немного странно. Пользователю нужно делать лишний клик чтобы увидеть несколько пунктов меню, которые, по сути, никак не мешают остальной графике. Зачем их скрывать? — не совсем понятно. Сайт ниже аналогично вызывает подобный вопрос.
Lalignerouge
Michaelvilleneuve
Chapoleone
Brand Junkie
Cofa Media
eWebDesign
Lequipe
Digital Deadly Sins
Buildin Amsterdam
Анимация и иконки гамбургер-меню
Также в сети можно найти примеры иконок гамбургер-меню для вдохновения. Иногда их совмещают с анимационными эффектами для наглядной демонстрации работы. Сама по себе кнопка выглядит слегка скучно, но вместе с разными «преобразованиями» она добавляет на сайт больше интерактива. Практически все материалы ниже были найдены в социальной сети дизайнеров Dribbble (кликайте по картинкам дабы перейти на исходники).
Hamburger Button
Burger Menu2
MOARRRR
The Real Hamburger MenuIcon
Hamburger Icon
Wave
Menu Icon by Dave Gamez
BurgerIcon
Hi I’m Hamburger
Buttons by Nick Meloy
Hamburger Transformation
Open Close
HamburgerMenu by Tamas Kojo
Interactive Hamburger
Close Icon Animation
Dribbble Menu
Simple HamburgerMenu Animation
IconinFramer
Hamburger Icon Music
Menu Thing
Hamburger by Christian
OpenDADA
Это лишь часть материалов, на Dribbble их гораздо больше — заходите на сайт и ищите по ключу «hamburger«, можно даже без приставки «menu«. Напоследок парочка дополнительных сайтов.
TheNounProject
Про Noun Project мы когда-то уже писали в посте с необычными наборами иконок. Там содержится достаточно много монохромных объектов из любых сфер жизни.
Iconfinder
Когда будете использовать поиск иконок Iconfinder обязательно выбирайте в левом меню «Free» в графе Price, то есть бесплатную стоимость изображений.
Stickpng
Еще один интересный сервис — Stickpng, где публикуются PNG клипарты на прозрачном фоне. Не смотря на то, что картинок здесь мало, возможно, кому-то нужен именно PNG формат.
Скрипты гамбургер меню CSS / javascript
В интернете имеется несколько подборок вариантов реализации иконки гамбургер-меню. Не будем перепечатывать все ссылки оттуда, а лишь укажем источники и наиболее интересные примеры. Заметки, нужно сказать, достаточно актуальные по времени публикации. Кликайте по скриншотам.
21 Hamburger Animations Menu
15 Hamburger Icons in CSS
Code My UI
CSS Animated Hamburgers
Font Awesome
Кстати, подходящая иконка есть и в популярном наборе Font Awesome.
Можете почитать заметку про использование шрифта Font Awesome в WordPress, если ваш проект реализован на этой CMS.
Практически во всех остальных случаях из подборок вы найдете код и описание как сделать гамбургер меню в CSS и JS (в частности jQuery).
Вот парочка наиболее интересных решений:
Gooey Menu
Menu Toggle SVG Animation
Hamburger Icon + Morphing Menu
Pure CSS off-canvas Menu + flexbox
UI/UX Improvements with CSS
Toggle Menu by Vladislav
Итого в статье мы постарались собрать много разных материалов по теме: начиная с примеров сайтов с гамбургер меню, графическими наработками дизайнеров и заканчивая реальными скриптами гамбургер меню на CSS и javascript. Всего вышло около 60-ти полезных ссылок. Надеемся вам они пригодятся.
Теги: CSS Веб-дизайн, меню гамбургер Icon меню, примеры
DHTML-скрипты Dynamic Drive — меню значков гамбургера
Описание: Это меню объединяет два
популярные тренды полноэкранного меню и использования значка в стиле «гамбургер»
, чтобы переключить его, чтобы создать легкое, элегантное меню сайта для мобильных устройств!
Переключатель меню фиксируется на странице и, кроме отображения
значок гамбургера может быть расширен для отображения дополнительных ссылок верхнего уровня.
Значок гамбургера Меню чрезвычайно компактно и легко настраивается, со всеми ссылками меню, определенными как разметка HTML на странице. Просто отредактируйте HTML для настройки ссылок.
Демо (см. вверху справа угол страницы):
Схема проезда
Шаг 1: Добавьте приведенный ниже код в раздел HEAD вашего страница:
Этот сценарий использует следующие внешние файлы. Загрузите их ниже (щелкните правой кнопкой мыши и выберите «Сохранить как»):
- гамбургериконменю.js
- гамбургериконменю.css
ВАЖНО: Ваша страница должна содержать META-тег в разделе HEAD вашей страницы, чтобы обеспечить
лучший мобильный опыт с этим меню.
Этот
META-тег предписывает мобильным браузерам не уменьшать масштаб при отображении
веб-страница по умолчанию, что может привести к тому, что меню будет слишком маленьким для запуска.
Шаг 2: Затем добавьте приведенную ниже разметку меню. в любом месте внутри BODY вашей страницы за пределами любых других тегов, таких как право над закрывающим тегом
Вы можете добавить дополнительные LI в прилагаемый UL, чтобы показать дополнительные ссылки верхнего уровня.
кроме пункта по умолчанию «Контакты». Последний LI всегда должен быть зарезервирован для
отображать значок гамбургера, однако.
css. Просто обратитесь
к комментариям внутри этого файла, чтобы внести изменения во внешний вид меню, например
цвета, размер шрифта, контрольные точки мультимедиа CSS и т. д. Другие настройки 
При сжатии все элементы LI внутри » 
Поэтому я читаю блоги, а также смотрю видеоуроки, но ни в одном из них не объясняется, как создать кнопку-гамбургер, которая используется на большинстве сайтов для переключения навигации на мобильных устройствах. 
д. 
