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;
}
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Зачем так много тегов?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы