бургер меню на чистом CSS

Как создать Burger Menu для сайта. Мобильное меню на чистом CSS.

Всем привет в данной записи я вам покажу как создать Burger Menu на чистом CSS. Вы научитесь реализовывать мобильное, адаптивное меню. Бургер меню это блок с кнопкой, после нажатия на которую открывается список ссылок из меню.

HTML

<nav class="mobile-menu">
    <input type="checkbox" id="checkbox" class="mobile-menu__checkbox">
    <label for="checkbox" class="mobile-menu__btn"><div class="mobile-menu__icon"></div></label>
    <div class="mobile-menu__container">
    <ul class="mobile-menu__list">
        <li class="mobile-menu__item"><a href="#" class="mobile-menu__link">Home</a></li>
        <li class="mobile-menu__item"><a href="#" class="mobile-menu__link">About us</a></li>
        <li class="mobile-menu__item"><a href="#" class="mobile-menu__link">Work</a></li>
        <li class="mobile-menu__item"><a href="#" class="mobile-menu__link">Contacts</a></li>
    </ul>
    </div>
</nav>

CSS

.mobile-menu {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  top: 0;
  background-color: #27ae60;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 9999999;
}
.mobile-menu__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 30px;
  cursor: pointer;
  transition: .4s;
}
.mobile-menu__icon {
  display: block;
  position: relative;
  background: white;
  width: 90%;
  height: 4px;
  transition: .4s;
}
.mobile-menu__icon::after, .mobile-menu__icon::before {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100%;
  height: 4px;
  transition: .4s;
}
.mobile-menu__icon::after {
  top: 8px;
}
.mobile-menu__icon::before {
  top: -8px;
}
.mobile-menu__container {
  position: fixed;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 999;
  height: 0;
  opacity: 1;
  transition: .5s;
  overflow: hidden;
  background-color: #27ae60;
}
.mobile-menu__list {
  transition: .5s;
  list-style: none;
  padding-left: 0;
  margin-top: -50px;
}
.mobile-menu__item {
  font-size: 26px;
  padding-bottom: 15px;
}
.mobile-menu__link {
  text-decoration: none;
  color: #fff;
}
.mobile-menu__checkbox {
  display: none;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__nav {
  opacity: 1;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__container {
  height: 100%;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon {
  background: transparent;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  top: 0;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

8
Оставить комментарий

avatar
8 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
7 Авторы комментариев
unsentyabakaro44жImmofJanleF Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Эль
Гость
Эль

Демку было бы не плохо увидеть, или я не нашел? ))

Larryweits
Гость
Larryweits

CryptoTab[/url] создан на движке Chromium, который славится скоростью и низкими требованиями к ресурсам. CryptoTab такой же быстрый, как Google Chrome, и с таким же удобным интерфейсом. Установите мобильный браузер [url=http://bit.ly/2OOmu60]CryptoTab[/url], получайте прибыль в любом месте и в любое время! – Привычный пользовательский интерфейс Встроенные функции майнинга [url=http://bit.ly/2OOmu60]CryptoTab[/url] Синхронизация нескольких устройств Чрезвычайно быстрый и легкий браузер] CryptoTab[/url] еще удобнее и эффективнее. Мы оптимизировали работу майнинг алгоритма и теперь вы можете получать до трех раз больше дохода за тот же период времени, что и ранее. Изменения сильнее всего отразятся на пользователях многоядерных процессоров – благодаря оптимизациии и настройкам системы, алгоритм стал больше… Подробнее »

JanleF
Гость

Canadien Pharmacy [url=https://apcialisle.com/#]is generic cialis available[/url] How To Buy Pills Online Cialis Derniere Lit Plus Longtemps

JanleF
Гость

Viagra Se Vende [url=https://abcialisnews.com/#]where to buy cialis online[/url] Amoxicillin After Lap Band Surgery cialis for sale Pharmacy Rx One Coupon

Immof
Гость
Immof

http://reyna.userbet.xyz
Высокотехнологичные инструменты для заработка на криптовалютных активах

[url=http://moto-rage.com.ua/site/forum.php?mod=viewthread&tid=420&pid=203081&page=364&extra=page%3D1#pid203081]Высокотехнологичные инструменты для заработка на криптовалютных активах[/url] [url=https://xn—-9sbhgcigfj8ae8b.xn--p1ai/prodazha-drov/#comment-15482]Высокотехнологичные инструменты для заработка на криптовалютных активах[/url] [url=http://firebuy.ru/blog/boevaya-odezhda-pozharnogo#comment_14999]Высокотехнологичные инструменты для заработка на криптовалютных активах[/url] c2f2_30

44ж
Гость
44ж

очень круто спасибо

abakaro
Гость

Viagra Professional Online Pharmacy [url=https://abcialisnews.com/]cialis canada[/url] Canadian Generic No Presciption buy cialis uk prescribe cialis

unsenty
Гость

Comment Acheter Viagra Hors Pharmacie [url=https://abcialisnews.com/]Cialis[/url] Levitra Heartburn cialis generic cost Buy Viagra From Egypt