CSSでアコーディオンメニューを作る

ブログ運営
スポンサーリンク
読了時間 挨拶

記事は約 4 分で読めます。

くろやぎ
くろやぎ

みなさん、こんにちは!
くろやぎ(kuroyagikuncom)です。
よろしければ、Twitterの方にも遊びに来てください。

ブログ運営
Info
最新のブログ運営(PV&収益)についてはTwitterで報告しています。
#クロヤギの運営報告

この記事では、CSSだけでシンプルなアコーディオンメニューを作る方法を解説します。

大まかな流れ
  • HTML
    アコーディオンメニューを表示したい場所にHTMLを入力します。
  • CSS
    メニューのデザインと開閉動作のためのCSSを適用します。
  • 動作確認
    実際に記事内に記述してみて、しっかりアコーディオンっぽく動作するか確認します。
スポンサーリンク

CSSのみで作ったアコーディオンメニュー

こちらが、今回の記事で解説するアコーディオンメニューになります。

See the Pen Accordion by くろやぎ (@KUROYAGI) on CodePen.

主な特長は次の通りです。

  • メニューをクリックすることで、サブメニューが展開
  • 展開時にアニメーションを使用し、滑らかに開閉
  • 開閉時にアイコンにアニメーションを適用

cssでアコーディオンメニューを作る

HTML

まずは、labelとulを使って、メニューに表示させたい要素を入れていきます。【メニュー1】の部分が初期状態で表示されている要素で、【サブメニュー1】の部分がクリックをすると表示される要素になります。

<div class="menu">
    <input type="checkbox" id="menu_bar1" class="accordion" />
    <label for="menu_bar1">メニュー1</label>
    <ul id="links1">
        <li><a href="">サブメニュー1</a></li>
        <li><a href="">サブメニュー2</a></li>
    </ul>
    <input type="checkbox" id="menu_bar2" class="accordion" />
    <label for="menu_bar2">メニュー2</label>
    <ul id="links2">
        <li><a href="">サブメニュー1</a></li>
        <li><a href="">サブメニュー2</a></li>
    </ul>
</div>

CSS

チェックボックスに、チェックがついているときはサブメニューを非表示にして、チェックがついていないときは表示するというのが、このアコーディオンメニューの基本的な挙動になります。さらに、リッチさを演出するためにアニメーションを用いています。おまけに矢印アイコンを加えました。

.menu {
	width: 100%;
}

.menu a {
  display: block;
  padding: 10px;
	text-decoration: none;
	color: #000;
}

label {
  display: block;
  margin: 0 0 1px 0;
	padding :20px 10px;
	color :#fff;
  background :#043d78;
}

label:after {
  content: 'v';
  position: absolute;
  right: 3%;
}

#menu_bar1:checked + label:after, #menu_bar2:checked + label:after {
	transition: all 0.5s;
}

#menu_bar1:checked + label:after,
#menu_bar2:checked + label:after {
  transform: rotateX(180deg);
  position: absolute;
  right: 3%;
}

input {
	display: none;
}

.menu ul {
	margin: 0;
	padding: 0;
  background :#f8f5e6;
	list-style: none;
}

.menu li {
  max-height: 0;
  overflow-y: hidden;
	transition: all 1s;
}

#menu_bar1:checked ~ #links1 li,
#menu_bar2:checked ~ #links2 li {
	max-height: 100px;
  opacity: 1;
}

まとめ

いかがでしたか?以下のコードをもとに、自由にカスタマイズして自分のブログにマッチするアコーディオンメニューを作ってみてはいかがでしょうか。

初心者ブロガーが登録すべきASP ベスト3

初心者ブロガーが登録すべきASP ベスト3

A8.net

A8.netは広告主数が豊富で、初心者ブロガーでも簡単に登録できるためアフィリエイトを手軽に始めることができます。
また、A8.netは「セルフバック」が充実していて、レビュー記事にはもってこいです。

もしもアフィリエイト

もしもアフィリエイトは、Amazonアソシエイトと楽天アフィリエイトを一緒に管理できるため余計な手間がかかりません。
さらに、W報酬制度やプレミアム報酬などの、他のASPにはない魅力的な報酬制度があります。

バリューコマース

バリューコマースは、スマートフォン向けのオーバーレイ広告が掲載できる点が特徴です。
また、バリューコマースにしかない広告案件があり、漏れをなくすためのサブののASPとして登録しておいて損はないです。

ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

4人の購読者に加わりましょう

スポンサーリンク
ブログ運営
クロヤギ

コメント

タイトルとURLをコピーしました