クリックで開閉する多階層ツリー型リストの作り方

今まで、上のメニューバーの「MENU」をクリックすると、サイドバーのカテゴリーツリーの位置まで飛ぶようになっていたのですが、これだとカテゴリーツリーを見る前に「急に画面がスクロールした、何だったんだろう」で終わってしまう方もいらっしゃるかも知れないと思い、本日別途メニューのページを作成しました。

こちらです！　→メニュー

自動的に生成しているカテゴリーツリーと違い、カテゴリー編成を変えたらこちらも変えなければならないので注意が必要ですが、見る人によっては「ごちゃごちゃしている」と感じられるかも知れないサイドバーのカテゴリーツリーよりは、シンプルではありますが明快な外観になったのではないかと思います。

見た目はシンプルなのですが、サイト制作についてそんなに詳しくない僕のような人間にとっては、これを作るのも結構一苦労だったりします＾＾；

リストの中にリストを作る

まず、大カテゴリーの中に中カテゴリー、その中に小項目といったように、リストの中にリストを作る方法。

普通のリストはこうですね。

それを、こうするだけです。

要するに、親カテゴリーの<li>と</li>の間に、またリストのHTMLタグを挟んでいけばいいんです。

リストのマークを消す方法

普通、リストのHTMLタグ（<ul>や<li>）を使うと、自動的に「マーカー」と呼ばれる記号がつきます。（※このサイトでは、スマホ版ではマークがつかない仕様になっています）

しかし、これがあると、自由にマークをつけることができません。
メニューのページのリストは、リストマークが◇であったり▼であったり⇒であったり、ばらばらですよね。こうした方が分かりやすいと思ったので、デフォルトのマークを消して、マークは手動で入れていきました。

<ul>を<ul style="list-style-type: none">にすると、マーカーが表示されなくなります。

なくすだけじゃなくて、何種類かの中からマークを選ぶこともできます。
詳細：スタイルシート［CSS］/リスト/マーカーの種類を指定する - TAG index Webサイト

リストの中の文字にリンクを張る

これは説明するまでもないと思いますが、リストの中の文字にリンクのタグをつけるだけです。

クリックで開閉する折りたたみメニューの作り方

こちらのサイトで紹介されている方法を、そのまま利用しました。
クリックすると展開表示する"折りたたみメニュー"をホームページに簡単に作る方法 | ふかふか交易所

リストタグとクリック開閉タグを併用する！

ここまでで紹介したHTMLタグを組み合わせると、クリックで開閉する多階層ツリー型リストを作ることができます。


こちらのサイトでも説明してくださっていますが、
と
のIDは、開閉部分を作るたびに新しく自分で任意の文字列を入れる必要があります。

デフォルトの「open」のまま使い回してしまうと、どこをクリックしても１番上の開閉部分だけが開閉するようになってしまうのでご注意ください！

スマホ用サイトにも有効

もっとスマートなやり方があるとは思いますが、HTMLだけで完結するというところが、初心者にとっては分かりやすくていいと思いました。

元々、今回こういうメニューを作ろうと思い立ったのは、スマホ版でのデフォルトのメニューが、このブログに適していなかったためです。（カテゴリー名が長すぎて表示できていませんでした＾＾；）

つまり、スマホ版用に作ったメニューをPC版に逆輸入したということです。
スマホでもPCでも問題なく動いています！
お悩みの方はぜひ試してみてください＾＾