ブログカスタマイズの雑談BLOG

CSSだけで多階層のアコーディオンメニュー（ツリーメニュー）を作りたいと思います。
私がやりたいのは「CSSだけで」ってことです。
「JavaScript」や「jQuery」を使わずに、CSSだけを使って多階層のアコーディオンメニュー（ツリーメニュー）を作りたいのです。（我が儘かよｗ）



まずこの記事では、私がアコーディオンメニュー（ツリーメニュー）を作るために参考にしたサイト様を紹介します。
そして、次の記事では参考にしたサイト様を設定する方法を説明して、その後、改めて私が作ったアコーディオンメニュー（ツリーメニュー）を紹介します。






ちなみに「アコーディオンメニュー（ツリーメニュー）」と表記してきたため、まるで「アコーディオンメニュー」と「ツリーメニュー」が全く同じもののように思われるかもしれませんが、厳密には違います。
先に、私が考える「アコーディオンメニュー」と「ツリーメニュー」を説明しておきます。

アコーディオンメニューとツリーメニューの違い

アコーディオンメニューは見出しを垂直方向に並べたリストで、見出しをクリックすることでそれに関連したコンテンツを出したり、見えなくしたりできます。
（参照：U-Site「デスクトップの複雑なコンテンツに対するものとして、アコーディオンが常に答えになるとは限らない」2014年7月9日）


アコーディオンメニューの隠された部分には、タイトルのように1行表示のものだけではなく文章も入れることができますが、アコーディオンを使う場合はおそらくメニューとしてリストタイトルを表示させることが多いのではないでしょうか。



ツリーメニューは階層表示型のメニューなので、表示したいリストタイトルが表に出ている状態（隠されていない状態）がツリーメニューの基本形なのだと思います。サイトの構造などが一目でわかるような表示になるでしょう。
でも、ツリーメニューでも下階層のリストを隠すことができるので、そうすると見た目はアコーディオンメニューと大差ないことになります。



アコーディオンメニューとツリーメニューの違いを大げさに言うと、ボタン風に表示しているか文字だけで表示しているか、程度の違いではないでしょうか。（勝手に私がそう思っているだけで、実際に調べたわけではないので信用しないでくださいｗ）



アコーディオンメニューもツリーメニューも、「クリックしてリストを開閉させるメニュー」という意味ではほとんど同じです。
なので、このブログでは「アコーディオンメニュー」と「ツリーメニュー」を同じような機能を持つメニューと捉え、厳密に区別して説明していません。なんとなくニュアンスでご理解ください。

なぜアコーディオンメニュー（ツリーメニュー）を作りたいのか

このブログの上部にはグローバルナビゲーションメニューを設定していますが、ページをスクロールするとナビメニューが見えなくなります。



ページの案内が出来なくなってしまうのは困るので、ページの上部に常にグロバールメニューを表示させておくという方法もありますが、私のように多階層なナビメニューを設定している場合は、正直なところ邪魔になります。
常にページの上部にグローバルナビメニューが存在していると、ページをスクロールしようとマウスを動かしている時に、ついついメニューの上にマウスが乗ってしまって、意図していないのにメニューの下階層が展開してしまいますからね。そうなると記事を読むのにメニューの下階層が目隠しをしてしまうような状態になってしまいます。



このブログのようにサイドバーがあるようなテンプレートを使用している場合は、サイドバーにメニューを置くといいのではないでしょうか。
ページをスクロールすることを考えて、サイドバーの一番上ではなく真ん中とか下の方にさり気なくメニューを置いておく。そうすると、ページの上部を見ている人はグローバルナビメニューでページを選択すればいいし、記事の途中で移動する場合は、サイドバーのメニューを使って移動すればいいわけです。



ということで、「サイドバーの下の方にメニューを置くことができたら便利だろうな（私が！）」と思ってアコーディオンメニューを探しましたが、第2階層までのメニューが多く、また検索に引っ掛かるのはほとんど「JavaScript」や「jQuery」を使っているものばかりで、ちょっと困ってしまいました。


確かに「JavaScript」や「jQuery」を使った方が、デザイン的にもスタイリッシュなメニューを作ることができそうです。
でも、たかがブログなもんで、別にスタイリッシュじゃなくてもいいのです（笑）
「JavaScript」や「jQuery」を使う必要は無いんですよね。
だいたい、ブログのテンプレートにはスマホ用のテンプレートが準備されているのが普通だし、別にレスポンシブにしなくてもかまわない場合は、スタイリッシュにする必要はないと思います。（あくまでも私は、です）
ちゃんと機能すればいいんです。



スタイリッシュさを求めているのではなくて、私は「多階層」のアコーディオンメニュー（ツリーメニュー）を使いたいわけです。
第2階層までじゃなくて、第3階層、第4階層と好きなように設定できるメニューが欲しいのです。


などと考えているうちに、どうしても「CSSだけで多階層のメニューを作りたい！」と思うようになりました。
以降の記事で、CSSだけで多階層のアコーディオンメニュー（ツリーメニュー）を作る方法を書いていきたいと思います。
まずこの記事では、メニューを作るにあたり参考にしたサイト様を紹介します。

【参考サイト】CSSだけで作るアコーディオンメニュー（ツリーメニュー）

下記で紹介するのは、今回私がアコーディオンメニューを作ろうと思って色々と調べている時に、「わかりやすい説明だな」と思ったサイト様です。


どちらのサイト様も非常に勉強になりましたが、私はどうしても多階層のメニューを作りたかったので、実際には使っていません。でも、どれも「JavaScript」や「jQuery」を使わずにCSSだけで実装されているので、「検索結果が多すぎてどのメニューを参考にしたらいいのかわからない」という方は下記のサイト様の記事を読んでみてください。


（勝手に私が紹介しているだけで、各サイト様はこのようなブログにご自分のサイトが登場していることは御存知ありません。勝手に紹介してしまって申し訳ありません。）

（1）Webpark様　CSSだけで作るアコーディオンメニュー

まずご紹介するのは、私がいつも参考にしている『Webpark ウェブサイト作成に役立つことをいろいろと』様です。
このブログでもグローバルナビゲーションメニューを作る際に参考にしました。
参考に、というか参考どころか勝手にいじりまくっちゃって、なんだかおかしな感じのナビメニューにしてしまったこと、本当に申し訳ありませんでした。（ご覧になることはないでしょうが、ここで改めて謝罪しておきます）


『Webpark』様のサイトは勉強になる記事がたくさんあって、カスタマイズに困ったらいつも覗きに行っています。ヒントがたくさん散りばめられているサイト様です。



記事では「ラジオボタン」を使ってアコーディオンメニューを作っておられます。
勝手に「チェックボックス」に変更してカスタマイズしてみましたが、バッチリ動きました。（こうやっていじっていくうちにわけがわからなくなるのですｗ）
デザインも私の好みです。
説明もわかりやすいので、メニューをどうしようか迷っておられる方は、まずはこちらの記事を読んでみられてはいかがでしょうか。



多階層ではなく第2階層までのアコーディオンメニューです。
「ul」「li」のリストタグを使って作っておられるので多階層に出来ると思いましたが、というか多階層に出来ますが、私はどうしても第1階層の左端に何かマークを入れて、クリックしてメニューを開く時にそのマークを動かしたかったので、どうにかできないものかと編集しているうちにわけがわからなくなりました。
（この時点では「label」と「input」がどのように作用するのかがわかっていない状態でしたので、こういう結果になりました。もちろん今でも「label」と「input」の関係はよくわかりませんけどもｗ）



誤解のないように書いておきますが、『Webpark』様のアコーディオンメニューには「クリックして開閉するたびに変化するマーク」があります。見出しの後ろ（つまり見出しの右端）です。見出しの左端にもマークがありますので、デザイン的にも満足がいく仕様です。
動作も問題ないし、何もいじらずにそのまま使わせてもらえばいいだけなのです。それなのに私が「変化するマークを左端に表示させたい」と思って色々といじってしまったので、原型がわからなくなっただけです。


私のようなアホなことはなさらずに、素直に導入すれば何ら問題はありません。
個人的には非常におススメのアコーディオンメニューです。

（2）coliss様　CSSだけで作るアコーディオンメニュー

『coliss』様の記事です。
こちらの記事では、海外の方が作られたアコーディオンメニューを解説しておられます。
説明もわかりやすいですし、アコーディオンメニューのデザインも、私は好きです。



上記の『Webpark』様の記事と同じく、第2階層までのメニューになります。
「label」と「input」で作られています。（リストタグを使っているわけではありません）

（3）Webデザインラボ様　CSSだけで作るツリーメニュー

『Webデザインラボ』様の記事です。
アコーディオンメニューではなくツリー型配置のメニューです。ボタン表示ではありません。
ツリーメニューにすれば多階層で表示できるので、アコーディオンメニューよりもツリーメニューの方が私のやりたいことを可能にできると思って参考にしました。



非常にシンプルな作りです。（文字だけの表示なので）
ツリーメニューなので第3階層までありますが、リストタグではありません。
説明もわかりやすいですね。私はこちらの記事で、チェックボックスとラジオボタンの違いを学びました。

（4）CodyHouse様　CSSだけで作るアコーディオンメニュー

『CodyHouse』様が作られたアコーディオンメニューです。
非常にスタイリッシュで、私の好みに合致しました。
こちらはCSSのみで動くバージョンと、「jQuery」を使ったバージョンの2つを紹介されています。


まずは『CodyHouse』様のページに飛んで、デモを動かしてみてください。
CSSだけのバージョンと「jQuery」を使ったバージョンの切り替えができますので、どこがどのように違うのかわかりやすいと思います。（上記のURL先に飛ぶと、ヘッダーの右下に「Demo」と「Download」のボタンがありますので、デモのボタンをクリックすればいいです）



こちらのアコーディオンメニューは、「ul」「li」のリストタグと「label」と「input」を使ってコーディングされているので、好きなだけ多階層に編集できます。
しかも見た目はアコーディオンメニューだし、単純な構造になっているので、私のような素人でも簡単に多階層にできます。
このアコーディオンメニューのスタイルをそのまま使ってもいいし、私が実際に使っているようにツリーメニューに変更することも可能です。
第1階層の左端のマークをクリックした時に動かす、というのも簡単にできます。（『CodyHouse』様のデモで確認してみてください）


CSSだけでアコーディオンメニューを設定したい方は、こちらのメニューを使えばいいのではないでしょうか。




次の記事の紹介

ということで、この記事ではCSSだけでアコーディオンメニューを作る際の参考になるサイト様を勝手に紹介しました。
次の記事では、4つ目に紹介した「CSS Multi-Level Accordion Menu」を「CSSだけで」実装する手順を説明します。





しつこいですが「CSSだけで」実装します。
こちらのサイト様が「jQuery」を使ったバージョンを用意しているからといっても私には関係ありませんので無視します。
もしも「jQuery」を使ったバージョンを使いたいのであれば、どうか別の方の記事を読んで実装してください。ネットで検索すれば、たぶんやり方を説明しておられる方がいらっしゃるのではないでしょうか。（私は調べていないのでわかりません）