CSS3로 아코디언 메뉴를 만들려면 어떻게해야합니까?

Question

HTML5와 CSS3만으로 확장 가능한 메뉴를 만들려면 어떻게해야합니까?

4 개의 메뉴 항목 만 표시하고 모든 목록 항목을 보려면 모든 항목을 클릭하면 모든 목록 항목이 확장되어야합니다.

Answer 1

몇 가지 방법이 있습니다. 예를 들면 다음과 같습니다. HTML은 다음과 같습니다. 당신이 클릭하는 div가 있고 밑에있는 div가 확장됩니다. 이것은 pseudo-selector : target에서만 가능합니다.

<div class="accordion"> 
    <div id="one" class="section"> 
      <h3> 
        <a href="#one">Heading 1</a> 
      </h3> 
      <div> 
        <p>Content</p> 
      </div> 
    </div> 
    <div id="two" class="section"> 
      <h3> 
        <a href="#two">Heading 2</a> 
      </h3> 
      <div> 
        <p>Content</p> 
      </div> 
    </div> 
</div>​ 




.accordion h3 + div { 
     height: 0; 
     overflow: hidden; 
     -webkit-transition: height 0.3s ease-in; 
     -moz-transition: height 0.3s ease-in; 
     -o-transition: height 0.3s ease-in; 
     -ms-transition: height 0.3s ease-in; 
     transition: height 0.3s ease-in; 
} 

.accordion :target h3 + div { 
     height: 100px; 
} 

.accordion .section.large:target h3 + div { 
     overflow: auto; 
} 

나는 당신을 위해 일하는 피들을 만들었습니다. 그것을 보라 : 당신은이를 확인하실 수 있습니다 Check me out!

Answer 2

: http://thinkphp.github.com/cuba.js/accordion.html 소스 : https://github.com/thinkphp/cuba.js 환호!