Top Page > Webカスタマイズ > CSSだけで多階層のアコーディオンメニュー(ツリーメニュー)を作る

CSSだけで多階層のアコーディオンメニュー(ツリーメニュー)を作る

ツリーメニュー


「JavaScript」や「jQuery」を使わずに、CSSだけを使って多階層のアコーディオンメニュー(ツリーメニュー)を作ります



まずは、関連記事を紹介しておきます。
CSSだけで多階層のアコーディオンメニューを作るために書いた記事は、この記事で4つ目です。最初から通して読んでもらうと、何となく流れはわかるんじゃないかな?
とか思ったんですけど、別に流れを理解する必要はありませんでした(笑)
上記で掲載しているようなアコーディオンメニュー(ツリーメニュー)を設置したいならば、この後で説明するように設定すればいいだけですから。



ちなみに、この記事の次の記事で『HTML編集でリストタグ「ul」「li」を入れ子にする方法』も書いたので、関連記事として一緒に紹介しています。






私は『CodyHouse』様が作られたアコーディオンメニュー「CSS Multi-Level Accordion Menu」を参考にしてツリーメニューを作りました。
アコーディオンメニューを参考にしてツリーメニューを作った、ということで混乱するかもしれませんが、アコーディオンもツリーも、どちらも「クリックしてリストを開閉させる形態のメニュー」という意味では同じだと考えています。見た目がちょっと違う、って感じでしょうか。



上記の関連記事の1つ目の「参考にしたサイト」を紹介した記事でも説明していますが、見た目の違いを簡単に言うと、アコーディオンメニューはボタン表示になっている(背景色で階層を分けている)メニューで、ツリーメニューは背景色がなく文字タイトルだけで表示されている、というイメージです。



ということで以下、ツリーメニューのHTMLとCSSのコードを掲載します。
コードを掲載しておくだけなので、好きなように改編してください。
画像を変更するとか、そういうのは簡単にできると思います。


【注意】
『CodyHouse』様が作られたアコーディオンメニューを改編しているだけなので、もしも実装してみておかしなところがあるならば、『CodyHouse』様のアコーディオンメニューに戻ってください。『CodyHouse』様のところに間違いなく動くメニューが既に存在しているのだから、私が改編したメニューを実装する必要性は皆無です。


こういうことを書くのは、実は、私自身がSeesaaブログの記事内にデモを設置しようとしてうまくいかなかったからです。サイドバーでは実装できたのに記事内ではできませんでした。おそらくCSSでのclass指定がうまくいかなかったからだと思います。(「記事ページ内のツリーメニュー」と指定しなければいけない感じ?)
あとは、Seesaaブログの記事は改行タグが自然に入るようになっていますので、コードを記述すると勝手に改行タグが入ってしまうから、でしょうか。(改行タグを入れないように設定することも可能ですが、そうすると、こういう文章にも自分で改行タグを入れなくてはいけなので面倒です)
「list-style-type: none;」が効いてなくてリストマークが表示されてしまったので、それを解除するために色々といじっていたら、わけがわからなくなりました。もう、記事内にデモを設置するのは諦めますw

とはいえ、普通に実装する分にはうまくいくと思います。
Seesaaブログの記事内に実装しようと思ったのが間違いであって、しつこいですがサイドバーにはちゃんと設定できていますから、なんかこう、「うまくいかない」と思われる場合は、『CodyHouse』様のメニューに戻ってくださいね。私は関知しません。




完成したツリーメニューと注意点


完成したツリーメニューがどんなものなのか、とりあえずデモブログを紹介しておきます。


デモブログの紹介
デモブログ「テンプレートをいじってみる」
デモブログ「テンプレートをいじってみる」(Seesaaブログ)

テンプレートをいじってみる



デモブログは「Seesaaブログ」です。サイドバーに「メニューリスト」とタイトルを付けてツリーメニューを置いていますので、色々と触って動きを確認してみてください。



あと、念のために完成イメージも掲載しておきます。
実際にこのブログのサイドバーにも設置する予定のツリーメニューです。
「サイドバーで確認してね」と書いておくだけでもいいかな?と思いましたが、もしかしたらツリーメニューを変更してしまうかもしれないし、掲載しないかもしれないし、上記で紹介したデモブログも削除してしまうかもしれないし。念のため、です。



掲載するツリーメニューの画像には、わかりやすくなるようにツリーメニュー全体を線で囲んで背景色を付けました。(実際のツリーメニューには枠線や背景色は付きませんので!)
通常の状態のツリーメニューと、すべての階層を開いた場合、すべての階層を閉じた場合の3つの画像を掲載しますので、どういう感じになるのかを確認してください。


編集後のイメージ
ツリーメニュー


すべての階層を開いた場合
すべての階層を開いたツリーメニュー


すべての階層を閉じた場合
すべての階層を閉じたツリーメニュー



【注意点】「Internet Explorer 8」に対応していない


今から紹介するツリーメニューには、1つだけ注意しておかなければならない点があります。
それは、「Internet Explorer 8」では動かない、ということです。
他のブラウザ(例えば「Google Chrome」や「Firefox」)ではちゃんと動きますし、「Internet Explorer 9」以上でも動きます。「Internet Explorer 8」だけが、動きません。
使っているコードやタグが「Internet Explorer 8」では非対応だからです。



現在の「Internet Explorer」最新バージョンは「11」です。
「Internet Explorer」はWindows10が配布された時点で捨てられていますので(Windows10に標準で入れられている「Microsoft Edge」が「Internet Explorer」の後継ブラウザです)バージョン「11」以上になることはないでしょう。
最新バージョンが「11」なのに、2009年に配布されたバージョン「8」を未だに使用している閲覧者が悪いのだと思います。



というかですね、「IE8」を未だに使っている人は、きっと、使いたくて使っている人たちなんですよ。
だったら表示できないような状況も受け入れているに違いないのです。
ツリーメニューを表示できなくても仕方がないんです。私自身はこのご時世にまだ「IE8」を使っている人達に合わせる気は全くありませんので、さくっと切り捨てることにします。



ちなみに、「Internet Explorer 8」でツリーメニューを見た場合はこのようになります。

IE8で見たツリーメニュー


アイコンの位置がズレています。
あと、タイトル部分をクリックしても、開きません。
でも「Internet Explorer 9」以上で閲覧すると間違いなく動きます。
この点を踏まえて、ツリーメニューを実装するかどうかを考えてください。



ツリーメニューのHTMLコード


ツリーメニューのHTMLコードを掲載しておきます。好きなように改編して使ってください。
ちなみに、記述内に空行がありますが、これは「グループA」「グループB」などの切れ目部分をわかりやすくするために入れたものです。
実際にコピペする場合は、空行は削除してかまいません。


<HTML>
<ul class="tree-menu animated">
<li>
<input type="checkbox" name ="group-1" id="group-1" checked>
<label for="group-1">第1階層 グループA</label>
<ul>
<li>
<input type="checkbox" name ="sub-group-1" id="sub-group-1">
<label for="sub-group-1">第2階層 グループA</label>
<ul>
<li><a href="#0">第3階層 コンテンツA</a></li>
<li><a href="#0">第3階層 コンテンツA</a></li>
<li><a href="#0">第3階層 コンテンツA</a></li>
</ul>
</li>
<li>
<input type="checkbox" name ="sub-group-2" id="sub-group-2">
<label for="sub-group-2">第2階層 グループA</label>
<ul>
<li>
<input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3">
<label for="sub-group-level-3">第3階層 グループA</label>
<ul>
<li><a href="#0">第4階層 コンテンツA</a></li>
<li><a href="#0">第4階層 コンテンツA</a></li>
</ul>
</li>
<li><a href="#0">第3階層 コンテンツA</a></li>
</ul>
</li>
<li><a href="#0">第2階層 コンテンツA</a></li>
<li><a href="#0">第2階層 コンテンツA</a></li>
</ul>
</li>

<li>
<input type="checkbox" name ="group-2" id="group-2">
<label for="group-2">第1階層 グループB</label>
<ul>
<li><a href="#0">第2階層 コンテンツB</a></li>
<li><a href="#0">第2階層 コンテンツB</a></li>
</ul>
</li>

<li>
<input type="checkbox" name ="group-3" id="group-3">
<label for="group-3">第1階層 グループC</label>
<ul>
<li><a href="#0">第2階層 コンテンツC</a></li>
<li><a href="#0">第2階層 コンテンツC</a></li>
</ul>
</li>

<li>
<input type="checkbox" name ="group-4" id="group-4">
<label for="group-4">第1階層 グループD</label>
<ul>
<li>
<input type="checkbox" name ="sub-group-3" id="sub-group-3">
<label for="sub-group-3">第2階層 グループD</label>
<ul>
<li><a href="#0">第3階層 コンテンツD</a></li>
<li><a href="#0">第3階層 コンテンツD</a></li>
</ul>
</li>
<li><a href="#0">第2階層 コンテンツD</a></li>
<li><a href="#0">第2階層 コンテンツD</a></li>
</ul>
</li>
</ul> <!-- tree-menu -->


●コピペするとタグが左端に寄った状態で表示されると思いますので、キーボードの「タブキー(Tabキー)」でタグを1つずつ移動させ、ご自分の使用しているHTMLに体裁よく並べてください。
タグが全部左端に寄っていても気にしない方はそのままでいいと思います。


●『CodyHouse』様のデフォルトのHTMLとは使用しているclass名が違いますが、記述内容はほぼ同じです。class名を変更したのは、このメニューはアコーディオンメニューではなくツリーメニューだからです。(『CodyHouse』様のclass名は「cd-accordion-menu」でしたが、「tree-menu」に変更しました)


●次の記事<■HTMLでリストタグ「ul」「li」を入れ子にして多階層にする方法>で、リストを入れ子にする方法を書いています。リストの階層を増やしたり減らしたりする場合は参考にしてください。
クリックで開閉させる場合は、「<li>」の直下に「input」と「label」が必要になります。紹介しているHTMLコードの「input」と「label」の位置に注意してご自分のブログやサイトに合った記述に変更していってください。



「input」と「label」の名前について


例えば第1階層の「input」と「label」です。

<input type="checkbox" name ="group-1" id="group-1" checked>
<label for="group-1">第1階層 グループA</label>


同じ名前を付けること
「input」と「label」には「group-1」という名前があります。「name」「id」「for」の3ヶ所の名前は統一してください。
細かいことは説明しませんが、統一しないとおかしなことになります。(なんてざっくりとした説明w)


名前は1つずつ
同じ名前を別の「label」グループに付けることはできません。
第1階層のグループAに対する名前が「group-1」ですが、これをグループBにも「group-1」と付けることは許されません。
同じ名前にしてしまうと、『グループAもBも同じものだ』とブラウザに思われてしまいます。


例えば「第1階層 グループA」と「第1階層 グループC」に同じ名前を付けた場合、「第1階層 グループC」をクリックすると、「第1階層 グループA」が開いてしまいます。
ということは、「第1階層 グループC」は開けない、展開することができないということです。(常に「第1階層 グループA」が開くので当然です)
同じ名前にしてしまうとこういう弊害が出ますので、必ず違う名前を付けてください。


特に、階層を増やすために入れ子をする場合は、リスト表示のコード記述をコピペして使うことが多いと思いますので、「input」と「label」の名前の付け方には注意してください。(コピペしたままのコードを使ってしまうと、同じ名前を付けてしまうことになります)



最初からリストを開いておく場合


上記と同じく第1階層の「input」と「label」です。

<input type="checkbox" name ="group-1" id="group-1" checked>
<label for="group-1">第1階層 グループA</label>


「input」の記述のうち、最後に「checked」がありますが、これは「最初から開いておく」という意味です。
「checked」を付けると初めからそのリストは展開済ということになりますので、最初にリストを閉じた状態(第1階層のタイトルだけを表示させた状態)で表示させたいならば「checked」を削除してください。



ツリーメニューのCSSコード


ツリーメニューのCSSを掲載しておきます。好きなように改編して使ってください。
ご自分のブログやサイトのCSS(スタイルシート)の空いた部分に記載すればいいと思います。


<CSS>
/****** ツリーメニュー ******/

.tree-menu {
margin: 0;
padding: 0;
}

.tree-menu ul {
display: none;
}

.tree-menu li {
list-style-type: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.tree-menu input[type=checkbox] {
position: absolute;
opacity: 0;
display: none;
}

.tree-menu label, .tree-menu a { /* 第1階層 */
position: relative;
display: block;
padding: 7px 10px;
}

.tree-menu label:before, .tree-menu label:after, .tree-menu a:after { /* アイコンの位置 */
content: '';
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

.tree-menu label { /* 第1階層 */
cursor: pointer;
padding-left:55px;
}

.tree-menu label:before { /* 第1階層の丸矢印アイコン(90度傾ける)*/
left:10px;
background-image: url(http://tenpureijiru.up.seesaa.net/image/i_arrow01.png);
background-repeat: no-repeat;
background-position: 0 0;
-webkit-transform: translateY(-50%) rotate(-90deg);
-moz-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
-o-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
}

.tree-menu label:after { /* フォルダアイコン(プラス)*/
left: 32px;
background-image: url(http://tenpureijiru.up.seesaa.net/image/i_folder01.png);
background-repeat: no-repeat;
}

.tree-menu a:after { /* オレンジ矢印アイコン */
background-image: url(http://tenpureijiru.up.seesaa.net/image/i_arrow02.gif);
background-repeat: no-repeat;
}

.tree-menu input[type=checkbox]:checked + label:before { /* 丸矢印アイコンを回転する */
-webkit-transform: translateY(-50%) rotate(360deg);
-moz-transform: translateY(-50%) rotate(360deg);
-ms-transform: translateY(-50%) rotate(360deg);
-o-transform: translateY(-50%) rotate(360deg);
transform: translateY(-50%) rotate(360deg);
}

.tree-menu input[type=checkbox]:checked + label:after { /* フォルダアイコン(マイナス)*/
background-image: url(http://tenpureijiru.up.seesaa.net/image/i_folder02.png);
background-repeat: no-repeat;
}

.tree-menu input[type=checkbox]:checked + label + ul,
.tree-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
display: block;
}

.tree-menu ul label,
.tree-menu ul a { /* 第2階層文字の位置 */
padding-left: 80px;
}

.tree-menu ul label:before { /* 第2階層の丸矢印の位置 */
left: 30px;
}

.tree-menu ul label:after,
.tree-menu ul a::after { /* 第2階層のフォルダアイコン、オレンジ矢印の位置 */
left: 52px;
}

.tree-menu ul ul label,
.tree-menu ul ul a { /* 第3階層文字の位置 */
padding-left: 100px;
}

.tree-menu ul ul label:before { /* 第3階層の丸矢印の位置 */
left: 50px;
}

.tree-menu ul ul label:after,
.tree-menu ul ul a::after { /* 第3階層の丸矢印、オレンジ矢印の位置 */
left: 72px;
}

.tree-menu ul ul ul label,
.tree-menu ul ul ul a { /* 第4階層文字の位置 */
padding-left: 100px;
}

.tree-menu.animated label:before { /* アイコン回転の速さ */
-webkit-transition: -webkit-transform 0.8s;
-moz-transition: -moz-transform 0.8s;
transition: transform 0.8s;
}


●『CodyHouse』様のデフォルトのスタイルシートから「必要ない」と私が思った記述はできるだけ削除しています。
ここに書いている記述は、「必要な記述」と「(私が)何を書いてあるのかよくわからないからそのまま残してしまえ!と思った記述」です。
ということで、けっこう不完全な感じの記述なんですが、ちゃんと動いているので問題ないと思います。


●CSSの記述の中で、何についてのスタイルなのかわかるようにコメントアウトで見出しを付けています。(青色の部分です)
それ以外の細かいことは私にはわからないので、ご自分でお調べいただきたいと思います。


●このツリーメニューではアイコン画像を4つ使います。
上記のCSSに赤色で表示しているURLは、私のデモ用のブログURLです。このままこのURLを使うと、私が画像を削除した時や画像の名前を変更した時に、表示できなくなります。
赤色の部分4ヶ所を、必ずご自分のブログやサイトのURLに変更してください


●準備するアイコン用の画像は「16px × 16px」です。「16px」だとCSS内に記述されているので、準備する画像は「16px」で統一した方が良いと思います。
「アイコン」「フリー」「矢印」などの単語でネット検索すると、親切な方が無料でアイコン画像をダウンロードさせてくれるので、探してみてください。


●「丸矢印」のアイコンは下向きの矢印です。なのでCSSの記述に「90度傾ける」という指示があります。
そもそもデフォルトのアイコンが下向きだったのです。(「90度傾ける」という指示はデフォルトから変更していません)
準備する矢印アイコンを下向きにしておけばいいだけですね。


●ついでに、リストを展開する時には「丸矢印」を回転させることにしました。展開済のリストをクリックすると、反対に回転してリストを閉じます。
色々といじっているうちにこんなことになってしまいましたが、なかなか面白いのでそのまま使うことにしました。


●色々書きましたが、準備するアイコン用の4つの画像については記事<■【CSS Multi-Level Accordion Menu | CodyHouse】のアイコン画像を変更する>で少しだけ触れていますので、参考にしてご自分でダウンロードしたらいいと思いますよ。


余白(padding-left)や位置(left)の数値で、アイコンの位置を指定しています
ご自分のブログやサイトにHTMLコードを記述後、実際に動かしながらCSSの余白の数値を調整して、適当な位置を見つけてください。



コード編集後のイメージ


ツリーメニュー




次の記事の紹介

次の記事では「リストを入れ子にする方法」を書いています。リストの階層を増やしたり減らしたりする場合は参考にしてください。


HTMLでリストタグ「ul」「li」を入れ子にして多階層にする方法
前回の記事ではCSSだけで多階層のアコーディオンメニューを作ることになったので、少しだけ「リストタグ」の使い方を説明したいと思います。リストタグを使ってHTMLに記述するためのルールを説明しておかないと‥‥



posted by mameemon | Comment ( 0 ) | Category ( Webカスタマイズ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。