Minimal Green

はてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

トップ > HTML > 多階層のドロップダウングローバルメニュー（レスポンシブ）

多階層のドロップダウングローバルメニュー（レスポンシブ）

HTML CSS ブログカスタマイズ ブログカスタマイズ-グローバルメニュー

f:id:syofuso:20161209160607j:plain
コメントにてリクエストがあったので、3階層のドロップダウンナビゲーションメニューのコードを用意しました。

 

ドロップダウンの作り方

まず、メニューリストの構造とドロップダウンの階層構造の作り方を説明します。
ABC三つの項目があるとして

階層無し

/* メニューリストの構造基本 */
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
  • A
  • B
  • C

CSSを指定しないので縦並びです。

2階層

<li>A-parent
   <ul>
     <li>A-child</li>
   </ul>
</li>

このようにliの中にさらにulを入れ子にすることで階層を作ります。

/* メニューリスト2階層 */
<ul>
  <li>A-parent
   <ul>
      <li>A-child</li>
   </ul>
  </li>

  <li>B</li>
  <li>C</li>
</ul>

3階層

同様に

/* メニューリスト3階層 */
<ul>
  <li>A-parent
    <ul>
      <li>A-child
        <ul>
          <li>A-grandchild</li>
        </ul>
      </li>

    </ul>
  </li>
  <li>B</li>
  <li>C</li>
</ul>

HTMLの基本構造は以上です。次にコピペで使える多階層メニューのHTML、CSSコードを紹介します。

グリーン左揃い3階層メニュー（テーマ「Minimal Green」利用者向け

はてなブログで広く利用されているゆきひーさんのメニューをベースに3階層のメニューを作りました。背景色は「Minimal Green」に合わせています。
ダッシュボード＞デザイン＞カスタマイズ＞ヘッダ＞タイトル下に以下のコードを貼って下さい。（共通HTML)

<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
    </div>
    <ul id="menu-content">
        <li class="first-content">
            <a href="1階層目のリンク">カテゴリ1 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ1-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-3</a></li>
            </ul>
        </li>
        <li class="first-content">
            <a href="1階層目のリンク">カテゴリ2 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ2-1</a>
                    <ul class="third-content">
                      <li><a href="3階層目のリンク">カテゴリ2-1-1</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-1-2</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-1-3</a></li>
                    </ul>
                </li>
                <li><a href="2階層目のリンク">カテゴリ2-2</a>
                    <ul class="third-content">
                      <li><a href="3階層目のリンク">カテゴリ2-2-1</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-2-2</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-2-3</a></li>
                    </ul>
                </li>
                <li><a href="2階層目のリンク">カテゴリ2-3</a>
                    <ul class="third-content">
                      <li><a href="3階層目のリンク">カテゴリ2-3-1</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-3-2</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-3-3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="１階層目のリンク">カテゴリ3</a>
        </li>
        <li>
            <a href="リンク">カテゴリ4</a>
        </li>
        <li>
            <a href="リンク">カテゴリ5</a>
        </li>
        <li>
            <a href="リンク">カテゴリ6</a>
        </li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menu-btn"),
        menuContent = $("#menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 960;
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

ダッシュボード＞デザイン＞カスタマイズ＞デザインCSSに以下のコードを追記して下さい。

/* グリーン左揃い多階層グローバルメニュー */
#menu{
    width: 100%;
    margin: 0 auto;
    background: #47a89c;
}
#menu-inner{
    width: 100%;
    height: 40px;
    margin: 0 auto;
    background: #47a89c;
}
#menu-btn{display: none;}
#menu-content{
    padding-left: 0;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
    list-style-type: none;
}
#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 40px;
    background: #47a89c;
    color: #fff;
    font-size: 80%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #95C7A4;
    color: #fff;
    opacity: 0.8;
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/* 2階層目 */
#menu-content > li > ul.second-content{
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -100;
}
#menu-content > li:hover > ul.second-content{
    visibility: visible;
    top: 40px;
    z-index: 100;
    transition: all .3s;

}
#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 200px;
    height: 40px;
    position: relative;
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;
    background: #47a89c;
    color: #fff;
    font-size: 80%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #95C7A4;
    color: #fff;
}
/* 3階層目 */
li {
  list-style-type: none;
}

ul.third-content {
    position: absolute;
    visibility: hidden;
}

#menu-content > li.first-content > ul.second-content > li > ul.third-content {
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -200;
}
#menu-content > li > ul.second-content > li:hover > ul.third-content {
    visibility: visible;
    top: 0;
    left: 200px;
    z-index: 200;
    transition: all .3s;
    background: #3f968b;
    color: #fff;
}
#menu-content > li > ul.second-content > li > ul.third-content > li{
    text-align: center;
    width: 200px;
    height: 40px;
    position: relative;
    background: #3f968b;
    color: #fff;
}
#menu-content > li > ul.second-content > li > ul.third-content > li > a{
    display: block;
    line-height: 40px;
    background: #3f968b;
    color: #fff;
    font-size: 80%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > ul.third-content > li > a:hover{
    background: #95C7A4;
    color: #fff;
}
/******* トグルメニュ *********/
@media screen and (max-width:960px){
#menu-inner{
    width: 100%;
    height: auto;
}
#btn-content{text-align: right;}
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #47a89c;
    color: #fff;
    font-size: 70%;
}
#menu-content{
    display: none;
    width: 100%;
}
#menu-content > li{
    width: 100%;
    height: 40px;
    float: none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;
    padding: 0;
    text-decoration: none;
}
/* 2階層目 */
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}

/* 多階層グローバルメニューCSSここまで */

 

ピンク等幅3階層メニュー

ピンクにカスタマイズした方向け。
連絡用idコール：id:topbm7nonoさんへ。タイトル下に貼るHTMLは上記と共通です。以前のメニューのCSSは消して、デザインCSSの末尾に以下のコードを追記して下さい。

/* 多階層グローバルメニューピンク等幅 */
#menu{
    width: 100%;
    margin: 0 auto;
    background: #F5A2A2;
}
#menu-inner{
    width: 100%;
    height: 40px;
    margin: 0 auto;
    background: #F5A2A2;
}
#menu-btn{display: none;}
#menu-content{
    padding-left: 0;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
    list-style-type: none;
}
#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
    width: 16.6%;/* 100÷6=16.6% */
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 40px;
    background: #F5A2A2;
    color: #fff;
    font-size: 80%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #f8bdbd;
    color: #fff;
    opacity: 0.8;
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/* 2階層目 */
#menu-content > li > ul.second-content{
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -100;
}
#menu-content > li:hover > ul.second-content{
    width: 100%;
    visibility: visible;
    top: 40px;
    z-index: 100;
    transition: all .3s;

}
#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 100%;
    height: 40px;
    position: relative;
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;
    background: #F5A2A2;
    color: #fff;
    font-size: 80%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #f8bdbd;
    color: #fff;
}
/* 3階層目 */
li {
  list-style-type: none;
}

ul.third-content {
    position: absolute;
    visibility: hidden;
}

#menu-content > li.first-content > ul.second-content > li > ul.third-content {
    visibility: hidden;
    position: absolute;
    width: 100%;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -200;
}
#menu-content > li > ul.second-content > li:hover > ul.third-content {
    visibility: visible;
    top: 0;
    left: 100%;
    z-index: 200;
    transition: all .3s;
    background: #f38b8b;
    color: #fff;
}
#menu-content > li > ul.second-content > li > ul.third-content > li{
    text-align: center;
    width: 100%;
    height: 40px;
    position: relative;
    background: #f38b8b;
    color: #fff;
}
#menu-content > li > ul.second-content > li > ul.third-content > li > a{
    display: block;
    line-height: 40px;
    background: #f38b8b;
    color: #fff;
    font-size: 80%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > ul.third-content > li > a:hover{
    background: #f8bdbd;
    color: #fff;
}
/******* トグルメニュ *********/
@media screen and (max-width:960px){
#menu-inner{
    width: 100%;
    height: auto;
}
#btn-content{text-align: right;}
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #F5A2A2;
    color: #fff;
    font-size: 70%;
}
#menu-content{
    display: none;
    width: 100%;
}
#menu-content > li{
    width: 100%;
    height: 40px;
    float: none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;
    padding: 0;
    text-decoration: none;
}
/* 2階層目 */
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}
/* 多階層グローバルメニューCSSここまで */

width: 16.6%;/* 100÷6=16.6% */のところは100％を1階層の項目数6で割って計算しています。項目数を変えるときはここを変更してください。4項目なら25％です。

これでこんな感じの3階層のドロップダウンメニューが出来ました。スマートフォンでは2階層目、3階層目は表示されません。PC表示のみ多階層です。

f:id:syofuso:20161209161155j:plain

ユーザビリティを考えると…

最初の状態で2階層目、3階層目の項目の内容が隠れているドロップダウンはユーザー（読者）目線に優しいデザインではありません。
マウスを乗せないと中身のわからないものにユーザーはなかなか気づきません。

なので、あまりドロップダウンを多用するのはおすすめできません。項目数が多いならもう一つサブメニューを置くのも一つの手です。
ブログではデザイン的に難しいですが。
多階層メニューを使う時は、重要な項目は1階層目に置いた方が良いと思います。

minimalgreen

あわせて読みたい

☆引用の範囲内でしたらこのブログの画像・文章・コード転載OKです。ただし引用元をリンク付きでご明記下さい。

この記事のURLとタイトルをコピーする

最後までお読み下さりありがとうございます。

本格的なカスタマイズをするならはてなブログProがおすすめ！
はてなブログPro詳細