matlashyk
@matlashyk
Новичок

Можно ли таким способом делать бургер меню?

Основной проблемой было то что курсор поинтер срабатывал только на спан а не на весь блок!
Допустима ли такая разметка? Либо можно сделать все чище? Если да то как?

Разметка:
<div class="burger">
       <button class="burger__item" type="button"></button>
 </div>


CSS:
.burger {
    width: 30px;
    height: 18px;
    display: none;
    position: relative;
    cursor: pointer;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

.burger__item,
.burger__item:before,
.burger__item:after {
    content: "";
    display: block;
    outline: none;
    position: absolute;
    top: 8px;
    right: 0;
    width: 30px;
    height: 2px;
    background-color: #fff;
}

.burger__item:before {
    content: ""; 
    top: -8px;
}

.burger__item:after {
    content: "";
    bottom: -8px;
}
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Зачем так много тегов?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
01 нояб. 2020, в 01:53
5000 руб./за проект
01 нояб. 2020, в 00:04
50000 руб./за проект
31 окт. 2020, в 23:12
10000 руб./за проект