кнопка для бургер меню на чистом css

Кнопка бургер меню для мобильного меню на чистом CSS

Всем привет сегодня я вам покажу как сделать кнопку для бургер меню. Данная кнопка будет написанная на чистом CSS и HTML. Кнопка состоит из 3 маленьких полос и часто используется для мобильных меню

HTML

Здесь мы прописываем только один блок для кнопки, для примера я создал элемент с классом hamburger. Полоски будут создаваться в помощью стилей, мы будет создавать вторую и третью полоски через свойства border-bottom и border-top, а центральная полоска будет создаваться через псевдоэлемент before.

<span class="hamburger"></span>

CSS

CSS код тоже простой. Здесь для понимания я все расписал.

.hamburger {
     position: relative;
     display: block;
     width: 50px;
     height: 25px;
     margin: 20px auto;
     border-top: 5px solid #fff;
     border-bottom: 5px solid #fff;
}
.hamburger:before {
     content: "";
     position: absolute;
     top: 10px;
     left: 0px;
     width: 100%;
     border-top: 5px solid #fff;
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

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

avatar
  Подписаться  
Уведомление о