Невозможно щелкнуть по элементам меню css hamburger

Я создаю меню гамбургеров для мобильного сайта, используя только html и css. Вы можете просмотреть код here on codepen.io.Невозможно щелкнуть по элементам меню css hamburger

<html> 
<body> 
    <nav> 

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

    <div class="close"></div> 

    <ul class="menu"> 
    <li><a href="Page1">Page1</a></li> 

    <li><a href="Page2">Page2</a></li> 

    <li><a href="Page3">Page3</a></li> 

    <li><a href="Page4">Page4</a></li> 

    <li><a href="http://google.com">Google</a></li> 
    </ul> 

    </nav> 
</body> 
</html>

Как вы можете видеть из линии 106 в Css части

.hamburger:focus ~ .menu { 
visibility: visible; 
}

меню отображается, когда кнопка находится в фокусе. Проблема в том, что как только вы нажимаете на элемент меню, кнопка выходит из фокуса, и меню исчезает до того, как клик будет обработан.
Я уже пытался писать правила для фокусного меню, но это не помогло.

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.
Благодарим вас за ваши усилия.

источник

2016-07-03 md7

добавить переход: видимость 0.5S; в вашем классе меню, я отправил ответ, чтобы проверить это :) –

добавить видимость перехода в свой класс меню. см. обновленный класс ниже.

.menu { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 10px; 
 
    width: auto; 
 
    height: auto; 
 
    visibility: hidden; 
 
    list-style: none; 
 
    background-color: #333; 
 
    transition: visibility 0.5s; 
 
} 
 

 
.menu a { 
 
    color: #87BF58; 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 

 
.hamburger { 
 
    display: block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 3rem; 
 
    width: 3rem; 
 
    z-index: 500; 
 
    text-indent: 0; 
 
    appearance: none; 
 
    box-shadow: none; 
 
    border-radius: 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    transition: background 0.3s; 
 
    background-color: yellowgreen; 
 
} 
 

 
.hamburger:focus { 
 
    outline: none; 
 
    background-color: green; 
 
} 
 

 
.hamburger span { 
 
    display: block; 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 25%; 
 
    right: 25%; 
 
    height: 10%; 
 
    background: white; 
 
    transition: background 0s 0.3s; 
 
} 
 

 
.hamburger span::before, 
 
.hamburger span::after { 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    content: ""; 
 
    transition-duration: 0.3s, 0.3s; 
 
    transition-delay: 0.3s, 0s; 
 
} 
 

 
.hamburger span::before { 
 
    top: -210%; 
 
    transition-property: top, transform; 
 
} 
 

 
.hamburger span::after { 
 
    bottom: -210%; 
 
    transition-property: bottom, transform; 
 
} 
 

 
.hamburger:focus span { 
 
    background: none; 
 
} 
 

 
.hamburger:focus span::before { 
 
    top: 0; 
 
    transform: rotate(45deg); 
 
} 
 

 
.hamburger:focus span::after { 
 
    bottom: 0; 
 
    transform: rotate(-45deg); 
 

 
} 
 

 
.hamburger:focus span::before, 
 
.hamburger:focus span::after { 
 
    transition-delay: 0s, 0.3s; 
 

 
} 
 

 
.close { 
 
    position: absolute; 
 
    height: 3rem; 
 
    width: 3rem; 
 
    margin-top: -3rem; 
 
    z-index: 501; 
 
    background-color: transparent; 
 
    cursor: pointer; 
 
    visibility: hidden; 
 
} 
 

 
.hamburger:focus ~ .menu { 
 
    visibility: visible; 
 
} 
 

 
.hamburger:focus ~ .close { 
 
    visibility: visible; 
 
}

<nav> 
 

 

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

 
    <div class="close"></div> 
 

 
    <ul class="menu"> 
 
     <li><a href="Page1">Page1</a></li> 
 

 
     <li><a href="Page2">Page2</a></li> 
 

 
     <li><a href="Page3">Page3</a></li> 
 

 
     <li><a href="Page4">Page4</a></li> 
 

 
     <li><a href="google.com">Google</a></li> 
 
    </ul> 
 

 
    </nav>

источник

2016-07-03 15:31:09

Спасибо @Allan. В настоящее время я проверяю, работает ли ваше предложение для моего использования. Как только я закончил тестирование, я помету ваш ответ как принятый. – md7

Нет проблемного друга :) надеюсь, что он работает и с вашим прецедентом. хотя я уверен в этом: P –

Невозможно щелкнуть по элементам меню css hamburger

ответ

Смежные вопросы