【はてなブログ向け】階層グローバルナビを作りました。

上の画像のような、はてなブログ向け階層グローバルナビを作りました。

自分が「こういうのがあればいいな」と思ったやつなので、結構こだわってます。

基本的にほぼ全て自分でコードを考えて作りました。

色を変えることやレイアウトを変えることもできます（後ほど解説）。

どういうものか説明したあと、

はてなブログに設置する方法を解説していきます。

はてなブログ向け階層グローバルナビを作りました。
はてなブログに設置する方法。
- メニュー項目を増やしたり削除するには。
- メニュー名とリンク先を設定
色を変えるには？
文字の大きさを変えるには？
左寄せにするには？
文字を改行して、グローバルナビを一行にするには？
まとめ。

はてなブログ向け階層グローバルナビを作りました。

特徴や注意点を説明していきます。

特徴①　アニメーション付き。

マウスを乗せると「にゅ～っ」とアニメーション付きで2階層目が出てきます。

特徴②　スマホ対応

もちろんスマホ対応です。

スマホ画面でこの「メニュー」を押すと↓

メニューが「にゅ～」っと(メニューだけに笑)アニメーション付きで出てきます。

そして2階層目もしっかり表示されます。

もう一度「メニュー」を押すと引っ込みます。

特徴③　1階層目もちゃんとリンクが効く。

よく、階層グローバルナビだと1階層目はリンクが効かなかったりしますが、

これはちゃんと効きます↓

特徴④　横幅がオーバーしたら、一行にも二行にもできる。

メニュー項目が多かったりメニュー名が長くて横幅に入りきらなかった場合、

一行にも二行にもできます。

文字を改行してナビを一行に↓

文字を改行せず、ナビを二行に↓

左寄せにもできます。

やり方は後ほど解説します。

特徴⑤　はてなブログ仕様。

アイコンは、はてなブログにデフォルトで付いてる機能「はてなブログアイコン」を使用してます↓

なので、はてなブログ以外だと表示されません。

また、コードも一部はてなブログ用に書いてます。

3階層目は？

この階層グローバルナビは2階層までです。

3階層目は非対応なのでご了解下さい。

3階層目はあまり使う機会がないと思いやめました。

どのテーマにも使える？

基本的にどのテーマでも使えると思います。

私は、minimalism、Haruni、Brooklyn、UnderShirt、Paletteなど人気のテーマを試しましたが、

どれもうまく表示されました。

はてなブログに設置する方法。

それでは、階層グローバルナビをはてなブログに設置する方法を解説していきます。

まずjQueryを読み込みます。

ダッシュボードの「設定」→「詳細設定」→「head要素にメタデータを追加」に

以下のコードをコピペします↓

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

→下の方にある「変更する」。

jQueryをすでに読み込んでいる人はこれは省略してください。

次に、ダッシュボードの「デザイン」→「カスタマイズ」→「ヘッダ」→「ブログタイトル下」に

以下のコードをコピペします。


<div id="level-gnav">
      <div id="menu-btn">
        <i class="blogicon-reorder"></i> メニュー
      </div>
      <ul class="level-1">
        <li><a href="リンク先URL">メニュー１</a></li>
        <li><a href="リンク先URL">メニュー２</a></li>
        <li><a href="リンク先URL">メニュー３</a></li>
        <li><a href="リンク先URL">メニュー４（下層あり） <i class="blogicon-chevron-down"></i></a>
          <ul class="level-2">
            <li><a href="リンク先URL">下層メニュー１</a></li>
            <li><a href="リンク先URL">下層メニュー２</a></li>
            <li><a href="リンク先URL">下層メニュー３</a></li>
            <li><a href="リンク先URL">下層メニュー４</a></li>
            <li><a href="リンク先URL">下層メニュー５</a></li>
            <li><a href="リンク先URL">下層メニュー６</a></li>
          </ul>
        </li>
        <li><a href="#">メニュー５（下層あり） <i class="blogicon-chevron-down"></i></a>
          <ul class="level-2">
            <li><a href="リンク先URL">下層メニュー１</a></li>
            <li><a href="リンク先URL">下層メニュー２</a></li>
            <li><a href="リンク先URL">下層メニュー３</a></li>
            <li><a href="リンク先URL">下層メニュー４</a></li>
            <li><a href="リンク先URL">下層メニュー５</a></li>
            <li><a href="リンク先URL">下層メニュー６</a></li>
          </ul>
        </li>
        <li><a href="リンク先URL">メニュー６</a></li>
        <li><a href="リンク先URL">メニュー７</a></li>
      </ul>
</div>

<script>
    $(function(){
      $(window).on('load resize',function(){
        if(window.matchMedia("(max-width:960px)").matches){
          $(".level-2").show();
        }else{
          $(".level-1 > li").hover(function(){
            $(this).find("ul").slideDown();
          },
          function(){
            $(this).find("ul").slideUp();
          });         
        };
      });
    
      $("#menu-btn").click(function(){
        $(".level-1").slideToggle();
      });
    
    });
</script>

次に、その下の方にある「デザインCSS」に

以下のコードを貼り付けます。


/* はてなブログにデフォルトで付いてる余白消す */
#level-gnav ul{
   padding-left:0;
}

#level-gnav{
  background:#000;/*グローバルナビの背景色*/
}

#menu-btn{
  color:#fff;/*スマホ画面の、「メニュー」ボタンの文字色*/
  display:none;
}

.level-1{
  display:flex;
  flex-wrap: wrap;/*文字を改行してナビを1行にするにはこれ消す*/
  margin:0 auto;
  max-width:1200px;
  justify-content: center; /*ナビ中央寄せ*/
}

.level-1 li{
  list-style: none;
  position:relative;
}

#level-gnav a{
  color:#fff;/*グローバルナビの文字色*/
  text-decoration: none;
  display:block;
  padding:15px 18px;
  font-size:16px;/*文字の大きさ*/
}

#level-gnav a:hover{
  background:#777;/*マウスを乗せた時の色*/
}


.level-2{
  position:absolute;
  background:#333;/*下層メニューの背景色*/
  top:100%;
  left:0;
  display:none;
  z-index: 2;
  width:100%;
}


/* --------タブレット・スマホ画面--------- */
@media(max-width:960px){
  
  #menu-btn{
    display:block;
    padding-left:10%;
    padding-top:10px;
    padding-bottom:10px;
    text-align:left;
  }

  .level-1{
    display:none;
  }

  .level-2{
    position:static;
  }

  #level-gnav a{
    text-align:left;
  }

  #level-gnav .level-2 li a{
    padding-left:35px;
  }

}

→上の方にある「変更を保存する」

これでひとまずOK。

階層グローバルナビが表示されてるはずです。