開閉メニューはdetailsタグが便利(javascript、css不要)

開閉メニューを作成する場合、 JavaScript(jQuery)やCSSを使うのが今までのやり方でした。

ですが、HTML5で追加された「details」タグを使えば、 JavaScript(jQuery)やCSSを使うことなく、 簡単に開閉メニューを作ることができます。

ここでは、「details」タグを使って開閉メニューを作る方法を紹介します。

(補足: ブラウザの対応状況)
2018年9月時点で、「Edge」「IE」はdetailsタグに残念ながら対応していません。

「Edge」「IE」が対応すれば、detailsタグを使った手法がメジャーな手法になると思います。

ブラウザの対応状況はこちらで調べられます。

https://caniuse.com/

シンプルな開閉メニュー

「メニューA」の中にA-1、A-2、A-3があって、
「メニューB」の中にB-1、B-2、B-3があるシンプルな開閉メニューです。


メニューA
  • A-1
  • A-2
  • A-3
メニューB
  • B-1
  • B-2
  • B-3

上の開閉メニューのコードは以下の通りです。

detailsタグとsummaryタグを使っています。


<details>
	<summary>メニューA</summary>
	<ul>
	  <li>A-1</li>
	  <li>A-2</li>
	  <li>A-3</li>
	</ul>
</details>
<details>
	<summary>メニューB</summary>
	<ul>
	  <li>B-1</li>
	  <li>B-2</li>
	  <li>B-3</li>
	</ul>
</details>

たったこれだけのコードで開閉メニューができます。

開閉状態を示す三角マークも自動で付けてくれるので、 いたれりつくせりのタグです。

階層のある開閉メニュー

次のような階層を持つメニューを作成します。


メニューA
├ A-1
│ ├ A-1-1
│ ├ A-1-2
│ └ A-1-3
└ A-2
  ├ A-2-1
  ├ A-2-2
  └ A-2-3

下は実際のメニューです。


メニューA
A-1
  • A-1-1
  • A-1-2
  • A-1-3
A-2
  • A-2-1
  • A-2-2
  • A-2-3

上のメニューのHTMLコードは次の通りです。


<details>
	<summary>メニューA</summary>
	<details>
		<summary>A-1</summary>
		<ul>
		  <li>A-1-1</li>
		  <li>A-1-2</li>
		  <li>A-1-3</li>
		</ul>
	</details>
	<details>
		<summary>A-2</summary>
		<ul>
		  <li>A-2-1</li>
		  <li>A-2-2</li>
		  <li>A-2-3</li>
		</ul>
	</details>
</details>

まとめ

・開閉メニューはdetailsタグを使うと簡単に実装できます。

・階層のある開閉メニューも作れます。

・ただし、「Edge」「IE」は現時点では対応していません。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする