CSSのみでアコーディオンメニュー♠

レッスンご依頼の生徒さんよりのご要望につき…
Webサイトのアコーディオンメニューのサンプルづくり..

三種用意してみた｡｡
ご要望は、3つ目になるかとは思うが…😅
折角の機会なので、CSSだけで実装できるアコーディオンメニューを紹介｡｡
展開用などのアイコンは、万民向けとして記号や文字を適用しているが…
Font Awesomeが利用できるユーザはそちらを活用してもよいかと思う｡｡
✔ドロップダウンリストタイプ
チェックボックスのon/offを利用して展開させる方法
HTMLタグでは展開ごとのID同士で認識をさせていく

CSS

.ac {
width: 35%; /* 横幅 */
border: 0px solid #333;
}
.ac label {
background: #ffa500;
color: #fff;
padding: 12px;
display: block;
margin: 0;
cursor: pointer; /* カーソルをポインタへ変更 */
border-bottom: 1px solid #ccc;
}
.ac label:before,.ac label:after {
content: '\025bc'; /*▼アイコン*/
color: #fff;
padding-right: 20px;
}
.ac label:first-child {
border-top: none;
}
.ac input.switch {
display: none;
}
.ac ul {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
margin: 0;
padding: 0 0 0 25px;
list-style: none;
background: #fff;
}
.ac li {
border-top: 1px dashed #ddd;
padding: 12px 8px 12px 24px;
}
.ac li:first-child {
border-top: none;
}
.ac li:before {
content: "\02660";
font-size: 9px;
font-weight: bold;
color: #ccc;
margin-right: 8px;
}
.ac input.switch + ul{
height: auto; /*展開時高さを自動にする*/
overflow: hidden;
}
.ac input.switch:not(:checked) + ul{
height: 0;
}
.ac input.switch:checked + ul{
height: auto;　/*展開時高さを自動にする*/
}

HTML

<div class="ac">
<label for="ac-1">代表的なOS<span style="font-size:9px;">(オペレーティングシステム)</span></label>
<input type="checkbox" id="ac-1" class="switch" />
<ul>
<li><a href="">Windows</a></li>
<li><a href="">Macintosh</a></li>
<li><a href="">iOS</a></li>
<li><a href="">Android</a></li>
</ul>
<label for="ac-2">iOS機器</label>
<input type="checkbox" id="ac-2" class="switch" />
<ul>
<li><a href="">iPhone</a></li>
<li><a href="">iPad</a></li>
<li><a href="">iMac</a></li></ul>
<label for="ac-3">Android機器</label>
<input type="checkbox" id="ac-3" class="switch" />
<ul>
<li><a href="">スマートフォン</a></li>
<li><a href="">タブレット</a></li>
</ul>
</div>

展開の状態

✔説明タイプ1
<details><summary>を使ったとってもシンプルなアコーディオン
規定で三角の記号が入るので、+記号に変えてみた

CSS

/* list-style: none; 既定の三角削除（Chrome非対応）
* cursor: pointer;  カーソルをポインタへ変更*/
details{
border-bottom: 1px solid #ccc;
background: #fff;
}
details summary {
list-style: none;
cursor: pointer;
padding: 10px;
color: #242323;
background: #fff;
}
/*三角削除(Chrome用)*/
details summary::-webkit-details-marker {
display: none;
}
/*プラスアイコン使用*/
details summary::before {
content: '+';
margin-right: 20px;
}
/*展開時マイナスアイコンに変更*/
details[open] summary::before {
content: '-';
}
details p {
margin: 0;
padding: 20px;
background: #fff5ee;
}
HTML

<details>
<summary>OS(オペレーティングシステム)とは？</summary>
<p>
コンピュータを動かすための基本ソフトのこと。
基本ソフトがなければすべてのコンピュータ機器は動作をしない<br />
<img src="****" /></p>
</details>
<details>
<summary>iOSとは？</summary>
<p>
Appleが開発している独自のOSのことで以下の機器にのみ搭載されている。
独自OSのため、高価<br />
iPhone／iPad／iMac
</p>
</details>
<details>
<summary>Androidとは？</summary>
<p>
Googleが開発しているOSで誰でも自由に使用・複製・改変などが行えるオープンソースとなっている
そのため各メーカーのスマートフォンや
タブレットに搭載されている。機器代だけで良いため、iOS機器より安価となる<br />
<img src="****" />
</p>
</details>
展開の状態
✔説明タイプ2
チェックボックスのon/offを利用して展開させる方法

CSS

.acd-check{
display: none;
}/*チェックボックスの非表示*/
.acd-label{
background: #fff;
color: #fff00;
display: block;
margin-bottom: 1px;
padding: 10px;
position: relative;
cursor: pointer; /*カーソルをポインタへ変更*/
border-bottom: 1px solid #ccc;
}
.acd-label::before{
content: "Q";/*タイトル前アイコン*/
font-weight: bold;
color: #ffa500;
margin-right: 8px;
}
.acd-label:after{
box-sizing: border-box;
content: '\025bc';/*展開用アイコン*/
display: block;
padding: 10px 20px;
position: absolute;
color: #ffa500;
right: 0;
top: 0px;
}
.acd-content{
background: #fff5ee;
border: 1px solid #fff;
display: block;
height: 0;
opacity: 0;
padding: 0 10px;
transition: .5s;
visibility: hidden;
}
.acd-check:checked + .acd-label:after{
content: '\02227';/*展開用アイコン*/
}
.acd-check:checked + .acd-label + .acd-content{
height: auto;
opacity: 1;
padding: 10px;
visibility: visible;
}
HTML

<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check1">OS(オペレーティングシステム)とはなんですか？</label>
<div class="acd-content">
コンピュータを動かすための基本ソフトのこと。基本ソフトがなければすべてのコンピュータ機器は動作をしない！
</div>
<input id="acd-check2" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check2">iOSとはなんですか？</label>
<div class="acd-content">
Appleが開発している独自のOSのことで以下の機器にのみ搭載されている。独自OSのため、高価<br />
iPhone／iPad／iMac
</div>
<input id="acd-check3" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check3">Androidとはなんですか？</label>
<div class="acd-content">
Googleが開発しているOSで誰でも自由に使用・複製・改変などが行えるオープンソースとなっているため、各メーカーのスマートフォンやタブレットに搭載されている。
<br />
機器代だけで良いため、iOS機器より安価となる<br /><img src="****" /></div>展開の状態

👇Webサイト適用の特殊文字や記号👇

CSS - contentで記号（特殊文字）を表示する方法。コード表やシミュレーター有り(疑似要素:beforeや:afterにて)｜及川WEB室
疑似要素:beforeや:afterのcontentで記号（特殊文字）などを表示する方法。conte...
www.oikawa-sekkei.com

コメント