【HTML+cssのみ】はてなブログのレスポンシブ対応のドロップダウンメニューを作る方法！

自分のブログのナビゲーションバーにカテゴリーページを全て貼りたいなと考えたのですが、自分のカテゴリーの数は現時点で9種類！

こんな多くのメニューを貼り付けてしまうと、パソコン版の方はともかく、スマホでは

画面の上から下までほぼメニュー！

こんなのあんまりカッコ良くもないし、あまり読みたくもないですよね。

そもそもパソコンでも9つもメニューを載せるなんてないです。普通。

そこで、ドロップダウンメニューです。

9つのカテゴリーを一つのメニューにまとめて、カーソルを乗せるとズラーとしたにメニューが出てくる。

そうすることで、スッキリとしたページにしつつ、カテゴリーを全てナビゲーションバーに乗せることができます。

なんとかしてこれを、

スマホでもパソコンでも自動でサイズを変えてくれる、

いわゆる、レスポンシブデザインで作りたい！

ということで、試行錯誤をしながらなんとかつくりました。

今回はそのコードを紹介します。

レスポンシブ対応のドロップダウンメニューのデザイン

今回作ったのはこんな感じのメニューです。

こんな風にメニューにカーソルを合わせると、下の方にメニューバーと同じ幅の分、二段目のメニューが表示されるというデザインです。

またスマホの時はちゃんとその分、一個一個のメニューの横幅が小さくなり、スクロールも要らず一段の中に全て収まるようにできています。

それ以外にも、カーソルを合わせているかがわかりやすいように、一段目、二段目のそれぞれに合わせた部分の色が反転するcssを書き込みました。

ドロップダウンメニューのソースコード

ドロップダウンメニューのHTML

次に、このドロップダウンメニューのHTMLを少しばかり解説もしながら紹介します。

<div id="menu">
   <ul class="first-menu">
    <li class="first-menu-list"><a href="#">1st-menu</a></li>
    <li class="first-menu-list">1st-menu
      <ul class="second-menu">
        <li class="second-menu-list"><a href="#">2nd-menu</a></li>
        <li class="second-menu-list"><a href="#">2nd-menu</a></li>
        <li class="second-menu-list"><a href="#">2nd-menu</a></li>
        <li class="second-menu-list"><a href="#">2nd-menu</a></li>
        <li class="second-menu-list"><a href="#">2nd-menu</a></li>
        <li class="second-menu-list"><a href="#">2nd-menu</a></li>
        <li class="second-menu-list"><a href="#">2nd-menu</a></li>
        <li class="second-menu-list"><a href="#">2nd-menu</a></li>
      </ul>
    </li>
    <li class="first-menu-list"><a href="#">1st-menu</a></li>
    <li class="first-menu-list"><a href="#">1st-menu</a></li>
    <li class="first-menu-list"><a href="#">1st-menu</a>
      <ul class="second-menu">
        <li class="second-menu-list"><a href="#">2nd-menu</a></li>
        <li class="second-menu-list"><a href="#">2nd-menu</a></li>
      </ul>
    </li>
  </ul>
   </div>

まず、menuというdiv属性を作りその中に、ul属性を作り、その中に一段目のli属性を書き込みました。そしてul属性には「first-menu」と、li属性全てに「first-menu-list」というクラス名を書き込みました。

理由はこの後、cssで「float:left」と左揃えにするのですが、その時に「first-menu li」で「float:left」を指定してしまうと二段目のリストまで左揃えになってしまったので、classを使って一段目のみに反映されるようにしました。

同様に二段目のul属性には「second-menu」と、li属性には「second-menu-list」をつけました。

メニューの数は、任意の数です。ただ、「first-menu」の数は5個までが推奨です。

二つ目の「first-menu」のようにただのテキストにしても、最後の「first-menu」のようにリンクにしても大丈夫です。

「#」には、任意のページのURLが入ります。「1st-menu」や「2nd-menu」には、任意の名前をつけてください。

ドロップダウンメニューのcss

次にcssです。

#menu {
 margin:0 -2000px;
 padding:0 2000px;
 background:#535353;
 border-bottom:1px solid white;

} 
.first-menu {
 position:relative;
 margin:0;
 padding:0;
 width:100%;
 height:40px;
 font-size:.8em;

}
.first-menu-list {
 float:left;
 list-style:none;
 width:20%;/* 要素が5個の場合、 100/(first-menuの数)％*/
 height:40px;
 line-height:40px;
 text-align:center;
 background:#535353;
 color:white;

}
.first-menu-list:hover {
 background:white;
 color:#535353;
 
}
.first-menu-list a {
 display:block;
 color:white;
 text-decoration:none;

}
.first-menu-list:hover a {
 color:#535353;

}
.second-menu {
 display:none;
 padding:0;
 position:absolute;
 top:41px; left:0;
 width:100%;

}
.first-menu-list:hover .second-menu {
 display:block;
 z-index:1;

}
.second-menu-list {
 list-style:none;
 background:white;
 line-height:40px;
 border-bottom:1px solid #535353;
 border-left:1px solid #535353;
 border-right:1px solid #535353;

}
.second-menu-list a {
 display:block;
 color:#535353;
 text-decoration:none;

}
.second-menu-list:hover {
 background:#535353;

}
.second-menu-list a:hover {
 color:white;

}

最初の「menu」の「margin」や「padding」のコードは、ナビゲーションションバーの背景を画面幅いっぱいにするためのコードなので、必要不可欠ではありません。なので、画面幅いっぱいにする必要がない人はこの部分は要りません。

「.first-menu」の「position:relative;」は、この後「absolute」で二段目のリストの絶対位置を設定する時の基準を作るためです。これを抜いてしまうと、画面の上に二段目のリストが表示されてしまいます。

「first-menu-list a」や「second-menu-list a」に「display:block」を指定することで、リンクの要素をlist幅いっぱいに広げることができます。これを指定することで文字の上だけでなくlistの端でもリンクを開くことができます。

「first-menu-list:hover .second-menu 」の「z-index」の部分ですが、自分のブログに実装した時に「1」だと、読者ボタンの数の吹き出し部分がlistよりも上に重なるように表示されてしまいました。どうやら、読者ボタンの吹き出し部分にかなり大きい「z-index」が指定されているようです。僕は、「20」にして対応しました。ここは、適宜コードを変えてください。

「second-menu」の「display:none;」で初期状態では表示させないようにします。その後の「.first-menu:hover .second-menu」の「display:block」で、カーソルを合わせた時だけ表示させるようににしています。

「second-menu」の「position:absolute」で要素の中の絶対位置を指定します。これで、「top:41px;」「left:0px;」でメニューバーの下にピッタリと表示されます。（「top」の1pxはアンダーライン用に開けています。）

二段目の「second-menu」と「second-menu-list」に、それぞれ「width:100%」を入れました。（ここにちょっと筆者は苦戦しました。）親要素である「second-menu」を横幅いっぱいのサイズにしないと、その子要素の「second-menu-list」も横幅いっぱいにならないので両方に「width:100%」を指定する必要があります。

まとめ

いかがでしたか？

背景色などを変えるなどをして自分なりにの、カスタマイズすることもできます。

レスポンシブデザインのナビゲーションバーを作りたい場合は参考にしてください。

以上はるぴろでした。