cssハンバーガーメニューの項目をクリックできません

私はhtmlとcssだけを使用してモバイルサイトのハンバーガーメニューを作成しています。コードhere on codepen.ioを見ることができます。ボタンにフォーカスがあるときは、CSS部cssハンバーガーメニューの項目をクリックできません

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

メニューにライン106から分かるように

<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>

が見えます。問題は、メニュー項目をクリックするとすぐに、ボタンがフォーカスを失い、クリックが処理される前にメニューが消えてしまうことです。
私は既にフォーカスされたメニューのルールを書こうとしましたが、それは役に立たなかった。

追加情報が必要な場合はお知らせください。
ご協力いただきありがとうございます。

出典

2016-07-03 md7

トランジションを追加し、視認性を0.5秒。あなたのメニュークラスで、私はそれをチェックアウト答えを投稿しました:) –

メニュークラスでの遷移の可視性を追加します。下記の更新されたクラスを参照してください。

.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。私は現在あなたの提案が私のusecaseのために働くかどうかチェックしています。私がテストを終えるとすぐに、私はあなたの答えを受け入れたものとしてマークします。 – md7

問題はありませんが、あなたのユースケースでもうまくいきたいと思っています。私はそれについて肯定的ですが、P –

cssハンバーガーメニューの項目をクリックできません

答えて

関連する問題