ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。
ちなみにこちらのサイトを参考にしました
https://share-life.biz/web/responsive-menu/
<meta charset="utf-8"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!--インストールしたfontawesomeを読み込む--> <link rel="stylesheet" href="css/styles.css"> <!--作ったCSSを読み込む--> <meta bane="viewport" content="width=device-width, initial-scale=1.0"> <!--スマホで開いたとき度の幅で描画するかの設定--> <!--レスポンシブルデザインをするためにjqueryなどを読み込む--> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="jquery.meanmenu.js"></script> <script> $(document).ready(function() { $('nav').meanmenu(); }); </script> <title>RWD</title> </head> <body> <header> <div class="container"> <i class="fa fa-bars mobile-menu" aria-hidden="true"></i> <ul class="pc-menu"> <li>Menu</li> <li>Menu</li> <li>Menu</li> </ul> <h1>油そば池袋</h1> </div> <section class="features"><!--section1--> <h2>Features</h2> <div class="item"> <img src="img/feature.jpg"> <p class="right-side">hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> </div> <div class="item"> <img src="img/feature.jpg"> <p class="left-side">hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> </div> <div class="item"> <img src="img/feature.jpg"> <p class="right-sidet">hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> </div> </section> </header> <footer> <p>dotinstall.com</p> </footer> </body> </html> コード
CSS
1/*1----------------------------------------------------------------------------------*/ 2@charset "utf-8"; 3/*common*/ 4 5body{/*初期設定、余計なmargin,paddingを0に*/ 6font-size: 14px; 7font-family: Verdana, sans-serif; 8margin: 0; 9padding: 0; 10color: #333; 11background: #f8f8f8; 12/*初期設定*/ 13} 14p{/*行間がゆったりする*/ 15line-height: 2; 16} 17 18.container{/*ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 19 左右に一定の空きができる*/ 20 width: 90%; 21 margin: 0 auto; 22} 23 24/*header-mobile-menuはアイコン右寄せ*/ 25.mobile-menu{ 26float: right; 27font-size: 24px; 28cursor: pointer; 29} 30 31.pc-menu{ 32display: none; 33} 34 35.pc-menu{ 36display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ 37/*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ 38list-style: none; 39padding: 10px; 40margin: 0; 41/*余計なマージンパディング取る、*/ 42float: right;/*mysiteも入っているheader-pc-menuの中に右にする設定*/ 43} 44 45.pc-menu > li { 46display: inline-block;/*横にする設定*/ 47width: 60px; 48text-align: center; 49cursor: pointer; 50} 51 52/*レスポンシブルデザイン設定①*/ 53/*幅の大きさが変わる設定*/ 54/*画面が570px以下になったとき*/ 55@media (max-width: 414px){ 56 .pc-menu{/*アイコンを消す*/ 57 display: none; 58 } 59.features p{ 60 width: 45%; 61} 62.features img{ 63 width: 50%; 64} 65/*.pull-right*/ 66.right-side{ 67 float: right; 68 padding-left: 5%; 69} 70/*.pull-left*/ 71.left-side{ 72 float: left; 73 padding-right: 5%; 74} 75.features .item{/*float:leftやrightを使ったので*/ 76 overflow: hidden; 77} 78.news .container{ 79 display: flex; 80 justify-content: space-between;/*均等に余白が空く設定*/ 81} 82.news .item{/*newsに入っている画像と文字に対して30%*/ 83 width: 30%; 84} 85.news .item img{/*画像が30%だとちゃんと見えないので画像だけ100%に*/ 86 width: 100%; 87} 88} 89/*画面が570px以上になったとき 90min-widthが〇〇以上、max-widthが〇〇までという認識*/ 91@media (min-width: 414px){ 92.container{ 93 width: 414px; 94} 95.mobile-menu{/*アイコンを消す*/ 96display: none; 97} 98} 99/*1----------------------------------------------------------------------------------*/ 100 101section{/*共通のスタイル、上下にサイズがほしい*/ 102 padding: 60px 0; 103} 104 105section h2{/*文字を中央ぞろえ、下にマージン空き*/ 106 text-align: center; 107} 108 109section:nth-child(even){/*背景色の切り替え*/ 110 background: #fff; 111} 112 113/*features*/ 114.features img{/*親要素音containerに対して100%の設定なので左右ぴったりになった*/ 115 width: 100%; 116} 117 118.features .item{/*写真と文字を囲っているfeaturesの下の空き*/ 119 margin-bottom: 60px; 120 margin-left: 60px; 121 margin-right: 60px; 122} 123 124.features .item:last-child{/*これにだけ指定という意味*/ 125 margin-bottom: 0; 126} 127 128.news .item:last-child{/*これにだけ指定という意味*/ 129 margin-bottom: 0; 130} 131 132/*footer*/ 133 134footer { 135 text-align: center; 136 color: ccc; 137 padding: 60px 0; 138} 139 140コード
sutosiさんの参考にされたサイトに実装方法が記載されているのですが、どういったことに困られているのでしょうか。また、レスポンシブルではなくレスポンシブですので、タイトルを修正されたほうがよいかと思います。