휴대 기기 용 드롭 다운 메뉴

Question

나는 그것을 할 방법을 찾고 있는데, 아니면 간단한 "JavaScript를 사용해야 해."입니다.

모바일 장치 용 순수 CSS 드롭 다운 메뉴를 만들 수 있습니까, 아니면 자바 스크립트를 사용해야합니까?

: focus 의사를 사용하여 시도했지만 메뉴가 열렸을지라도 링크를 클릭 할 수 없습니다 (링크가 클릭되기 전에 닫힙니다). : 활성 의사가 절반도 작동하지 않습니다.

이렇게하려면 트릭이 있습니까? 아니면 JavaScript를 사용해야합니까?

Answer 1

예, :checked 가짜 균열은 all major mobile browsers에서 작동합니다. CSS와

<input class="dropdowninput" type="checkbox" id="dropdownbox1"/> 
<div class="dropdownbox"> 
    <label for="dropdownbox1">Open dropdown</label> 
    <ul class="dropdown"> 
     <li>...</li><li>etc</li> 
    </ul> 
</div> 

: 확인란을 선택하면

.dropdowninput, .dropdown {display:none;} 
.dropdowninput:checked + .dropdownbox .dropdown {display:block;} 

그 방법은, 당신의 드롭 다운 ul 만 표시됩니다 당신이 할 수있는

하는 방법은 다음과 같다. 단점은 드롭 다운을 열 때 사용자가 수동으로 닫을 경우에만 닫힙니다. CSS와

<div class="dropdown"> 
Open 
    <ul> 
     <li>asdf</li> 
     <li>foo</li> 
    </ul> 
    </div> 

:

.dropdown ul {display:none;} 
.dropdown:hover ul {display:block;} 

this 간단한 jsbin 안드로이드에 내 크롬에 나를 위해 작동

당신은 또한 당신이 찾고있는 효과가 아마 인 :hover를 사용할 수 있습니다.

중첩 된 ul이 드롭 다운 내에서 아무 것도 클릭하지 않은 채로 계속 올려 놓은 상태에서 "트리거링"레이블 요소가 더 이상 포커스가 맞지 않아서 작동합니다. 또한 모바일 브라우저가 작동하는 방식 때문에 :active이 작동하지 않을 수도 있지만 정직해야한다는 것을 알지 못합니다.