見せたいメニューのみ表示して残りをドロップダウンにするレスポンシブナビゲーション(追記あり）

レスポンシブデザインではナビゲーション・メニューのスマートフォン表示に三本バーのハンバーガーメニューを設置している場合が多いと思います。
私もこのブログや他のサイトでハンバーガーメニューを使用しています。

ハンバーガーメニューは使いにくい…
HTMLコード
CSS

ハンバーガーメニューは使いにくい…

レスポンシブデザインではナビゲーション・メニューのスマートフォン表示に三本バーのハンバーガーメニューを設置している場合が多いと思います。
私もこのブログや他のサイトでハンバーガーメニューを使用しています。
ただ、ハンバーガーメニューは中身のリンクが隠れてしまう為、それがメニューだとわかりにくく使いにくい…
おそらくサイト制作者が思っている以上にハンバーガーメニューはユーザーに使われていません。
mislead.jp

かと言ってスマホの小さい画面で表示できる便利なナビゲーションを作るのは難しい…
これはずっと悩みどころでした。

そこで「見せたいメニューのみ表示して残りを「More」（もっと見る…）ドロップダウンにするナビゲーション」はどうだろうかと、このブログに実装してみました。 ====
このアイデアは「Paradeiser」というCSSのみで実装するナビゲーションの記事をヒントにしています。
[CSS]軽量のスタイルシートで、スマホにもデスクトップにも快適で分かりやすいナビゲーション -Paradeiser | コリス
 Paradeiser
「Paradeiser」のMedia Queriesでデスクトップやタブレットで特定のclassを非表示にするアイデアをお借りしています。
ドロップダウンメニューの作り方は以下の記事を参考にしました。
CSSだけで作る動きのあるドロップダウンメニュー｜Webpark
レスポンシブなサイトに！jQueryでオンマウスでもクリックでも開くボタン｜Webpark

特徴
・レスポンシブ対応　特定のclassを付与しデスクトップのみ、タブレットのみなど表示を限定
・PC・タブレット：表示する項目5個→スマートフォン：項目4個
・スマホでナビゲーションのコンテンツが隠れない

【追記】CSSのみではスマートフォンでメニューの開閉の挙動が上手くいかないため、クリックで開けるようにjQueryを使いました。
このブログでは主要なメニュー項目を3つ常に表示させ、デスクトップとタブレットのみ表示させスマホでは非表示にするメニュー項目を一つ、残りのメニューを「MORE」とまとめてドロップダウンに入れました。

PC,タブレットでは5個の項目表示でリストの幅を20%にしています。スマートフォンでは4個のメニュー表示でリスト幅を25%にしています。
詳しくは下記のCSSを見て下さい。
アイコンにははてなブログ独自のwebフォントアイコンを使っていますが、Fontawesomeなどを使えば外部サイトでも使えると思います。

HTMLコード

メニュー項目PC,タブレット5個、スマートフォンで4個設置する場合
「ダッシュボード＞デザイン＞カスタマイズ＞ヘッダ＞タイトル下」に以下のコードを貼り付けます。#にリンク先URL、リンク1などにメニュー項目名を入れて下さい。

<ul id="nav-menu">
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
<!-- 端末ごとに表示する項目を調整 -->
<li class="nav-menu-hidden-phone"><a href="#">スマートフォンで非表示</a></li>
<!-- 右端の残りのドロップダウンメニュー -->
<li class="hover-click"><a href="#"><i class="blogicon-reorder"></i>More</a>
   <ul>
   <li><a href="#">サブメニュー1</a></li>
   <li><a href="#">サブメニュー2</a></li>
   <li><a href="#">サブメニュー3</a></li>
   </ul>
</li>
</ul>
<!--jQueryを使用-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(function() {
  var contents = $(".hover-click > ul");
  $(".hover-click > a").click(function(){
    $(contents).toggle();
    return false;
  });
  $(".hover-click")
  .mouseover(function(){
    $(contents).show();
  })
  .mouseout(function(){
    $(contents).hide();
  });
});
</script>

の部分は表示する項目が全部でPC、タブレットで5個、スマートフォンで4個になるように調整して下さい。

スマートフォンのみ表示する項目は

<li class="nav-menu-hidden-desktop nav-menu-hidden-tablet"><a href="#">スマートフォンのみ</a></li>

デスクトップのみ表示

<li class="nav-menu-hidden-tablet nav-menu-hidden-phone"><a href="#">デスクトップのみ</a></li>

タブレットのみ表示

<li class="nav-menu-hidden-desktop nav-menu-hidden-phone"><a href="#">タブレットのみ</a></li>

タブレット、PCで表示、スマートフォンで非表示（上記コードの例）

<li class="nav-menu-hidden-phone"><a href="#">スマートフォンで非表示</a></li>

このようにliにclassを付与して調整して下さい。
ドロップダウンの構造は以下のようになっています。リンク1～3をドロップダウンに置き換える時に使って下さい。

<li class="hover-click"><a href="#">ドロップダウン<i class="blogicon-chevron-down"></i></a>
   <ul>
   <li><a href="#">サブメニュー1</a></li>
   <li><a href="#">サブメニュー2</a></li>
   <li><a href="#">サブメニュー3</a></li>
   </ul>
</li>

CSS

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

#nav-menu{
  list-style-type: none;
  height: 44px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: #47a89c;
}
#nav-menu li{
  position: relative;
  width: 20%;/*  100÷表示する項目数％ */
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#nav-menu li a{
  display: block;
  margin: 0;
  padding: 14px 0;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  
}
#nav-menu li:hover > a{
  background: #95C7A4;
  color: #fff;
  height: 16px;
}
#nav-menu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 9999;
}

#nav-menu li ul li{
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#nav-menu li ul li a{
  padding: 13px 15px;
  background: #47a89c;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#nav-menu li:hover ul li{
  overflow: visible;
  height: 38px;
  background: #95C7A4;
}

@media (max-width: 760px) {
 .nav-menu-hidden-phone {
    display: none !important;
  }
 #nav-menu {
    height: 60px;
  }
 #nav-menu li{
    width: 25%;/*  100÷表示する項目数％ */
  }
 #nav-menu li a{
  padding: 14px 0;
  }
 #nav-menu li:hover > a{
  background: #95C7A4;
  color: #fff;
  height: 32px;
}
 #nav-menu li:last-child ul{
  left: -100%;
  width: 100%;
}
 #nav-menu li ul li{
  overflow: hidden;
  width: 200%;
  height: 0;
}
}

@media (min-width: 761px) and (max-width: 1025px) {
  .nav-menu-hidden-tablet {
    display: none !important;
  }
}

@media (min-width: 1026px) {
  .nav-menu-hidden-desktop {
    display: none !important;
  }
}
/* ホバー・クリック開閉 */
.hover-click{
  position: relative;
  width: 100%;
  margin: 30px 0;
}
.hover-click > a{
  display: block;
  width: 100%;
  padding: 14px 0;
  background: #47a89c;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}
.hover-click > ul{
  display: none;
  z-index: 9999;
  position: absolute;
  width: 100%;
  background: #95C7A4;
}