欲望に負けたはるぴろです。(仮)スマートフォン用の表示で見る欲望に負けたはるぴろです。(仮)欲望に負けて買ってしまったものやってしまったことなど(主にゲーム)を紹介するブログです。【HTML+cssのみ】はてなブログのレスポンシブ対応のドロップダウンメニューを作る方法!2019-03-17【HTML+cssのみ】はてなブログのレスポンシブ対応のドロップダウンメニューを作る方法!パソコン・タブレットTweet自分のブログのナビゲーションバーにカテゴリーページを全て貼りたいなと考えたのですが、自分のカテゴリーの数は現時点で9種類!こんな多くのメニューを貼り付けてしまうと、パソコン版の方はともかく、スマホでは画面の上から下までほぼメニュー!こんなのあんまりカッコ良くもないし、あまり読みたくもないですよね。そもそもパソコンでも9つもメニューを載せるなんてないです。そこで、ドロップダウンメニューです。9つのカテゴリーを一つのメニューにまとめて、カーソルを乗せるとズラーとしたにメニューが出てくる。することで、スッキリとしたページにしつつ、カテゴリーを全てナビゲーションバーに乗せることができます。なんとかしてこれを、スマホでもパソコンでも自動でサイズを変えてくれる、いわゆる、レスポンシブデザインで作りたい!ということで、試行錯誤をしながらなんとかつくりました。今回はそのコードを紹介します。レスポンシブ対応のドロップダウンメニューのデザイン今回作ったのはこんな感じのメニューです。こんな風にメニューにカーソルを合わせると、下の方にメニューバーと同じ幅の分、二段目のメニューが表示されるというデザインです。スマホの時はちゃんとその分、一個一個のメニューの横幅が小さくなり、スクロールも要らず一段の中に全て収まるようにできています。それ以外にも、カーソルを合わせているかがわかりやすいように、一段目、二段目のそれぞれに合わせた部分の色が反転するcssを書き込みました。ドロップダウンメニューのソースコードドロップダウンメニューのHTML次に、このドロップダウンメニューのHTMLを少しばかり解説もしながら紹介します。</div>まず、menuというdiv属性を作りその中に、ul属性を作り、その中に一段目のli属性を書き込みました。ul属性には「first-menu」と、li属性全てに「first-menu-list」というクラス名を書き込みました。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です。color:white;}最初の「menu」の「margin」や「padding」のコードは、ナビゲーションションバーの背景を画面幅いっぱいにするためのコードなので、必要不可欠ではありません。画面幅いっぱいにする必要がない人はこの部分は要りません。「.first-menu」の「position:relative;」は、この後「absolute」で二段目のリストの絶対位置を設定する時の基準を作るためです。これを抜いてしまうと、画面の上に二段目のリストが表示されてしまいます。a」に「display:block」を指定することで、リンクの要素をlist幅いっぱいに広げることができます。これを指定することで文字の上だけでなくlistの端でもリンクを開くことができます。」の「z-index」の部分ですが、自分のブログに実装した時に「1」だと、読者ボタンの数の吹き出し部分がlistよりも上に重なるように表示されてしまいました。読者ボタンの吹き出し部分にかなり大きい「z-index」が指定されているようです。僕は、「20」にして対応しました。ここは、適宜コードを変えてください。「second-menu」の「display:none;」で初期状態では表示させないようにします。.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%」を指定する必要があります。まとめいかがでしたか?背景色などを変えるなどをして自分なりにの、カスタマイズすることもできます。レスポンシブデザインのナビゲーションバーを作りたい場合は参考にしてください。はてなブログPro欲望に負けて買ってしまったものやってしまったことなどを紹介するブログです。(1)月別アーカイブ©️欲望に負けたはるぴろです。Reserved.はてなブログをはじめよう!harupiro-gamezukiさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?はてなブログをはじめる(無料)はてなブログとは欲望に負けたはるぴろです。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。