휴대 기기에서 CSS 네비게이션 메뉴를 클릭 할 수 없습니다.

Question

메뉴 시스템을 만든 친구를 도우 려하고 있으며 브라우저에서는 훌륭하게 작동하지만 휴대 전화에서는 작동하지 않습니다. 그들은 이미지를 "메뉴"버튼으로 사용하고 있으며 마우스로 가리키면 메뉴가 예상대로 내려갑니다.

그러나 휴대 전화에서는 아무 것도 할 수 없으므로 커서를 가져갈 수 없습니다. 내가 그것을 클릭하면, 그것은 또한 아무것도하지 않습니다. 나는 이것이 내 바보 같고 쉬운 것이라고 생각하고있다. 그러나 나는 내 삶을 위해 그것을 이해할 수 없다. 나는 대부분의 것들을 작동시키기에 충분할만큼 CSS를 알고 있지만 반응 형 디자인은 아직 좋지 않다.

@media 쿼리에 문제가 있다고 확신하지만 잘못 된 것을 보지 못했습니다. 올바른 방향으로

@media (max-width: 680px) { 
 
    #navbar { 
 
    overflow: visible!important; 
 
    } 
 
    #navwrapper { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 20px; 
 
    width: 150px; 
 
    height: 50px; 
 
    background: url('menuicon.png') top left no-repeat; 
 
    overflow: visible; 
 
    } 
 
    #navwrapper ul { 
 
    display: none; 
 
    width: auto; 
 
    max-width: 310px; 
 
    background: #333; 
 
    margin: 50px 0 0 0; 
 
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4); 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    } 
 
    #navwrapper li { 
 
    display: block; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    float: none; 
 
    clear: both; 
 
    overflow: hidden; 
 
    border: none; 
 
    z-index: 200; 
 
    transition: none; 
 
    } 
 
    #navwrapper ul li:first-child { 
 
    padding: 0!important; 
 
    } 
 
    #navwrapper a:link, 
 
    #navbar a:visited, 
 
    #navbar a:active { 
 
    padding: 0 25px; 
 
    font-size: 13px; 
 
    line-height: 30px; 
 
    display: inline; 
 
    color: #fff; 
 
    font-size: 15px; 
 
    letter-spacing: 0.5px; 
 
    text-shadow: 0px 2px 5px #333; 
 
    width: 100%; 
 
    float: none; 
 
    transition: none; 
 
    } 
 
    #navbar li:hover, 
 
    #navbar li:focus, 
 
    #navbar a:hover, 
 
    #navbar a:focus { 
 
    background: #111; 
 
    } 
 
    #navwrapper:hover { 
 
    width: auto; 
 
    height: auto; 
 
    overflow: visible; 
 
    } 
 
    #navwrapper:hover ul, 
 
    #navwrapper ul:hover { 
 
    display: block; 
 
    height: auto; 
 
    } 
 
}

<div id="navbar"> 
 
    <div id="navwrapper"> 
 
    <ul class="menu"> 
 
     <li id="home"><a href="index.html">Index</a> 
 
     </li> 
 
     <li id="about"><a href="about.html">About</a> 
 
     </li> 
 
     <li id="link1"><a href="link1.html">Link 1</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

어떤 생각이나 넘나들며은 크게 감상 할 수있다.

Answer 1

내 경험상, 공중 전화와 휴대 기기는 단순히 연결되지 않습니다. 단순하게 작동시키기 위해 필요한 해결 방법 (즉, 해킹)의 양은 취약성과 코드의 유지 관리 가능성을 희생할만한 가치가 없습니다.

모바일 탭을 수용하는 확인란이있는 라벨로 메뉴를 변경하고 해당 기능을 데스크톱에 유지하려면 라벨에 마우스를 계속 추가 할 수 있어야합니다. (예,이는 "모바일 메뉴에 대한를 해킹 체크 박스"로 잘 알려진, 그러나 그것은 훨씬 덜 hackish 모바일에 마우스 오버를 시뮬레이션하는 것보다 입니다됩니다.)

HTML은 다음과 같다 :

<div id="navbar"> 
    <input type="checkbox" id="menuBtn"> 
    <label for="menuBtn"><img src="myMenuButton.png"></label> 
    <ul class="menu"> 
     <li id="home"><a href="index.html">Index</a></li> 
     <li id="about"><a href="about.html">About</a></li> 
     <li id="link1"><a href="link1.html">Link 1</a></li> 
    </ul> 
</div> 

그리고 CSS 마법이 일어날 수 있도록 :

#navbar #menuBtn, 
#navbar ul.menu { 
    display: none; 
} 

#navbar #menuBtn:checked ~ ul.menu, 
#navbar #menuBtn + label:hover ~ ul.menu { 
    display: block; 
} 

이 CSS입니다 만 label이 중 하나 (바탕 화면)을 통해 공중 선회 또는 (데스크톱 또는 모바일)을 클릭하면 메뉴가 나타납니다 만들기위한. 물론 두 번째 규칙 집합을 분할하여 미디어 쿼리로 래핑 할 수 있으므로 데스크톱 사용자가 메뉴를 클릭하여 열어 두지 않게하려면 checked 규칙이 모바일 상황에만 적용됩니다.

또한 특정 스타일링 및 위치 지정 CSS 규칙을 위에 통합해야하지만 기능적 관점에서 볼 때 CSS 규칙이 있어야합니다.