質問: Webサイトのグローバルナビゲーション制作に関する質問です。 横幅が981px以上の時(PCを想定) ・メニューを横並びにし、サブメニューは親メニューにカーソルを当てた時に表示される ※これはなんとか、自力で制作することができました 横幅が980px以下の時(タブレット・スマホを想定) ・横並びメニューは消え、ハンバーガーメニューが表示される。ハンバーガーメニューをクリックすると メニューが縦並びで表示され、サブメニューは親メニューをクリックした時に表示される また、サブメニューがあることを表示するために、サブメニューがある親メニューには→を添え、 サブメニューが開いている時には→が↓になるようにしたい。 ※現在は親メニューにカーソルを当てた時に表示される状態となっています。 ※→(矢印アイコン)はfontawesomeを使用? サンプル http://slicknav.com/ ページ下部の「Advance Demo」のParent2のようにしたいです。 どなたか、実現する方法を教えていただけたら嬉しいです。 よろしくお願いします。 htmlとCSSは以下の通りです。 ``` サイトタイトル MENU トップ メニュー1 メニュー2 メニュー3 メニュー4 サブメニュー1 サブメニュー2 メニュー5 メニュー6 メニュー7 ``` ``` @charset "UTF-8"; body { margin: 0;} /* ########### 980px以下 ########### */ @media (max-width: 980px) { /* トグルボタン */ #menubtn {padding: 6px 12px; border: solid 0px; background-color: #ffffff; position: absolute; top: 20px; right: 10px; cursor: pointer} #menubtn:hover {background-color: #dddddd} #menubtn:focus {outline: none} #menubtn i {color: #000000; font-size: 30px} #menubtn span {display: inline-block; text-indent: -9999px} /* ナビゲーションメニュー(縦並び) */ .menu {display: none} .menu ul {margin: 0; padding: 0; list-style: none} .menu li a {display: block; background-color: #ffffff; padding: 5px; margin-left:10px; margin-right:10px; color: #000000; font-size: 14px; text-decoration: none} .menu li a:hover {background-color: #eeeeee} } /* ########### 981px以上 ########### */ @media (min-width: 981px) { /* トグルボタン */ #menubtn {display: none} /* ナビゲーション */ #menu {display: block !important} .menu ul {margin: 0; padding: 0; list-style: none} .menu li a {display: block; padding: 10px 15px; color: #000000; font-size: 14px; text-decoration: none} .menu li a:hover { background-color: #eeeeee } .menu ul:after {content: ""; display: block; clear: both} .menu li {float: left; width: auto} /* BOX1とBOX2を横に並べる設定 */ .boxA:after {content: ""; display: block; clear: both} .box1 {float: left; width: auto} .box2 {float: right; width: auto; } .sub{ display: none; position: absolute; background-color: #ffffff; z-index: 1 } .sub li{ clear:both; } } ```
回答: いわゆるレスポンシブデザインを実現したいとのことだと思うのですが、通常は、オープンソースのライブラリを使います。もっとも有名なのは booststrap ですが、例に示されている slicknav もその一つになります。 これらのライブラリをお使いになることをおすすめします。「レスポンシブデザイン」で検索してみてください。 技術的にはレスポンシブデザインのサイトでは viewport を指定します。 参考:viewportとはなにか? 今作られているコードでは viewport を指定されていないので、ページ側でデバイスの大きさを認識して動きを変えるのが難しいと思います。