메뉴가 표시되지 않습니다 (CSS 체크 박스)

내 웹 사이트를 concrete5로 변환 중입니다. 이 웹 사이트는 반응이 좋을 것으로 예상됩니다. 그래서 저는 작은 화면을위한 반응이 빠른 메뉴를 만들려고합니다.메뉴가 표시되지 않습니다 (CSS 체크 박스)

그러나 내 메뉴 버튼을 클릭하면 메뉴가 표시되지 않습니다 (표시 : 블록으로 전환되지 않음).

코드 :

CSS : (concrete5에서 가져온)

/*Show menu when invisible checkbox is checked*/ 
input[type=checkbox]:checked ~ ul.nav { 
    display: block; 
}

HTML :

<div id="navwrapper"> 
    <label for="show-menu" class="show-menu">Show Menu</label> 
    <input type="checkbox" id="show-menu" role="button"> 
    <div id="menu"> 
    <div id="test" class=" ccm-block-styles"> 
     <ul class="nav"> 
     <li class="nav-selected nav-path-selected"><a href="/" target="_self" class="nav-selected nav-path-selected">Home</a></li> 
     <li class=""><a href="/index.php/biography/" target="_self" class="">biography</a></li> 
     <li class=""><a href="/index.php/sculptures/" target="_self" class="">sculptures</a></li> 
     <li class=""><a href="/index.php/drawings/" target="_self" class="">drawings</a></li> 
     <li class=""><a href="/index.php/paintings/" target="_self" class="">paintings</a></li> 
     <li class=""><a href="/index.php/installation/" target="_self" class="">installation</a></li> 
     <li class=""><a href="/index.php/studio/" target="_self" class="">studio</a></li> 
     <li class=""><a href="/index.php/info/" target="_self" class="">info</a></li> 
     <li class=""><a href="/index.php/contact/" target="_self" class="">contact</a></li> 
     </ul> 
    </div> 
    <div id="links" class=" ccm-block-styles"> 
     <p><a href="https://www.facebook.com/erlend.vanlandeghem?fref=ts" target="_blank"><img src="/files/cache/3ae097c24f710271444b8d9e77aab5d4_f38.png" alt="facebook.png" width="20" height="20"></a>&nbsp;&nbsp;<img src="/files/cache/5d2604980ec06d13bb257fec2ed03283_f36.png" alt="Linkedin.png" width="20" height="20">&nbsp;&nbsp;<a href="mailto:[email protected]"><img src="/files/cache/0e6dbc07cf49fee9d65a14a779ce2eff_f37.png" alt="mail.png" width="20" height="20"></a></p> 
    </div>

출처

2014-11-26 Jacob

당신은 아마도 데모에 대한 링크가 있습니까 : 당신이 인접 형제 선택자 (+)를 사용하는 경우에 작동합니다? – Gezzasa

'input'과'ul'는 공통의 부모를 공유하지 않으므로 선택자가 작동하지 않습니다. 'input [type = checkbox] : 체크 됨 ~ #menu #text ul.nav' 수도 있습니다. –

Paulie_D가 작동하지 않습니다. 데모를 어떻게 링크합니까? – Jacob

확인 방법 general sibling selector 작동합니다.

/*Show menu when invisible checkbox is checked*/ 
 
input[type=checkbox]:checked ~ #menu{ display: none; }

<div id="navwrapper"> 
 
    <label for="show-menu" class="show-menu">Show Menu</label> 
 
    <input type="checkbox" id="show-menu" role="button"> 
 
    <div id="menu"> 
 
    <div id="test" class=" ccm-block-styles"> 
 
     <ul class="nav"> 
 
     <li class="nav-selected nav-path-selected"><a href="/" target="_self" class="nav-selected nav-path-selected">Home</a> 
 
     </li> 
 
     <li class=""><a href="/index.php/biography/" target="_self" class="">biography</a> 
 
     </li> 
 
     <li class=""><a href="/index.php/sculptures/" target="_self" class="">sculptures</a> 
 
     </li> 
 
     <li class=""><a href="/index.php/drawings/" target="_self" class="">drawings</a> 
 
     </li> 
 
     <li class=""><a href="/index.php/paintings/" target="_self" class="">paintings</a> 
 
     </li> 
 
     <li class=""><a href="/index.php/installation/" target="_self" class="">installation</a> 
 
     </li> 
 
     <li class=""><a href="/index.php/studio/" target="_self" class="">studio</a> 
 
     </li> 
 
     <li class=""><a href="/index.php/info/" target="_self" class="">info</a> 
 
     </li> 
 
     <li class=""><a href="/index.php/contact/" target="_self" class="">contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div id="links" class=" ccm-block-styles"> 
 
     <p> 
 
     <a href="https://www.facebook.com/erlend.vanlandeghem?fref=ts" target="_blank"> 
 
      <img src="/files/cache/3ae097c24f710271444b8d9e77aab5d4_f38.png" alt="facebook.png" width="20" height="20"> 
 
     </a>&nbsp;&nbsp; 
 
     <img src="/files/cache/5d2604980ec06d13bb257fec2ed03283_f36.png" alt="Linkedin.png" width="20" height="20">&nbsp;&nbsp; 
 
     <a href="mailto:[email protected]"> 
 
      <img src="/files/cache/0e6dbc07cf49fee9d65a14a779ce2eff_f37.png" alt="mail.png" width="20" height="20"> 
 
     </a> 
 
     </p> 
 
    </div>

출처

2014-11-26 12:04:09

내 코드에서이 작업을 수행하려고해도 여전히 작동하지 않습니다. 크롬으로 테스트 할 때 'ul'태그의 표시 설정을 변경하면 메뉴가 표시됩니다. 이 스크린 샷을 확인하십시오 : http://imgur.com/QvYw6yi – Jacob

형제 선택기의 작동 방식을 읽어야합니다. 'ul' 요소에서 사용할 수 없습니다 형제 선택자'+'다음 요소를 선택하고 다음 요소는'ul'이 아닌 id #menu로'div'입니다. –

좋아요. 그래도 내 사이트의 메뉴를 표시하거나 숨기려면 올바른 코드를 찾을 수 없습니다. 문제는 메뉴가 일반 HTML 및 CSS에서 작동하지만 Concrete5로 이식 된 이후 작업이 중단 된 것입니다. 전체 메뉴를 선택하고 표시하거나 숨길 수있는 올바른 방법을 찾을 수 없습니다. – Jacob

메뉴가 표시되지 않습니다 (CSS 체크 박스)

답변

관련 문제