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

감사합니다 @ 앨런. 귀하의 제안이 내 유스 케이스에 효과가 있는지 확인하고 있습니다. 테스트가 끝나면 답변을 수락 한 것으로 표시하겠습니다. – md7

문제는 없습니다. pal : 당신의 유스 케이스에서도 작동하길 바랍니다. 나는 그것에 대해 긍정적이지만 : P –

css 햄버거 메뉴에있는 항목을 클릭 할 수 없습니다.

답변

관련 문제