SEO対策などを考えて、目次を導入するサイトが増えてきているようです。
一か所のアコーディオンのお為にわざわざjavascriptやjqueryを使うのも面倒な時にcssだけでアコーディオンを実装する方法を紹介します。
ただ、アニメーションをさせようとすると一筋縄ではいかないので少々強引なやり方になってしまいます。
尚、アコーディオン内がテキストを想定したものになりますのでご留意ください。
まずはHTMLソースです。
<div id="outer">
<input id="open_btn" type="checkbox" checked="checked">
<div id="openclose" class="outer">
<label id="index" for="open_btn">目次-<span></span></label>
</div>
<div id="containouter">
<ol>
<li><a href="">メニュー１</a></li>
<li><a href="">メニュー２</a></li>
<li><a href="">メニュー３</a></li>
<li><a href="">メニュー４</a></li>
<li><a href="">メニュー５</a></li>
<li><a href="">メニュー１</a></li>
<li><a href="">メニュー２</a></li>
<li><a href="">メニュー３</a></li>
<li><a href="">メニュー４</a></li>
<li><a href="">メニュー５</a></li>
<li><a href="">メニュー１</a></li>
<li><a href="">メニュー２</a></li>
<li><a href="">メニュー３</a></li>
<li><a href="">メニュー４</a></li>
<li><a href="">メニュー５</a></li>
<li><a href="">メニュー１</a></li>
<li><a href="">メニュー２</a></li>
<li><a href="">メニュー３</a></li>
</ol>
</div>
</div>クリックを判定するためにcheckboxを使用します。また、目次の開くボタン部分と、実際に開閉する部分を大枠でくくっています。
今回この目次内の<ol>内を
line-height:
max-height:
padding:
opacity:
の４つを調整して、高さをなくすことによってアコーディオンしてる風にします。
例えば枠ごとアコーディオンさせようとするとheightやscaleを使いますが、100%やautoが上手くアニメーションしてくれません。
高さを指定してしまうと目次の内容が変わるたびに調整しなければなりませんので、それも手間です。
結果、内容の各要素内テキストを全て高さ０にすることによってアコーディオンを実装します。
以下がcssです。
#outer{/*大枠*/
width: 96%;
max-width: 400px;
margin: 3rem auto;
padding: 1rem 0 0 0;
border:1px solid #333;
}
#open_btn{/*チェックボックスは非表示*/
display: none;
}
#openclose{/*目次ボタン領域大枠*/
width: 100%;
}
#openclose #index{
cursor: pointer;
width: 100%;
display:block;
}
#openclose #index span::after{
content: "開く ";
}
#open_btn:checked ~ #openclose #index span::after {
content: "閉じる";
}
#containouter {/*表示領域大枠*/
width: 100%;
overflow: hidden;
}
#containouter ol {
text-align: left;
margin-bottom: 1rem;
}
#containouter ol *{
line-height: 0;
max-height: 0;
padding: 0 0 0 1rem;
opacity: 0;
transition: all 0.3s;
}
#open_btn:checked ~ #containouter ol *{
line-height: 1.2;
max-height: 100%;
padding: 0 0 0.5rem 1rem;
opacity: 1;
transition: all 0.5s;
}細かいところはそれぞれ調整ですが、重要なのが#containouter ol *{
以下の部分です。
４つのスタイルをうまく合わせることによって、不自然さを消しながらアコーディオンさせています。
今回の書き方はIDを主に使っていますので１ページに1つのアコーディオンを想定していますが、idとclassを調整すれば複数のアコーディオンを実装することも可能かと思います。
コメント