pc-menu2でメニューの設定をしているのですが灰色のメニューバーを画面端まで適用したいのですがどうすれば実行できますでしょうか
ご教授お願いいたします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- baneではなくname --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/meanmenu.min.css"> <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"> <!--スマホで開いたとき度の幅で描画するかの設定--> <title>RWD</title> </head> <body> <header> <div class="aburasoba_main"> <div class="aburasoba_main_about"> <img src="img/wallpaper.jpg"> </div> </div> <div class="aburasoba_main2"> <div class="aburasoba_main_about2"> <img src="img/wallpaper.jpg"> </div> </div> <div class="container"> <!-- <i class="fa fa-bars mobile-menu" aria-hidden="true"></i>--> <ul class="pc-menu"> <li>トップ</li> <li>メニュー</li> <li>アクセス</li> </ul> <ul class="pc-menu2"> <li><a href="#">トップaa</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">アクセス</a></li> </ul> </div> <div class="box"> <div class="box-title">About BANKARA</div> <p>“元気を食べてもらいたい ──”<br> これが「ばんから」の原点であり、創業以来の精神です。<br> 麺、スープ、具。ラーメンというシンプルな料理ゆえ、これまで幾多もの苦労や苦難にぶつかるたびに、全力で向き合いながら“最高の一杯” を追い求めてきました。そのスタンスは、今も変わることはありません。<br> 「おいしかったよ」<br> このひと言がうれしくて、私たちは常に考え、工夫を凝らし、試行錯誤を繰り返しながら、日々おいしさに磨きをかけています。<br> </p> </div> </header> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script> <script> $(function () { $("div.container").meanmenu({}); }); </script> <footer> <div class="sita"> <img src="img/footer.png"> </div> </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: #F2F2F2; 11background: #F2F2F2; 12/*初期設定*/ 13} 14p{/*行間がゆったりする*/ 15line-height: 2; 16} 17 18.container{/*ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 19 左右に一定の空きができる*/ 20 width: 90%; 21 margin: 0 auto; 22} 23 24header{ 25 /*背景画像*/ 26 background-image: url("../img/background.jpg"); 27 background-repeat: no-repeat; 28 background-attachment: fixed;/*背景を固定している*/ 29 background-position: center;/*背景が中央に設定される*/ 30 background-size:cover;/*背景画像をちゃんと表示*/ 31 padding-bottom: 50px;/*ここでpaddingを設定したからsectionのpaddingが無効に*/ 32} 33 34 35/*aburasoba_main トップの背景*/ 36.aburasoba_main{ 37 background-color: black; 38 /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/ 39} 40 41.aburasoba_main_about img{ 42 43 display: block; 44 margin-left: auto; 45 margin-right: auto; 46 max-width: 100%; 47} 48 49/*aburasoba_main トップの背景のウィンドウを小さくしたときに表示させたいやつ*/ 50.aburasoba_main2{ 51 background-color: black; 52 /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/ 53 padding-left: 50px; 54 padding-right: 50px; 55} 56 57.aburasoba_main_about2 img{ 58 59 display: block; 60 margin-left: auto; 61 margin-right: auto; 62 max-width: 100%; 63} 64 65/*header-mobile-menuはアイコン右寄せ*/ 66.mobile-menu{ 67float: right; 68font-size: 24px; 69cursor: pointer; 70} 71 72.pc-menu{ 73display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ 74/*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ 75list-style: none; 76padding: 10px; 77margin: 0; 78/*余計なマージンパディング取る、*/ 79float: center;/*mysiteも入っているpc-menuの中に右にする設定*/ 80text-align: center; 81/* 82background:rgba(51,51,51, 0.85); 83font-weight: bold;*/ 84} 85 86.pc-menu2{ 87width: 530px; 88margin:0 ; 89list-style-type: none; 90} 91 92.pc-menu > li { 93display: inline-block;/*横にする設定*/ 94width: 60px; 95text-align: center; 96cursor: pointer; 97} 98 99.pc-menu2 li { 100width: 20%; 101float: left; 102padding: 0; 103margin: 0; 104text-align:center; 105} 106.pc-menu2 li a{ 107 width: auto; 108 color:#fff; 109 font-size:12px; 110 font-weight:bold; 111 padding: 10px 0; 112 text-decoration:none; 113 display:block; 114 background:#666; 115} 116.pc-menu2 li a:hover{ 117 background: #555; 118} 119 120/*sita ...imgと指定すれば画像が指定できた*/ 121.sita img { 122 display: block; 123 height: 90px; 124 margin: 0 auto; 125 width: 160px; 126} 127 128/*レスポンシブデザインの3本線の設定*/ 129.mean-container a.meanmenu-reveal span { 130 display: block; 131 background: #cccccc; 132 height: 3px; 133 margin-top: 3px; 134} 135 136/*テキストの枠組みの設定*/ 137.box { 138margin: 2em 0;/*線?*/ 139margin: 50px;/*左右余白*/ 140} 141.box .box-title { 142font-size: 1.2em; 143background:rgba(51,51,51, 0.85); 144padding: 4px; 145text-align: center; 146color: #cccccc; 147font-weight: bold; 148letter-spacing: 0.05em; 149} 150.box p { 151padding: 15px 20px; 152margin: 0; 153background:rgba(51,51,51, 0.85); 154color: #cccccc; 155} 156 157/*レスポンシブルデザイン設定①*/ 158/*幅の大きさが変わる設定*/ 159/*画面が414px以下になったとき*/ 160@media (max-width: 414px){ 161 .pc-menu{ 162 color:#cccccc; 163 } 164 .aburasoba{/*アイコンを消す*/ 165 display: none; 166 } 167 .pc-menu2{ 168 display: none; 169 } 170/*.pull-right*/ 171.right-side{ 172 float: right; 173 padding-left: 5%; 174} 175/*.pull-left*/ 176.left-side{ 177 float: left; 178 padding-right: 5%; 179} 180 181.news .container{ 182 display: flex; 183 justify-content: space-between;/*均等に余白が空く設定*/ 184} 185.news .item{/*newsに入っている画像と文字に対して30%*/ 186 width: 30%; 187} 188.news .item img{/*画像が30%だとちゃんと見えないので画像だけ100%に*/ 189 width: 100%; 190} 191.aburasoba_main_about img{ 192 display: none; 193} 194 195} 196/*画面が414px以上になったとき 197min-widthが〇〇以上、max-widthが〇〇までという認識*/ 198@media (min-width: 414px){ 199.container{ 200 width: 414px; 201} 202.mobile-menu{/*アイコンを消す*/ 203display: none; 204} 205 206.pc-menu{ 207 display: none; 208} 209 210.aburasoba_main_about2 img{ 211 display: none; 212} 213 214} 215/* 216 217/*footer*/ 218 219footer { 220 text-align: center; 221 padding: 10px 0; 222} 223
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。