検索

キーワード


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

  • 公開日:2020-10-13 17:41:03
  • 最終更新日:2020-11-20 00:08:02
【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;

}


となります。


これらを実行すると、


親階層


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


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


【著者】

石井雅人

こんにちは、駆け出しのプログラマーの石井雅人です。 まだまだ未熟者ですが一緒に頑張っていきましょう! 趣味はアニメや声優・それらのライブに行くことです。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ