【HTML/CSS】他階層メニューについて

こんにちは。駆け出しプログラマーの石井です。

こちらではに他階層メニューついて説明します。

勉強するうえでの参考になれば幸いです。

他階層メニューとは

他階層メニューとは、各メニューからさらに細かいメニューを表示させることを言います。

またドロップダウンメニューとも呼ばれています。

他階層メニューはカテゴリメニューを実装するのに最適なので、 グローバルナビやサイドナビなどのナビゲーションで活用されています。

他階層メニューの書き方

HTML

<ul class="construction">

<li>親階層

　<ul>

  　<li>>子階層（部門）

　　　<ul>

　　　　<li>>孫階層</li>

　　　　<li>>孫階層</li>

　　　　<li>>孫階層</li>

　　　</ul>

　　</li>

　　<li>>子階層（部門）

　　　<ul>

　　　　<li>>孫階層</li>

　　　　<li>>孫階層</li>

　　　　<li>>孫階層</li>

　　　</ul>

　　</li>

　　<li>>子階層（部門）

　　　<ul>

　　　　<li>>孫階層</li>

　　　　<li>>孫階層</li>

　　　　<li>>孫階層</li>
　　　</ul>

　　</li>

　</ul>

</li>

</ul>

CSS

.construction{

list-style-type: none;

}

.construction ul {

margin: 0;

padding: 0;

list-style-type: none;

}

.construction ul {

position: relative;

margin-left: 15px;
}

.construction ul:before {

content: "";

display: block;

position: absolute;

top: 0;

bottom: 0;

left: 0;

width: 0;

border-left: 1px solid red;

}

.construction ul li {

position: relative;

margin: 0;

padding: 7px15px;

}

.construction ul li:before {

content: "";

display: block;

position: absolute;

top: 15px;

left: 0;

width: 15px;

height: 0;

border-top: 1px solid blue;

}

.construction ul li:last-child:before {

top: 15px;

bottom: 0;

height: auto;

background-color: #fff;

}

となります。

これらを実行すると、

親階層

というのが作られ、親階層の下に子階層が表示され、子階層の下に孫階層が３つ階層別に表示されるようになっています。

以上が他階層メニューのコードの書き方です。