このサイトのウィンドウを小さくするとレスポンシブデザインのメニューが出てくるのですがmeanmenu内の色をいじってみたのですが全く変わらずどこを操作したらよろしいでしょうか。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- baneではなくname --> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/meanmenu.min.css"> 8 <link rel="stylesheet" href="css/font-awesome.min.css"> 9 <!--インストールしたfontawesomeを読み込む--> 10 <link rel="stylesheet" href="css/styles.css"> 11 <!--作ったCSSを読み込む--> 12 <meta bane="viewport" content="width=device-width, initial-scale=1.0"> 13 <!--スマホで開いたとき度の幅で描画するかの設定--> 14 15 <title>RWD</title> 16</head> 17 18<body> 19<header> 20 21 <div class="container"> 22 <!-- <i class="fa fa-bars mobile-menu" aria-hidden="true"></i>--> 23 <ul class="pc-menu"> 24 <li>Menu</li> 25 <li>Menu</li> 26 <li>Menu</li> 27 </ul> 28 <h1 class="aburasoba">油そば池袋</h1> 29 </div> 30 31 <section class="features"><!--section1--> 32 <h2>Features</h2> 33 <div class="item"> 34 <img src="img/feature.jpg"> 35 <p class="right-side">hello. hello. hello. hello. hello. hello. hello. 36 hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> 37 </div> 38 39 <div class="item"> 40 <img src="img/feature.jpg"> 41 <p class="left-side">hello. hello. hello. hello. hello. hello. hello. 42 hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> 43 </div> 44 45 <div class="item"> 46 <img src="img/feature.jpg"> 47 <p class="right-sidet">hello. hello. hello. hello. hello. hello. hello. 48 hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> 49 </div> 50 </section> 51</header> 52 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 53 <script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script> 54 <script> 55 $(function () { 56 $("div.container").meanmenu({}); 57 }); 58 </script> 59 60 <footer> 61 <div class="sita"> 62 <img src="img/footer.png"> 63 </div> 64 </footer> 65 66</body> 67 68 69</html> 70
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: #F2F2F2; 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/*sita ...imgと指定すれば画像が指定できた*/ 53.sita img { 54 display: block; 55 height: 50px; 56 margin: 0 auto; 57 width: 50px; 58} 59 60 61/*レスポンシブルデザイン設定①*/ 62/*幅の大きさが変わる設定*/ 63/*画面が570px以下になったとき*/ 64@media (max-width: 414px){ 65 .pc-menu{/*アイコンを消す*/ 66 display: none; 67 } 68 .aburasoba{/*アイコンを消す*/ 69 display: none; 70 } 71.features p{ 72 width: 45%; 73} 74.features img{ 75 width: 50%; 76} 77/*.pull-right*/ 78.right-side{ 79 float: right; 80 padding-left: 5%; 81} 82/*.pull-left*/ 83.left-side{ 84 float: left; 85 padding-right: 5%; 86} 87.features .item{/*float:leftやrightを使ったので*/ 88 overflow: hidden; 89} 90.news .container{ 91 display: flex; 92 justify-content: space-between;/*均等に余白が空く設定*/ 93} 94.news .item{/*newsに入っている画像と文字に対して30%*/ 95 width: 30%; 96} 97.news .item img{/*画像が30%だとちゃんと見えないので画像だけ100%に*/ 98 width: 100%; 99} 100} 101/*画面が570px以上になったとき 102min-widthが〇〇以上、max-widthが〇〇までという認識*/ 103@media (min-width: 414px){ 104.container{ 105 width: 414px; 106} 107.mobile-menu{/*アイコンを消す*/ 108display: none; 109} 110} 111/*1----------------------------------------------------------------------------------*/ 112 113section{/*共通のスタイル、上下にサイズがほしい*/ 114 padding: 60px 0; 115} 116 117section h2{/*文字を中央ぞろえ、下にマージン空き*/ 118 text-align: center; 119} 120 121section:nth-child(even){/*背景色の切り替え*/ 122 background: #fff; 123} 124 125/*features*/ 126.features img{/*親要素音containerに対して100%の設定なので左右ぴったりになった*/ 127 width: 100%; 128} 129 130.features .item{/*写真と文字を囲っているfeaturesの下の空き*/ 131 margin-bottom: 60px; 132 margin-left: 60px; 133 margin-right: 60px; 134} 135 136.features .item:last-child{/*これにだけ指定という意味*/ 137 margin-bottom: 0; 138} 139 140.news .item:last-child{/*これにだけ指定という意味*/ 141 margin-bottom: 0; 142} 143 144/*footer*/ 145 146footer { 147 text-align: center; 148 padding: 10px 0; 149} 150
meanmenu.css
1 2/*! ####################################################################### 3 4 MeanMenu 2.0.7 5 -------- 6 7 To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/) 8 9####################################################################### */ 10 11/* hide the link until viewport size is reached */ 12a.meanmenu-reveal { 13 display: none; 14} 15 16/* when under viewport size, .mean-container is added to body */ 17.mean-container .mean-bar { 18 float: left; 19 width: 100%; 20 position: relative; 21 background: #0c1923; 22 padding: 4px 0; 23 min-height: 42px; 24 z-index: 999999; 25} 26 27.mean-container a.meanmenu-reveal { 28 width: 22px; 29 height: 22px; 30 padding: 13px 13px 11px 13px; 31 position: absolute; 32 top: 0; 33 right: 0; 34 cursor: pointer; 35 color: #fff; 36 text-decoration: none; 37 font-size: 16px; 38 text-indent: -9999em; 39 line-height: 22px; 40 font-size: 1px; 41 display: block; 42 font-family: Arial, Helvetica, sans-serif; 43 font-weight: 700; 44} 45 46.mean-container a.meanmenu-reveal span { 47 display: block; 48 background: #fff; 49 height: 3px; 50 margin-top: 3px; 51} 52 53.mean-container .mean-nav { 54 float: left; 55 width: 100%; 56 background: #0c1923; 57 margin-top: 44px; 58} 59 60.mean-container .mean-nav ul { 61 padding: 0; 62 margin: 0; 63 width: 100%; 64 list-style-type: none; 65} 66 67.mean-container .mean-nav ul li { 68 position: relative; 69 float: left; 70 width: 100%; 71} 72 73.mean-container .mean-nav ul li a { 74 display: block; 75 float: left; 76 width: 90%; 77 padding: 1em 5%; 78 margin: 0; 79 text-align: left; 80 color: #fff; 81 border-top: 1px solid #383838; 82 border-top: 1px solid rgba(255,255,255,0.5); 83 text-decoration: none; 84 text-transform: uppercase; 85} 86 87.mean-container .mean-nav ul li li a { 88 width: 80%; 89 padding: 1em 10%; 90 border-top: 1px solid #f1f1f1; 91 border-top: 1px solid rgba(255,255,255,0.25); 92 opacity: 0.75; 93 filter: alpha(opacity=75); 94 text-shadow: none !important; 95 visibility: visible; 96} 97 98.mean-container .mean-nav ul li.mean-last a { 99 border-bottom: none; 100 margin-bottom: 0; 101} 102 103.mean-container .mean-nav ul li li li a { 104 width: 70%; 105 padding: 1em 15%; 106} 107 108.mean-container .mean-nav ul li li li li a { 109 width: 60%; 110 padding: 1em 20%; 111} 112 113.mean-container .mean-nav ul li li li li li a { 114 width: 50%; 115 padding: 1em 25%; 116} 117 118.mean-container .mean-nav ul li a:hover { 119 background: #252525; 120 background: rgba(255,255,255,0.1); 121} 122 123.mean-container .mean-nav ul li a.mean-expand { 124 margin-top: 1px; 125 width: 26px; 126 height: 32px; 127 padding: 12px !important; 128 text-align: center; 129 position: absolute; 130 right: 0; 131 top: 0; 132 z-index: 2; 133 font-weight: 700; 134 background: rgba(255,255,255,0.1); 135 border: none !important; 136 border-left: 1px solid rgba(255,255,255,0.4) !important; 137 border-bottom: 1px solid rgba(255,255,255,0.2) !important; 138} 139 140.mean-container .mean-nav ul li a.mean-expand:hover { 141 background: rgba(0,0,0,0.9); 142} 143 144.mean-container .mean-push { 145 float: left; 146 width: 100%; 147 padding: 0; 148 margin: 0; 149 clear: both; 150} 151 152.mean-nav .wrapper { 153 width: 100%; 154 padding: 0; 155 margin: 0; 156} 157 158/* Fix for box sizing on Foundation Framework etc. */ 159.mean-container .mean-bar, .mean-container .mean-bar * { 160 -webkit-box-sizing: content-box; 161 -moz-box-sizing: content-box; 162 box-sizing: content-box; 163} 164 165 166.mean-remove { 167 display: none !important; 168}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。