レスポンシブができません。
当該のファイルを書いても、ニューっという感じでメニューが拡大縮小
されません。普通にレスポンシブに対応するためにはどうしたらいいんでしょうか?
該当のサンプルページですが、この様にしたいんです。
http://www.webdesignleaves.com/samples/resposive/SlickNav/slicknav-02.html
http://www.webdesignleaves.com/samples/resposive/SlickNav/slicknav-03.html
でもよく見るとtextのサイズは一定で、あまり私のサイトと代わり映えのない感じが
してきました。textのサイズを可変する場合はメディアクエリで対応するしかないんでしょうか?拡大縮小のアニメーションして、サイズが変わってほしいです。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8" /> 5<title>javascript本格入門</title> 6 7<meta name="viewport" content="width=device-width,initial-scale=1"> 8<!-cssの実装--> 9<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 10<link rel="stylesheet" type="text/css" href="slick/slick.css"/> 11<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 12<link rel="stylesheet" href="css/style.css"> 13<link rel="stylesheet" href="css/stylemin400.css"> 14<link rel="stylesheet" href="css/stylemin638.css"> 15<link rel="stylesheet" href="css/stylemax1000.css"> 16<link rel="stylesheet" type="text/css" href="slicknav/slicknav.css"/> 17 18 19 20 21</head> 22<body> 23 24 <!-- 標準距離の実装--> 25 <div class="container"> 26 logo 27 28 <ul class="button"> 29 Download 30 </ul> 31 <!-- メニューのボタン実装 --> 32 <ul class="menu"> 33 <li><a href="#">メニューA</a> 34 <ul class="sub"> 35 <li><a href="#">サブメニューA</a></li> 36 <li><a href="#">サブメニューA</a></li> 37 <li><a href="#">サブメニューA</a><!-- 38 --><ul class="sub"> 39 <li><a href="#">サブメニューA2</a></li> 40 <li><a href="#">サブメニューA2</a></li> 41 <li><a href="#">サブメニューA2</a></li> 42 </ul><!-- 43 --></li> 44 </ul> 45 </li> 46 47 <!-- サブメニューのコメントはブラウザ間の余白を取るためらしい --> 48 <!-- サブメニューの中にサブメニューを作るとメニューを表示する --> 49 50 <li><a href="#">メニューB</a> 51 <ul class="sub"> 52 <li><a href="#">サブメニューB</a></li> 53 <li><a href="#">サブメニューB</a> 54 <ul class="sub"> 55 <li><a href="#">サブメニューB2</a></li> 56 <li><a href="#">サブメニューB2</a></li> 57 <li><a href="#">サブメニューB2</a> 58 <ul class="sub"> 59 <li><a href="#">サブメニューB3</a></li> 60 <li><a href="#">サブメニューB3</a></li> 61 <li><a href="#">サブメニューB3</a></li> 62 </ul> 63 </li> 64 </ul> 65 </li> 66 <li><a href="#">サブメニューB</a></li> 67 </ul> 68 </li> 69 <li><a href="#">メニューC</a> 70 <ul class="sub"> 71 <!-- サブメニューBだったのでサブメニューCに変更 --> 72 <li><a href="#">サブメニューC</a> 73 <ul class="sub"> 74 <li><a href="#">サブメニューC2</a></li> 75 <li><a href="#">サブメニューC2</a></li> 76 <li><a href="#">サブメニューC2</a></li> 77 </ul> 78 </li> 79 <li><a href="#">サブメニューC</a></li> 80 <li><a href="#">サブメニューC</a></li> 81 </ul> 82 </li> 83 </ul> 84 85 86 </div> 87 88 <div id="container"> 89 <div class="sentece"> 90 91 <ul class="whitebox" id="gnav"> 92 93 <span class="logono-sukima">BOOGIE</span> 94 <li><a href="#">Contact</a></li> 95 <li><a href="#">Demo</a></li> 96 <li><a href="#">Events</a></li> 97 <li><a href="#">Album</a></li> 98 <li><a href="#">About</a></li> 99 <li><a href="#">Home</a></li> 100 </ul> 101 <div class="slick main toppu bottomu"> 102 103 <div class="hyakupa-sento-janai">Fast Track<p class="tekisuto">Music Is Not to Hear</p>Quis autem vel eum iure reprenderit Quis autem vel</br>eum iure reprehderit,<div class="clearfix"></div></br><div class="learnmore">Learn More</div></div> 104 <div class="hyakupa-sento-janai">Fast Music<p class="tekisuto">It is to Just Feel</p>Quis autem vel eum iure reprenderit Quis autem vel</br>eum iure reprehderit,<div class="clearfix"></div></br><div class="learnmore">Learn More</div></div> 105 <div class="hyakupa-sento-janai">Fast villege<p class="tekisuto">Your my sunshine</p>Quis autem vel eum iure reprenderit Quis autem vel</br>eum iure reprehderit,<div class="clearfix"></div></br><div class="learnmore">Learn More</div></div> 106 <div class="hyakupa-sento-janai">Find out<p class="tekisuto">it is proof not your best</p>Quis autem vel eum iure reprenderit Quis autem vel</br>eum iure reprehderit,<div class="clearfix"></div></br><div class="learnmore">Learn More</div></div> 107 </div> 108 109 110 111 </div> 112 </div> 113 114 <div class="mainarea"> 115 116 <div class="sakana"> 117 <div class="hakonoarea">1</div> 118 <div class="hakonoarea">2</div> 119 </div> 120 <div class="sakana"> 121 <div class="hakonoarea">3</div> 122 <div class="hakonoarea bottomu">4</div> 123 </div> 124 <div class="toppu cian"> 125 126 <div class="mizuiro"> 127 We wish a go 128 <div class="koe"> 129Lorem ipsum dolor sit amet, 130consectetuer adipiscing elit. 131Aenean commodo ligula eget 132 dolor. Aenean massa 133 </div> 134 </div> 135 </div> 136 </div> 137 <div class="kurashian tyuuousoroe"> 138 <div class="tyuudann marginzennhoukou migidan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div> 139 <div class="migidan"><iframe width="300" height="215" src="https://www.youtube.com/embed/ZA_c_OIwKuY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> 140 <div class="clearfix"></div> 141 <div class="tyuudann marginzennhoukou hidaridan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div> 142 <div class="migidan"><iframe width="300" height="215" src="https://www.youtube.com/embed/ZA_c_OIwKuY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> 143 <div class="clearfix"></div> 144 <div class="tyuudann marginzennhoukou migidan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div> 145 <div class="migidan"><iframe width="300" height="215" src="https://www.youtube.com/embed/ZA_c_OIwKuY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> 146 <div class="clearfix"></div> 147 <div class="tyuudann marginzennhoukou hidaridan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div> 148 <div class="migidan"><iframe width="300" height="215" src="https://www.youtube.com/embed/ZA_c_OIwKuY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> 149 <div class="clearfix"></div> 150 151 152 153 </div> 154 <div class="thirdbackground paddingcenter"> 155 <span class="statewhite">New Album Release</span></br> 156 COMING SOON 157 </div> 158 <div class="uminosachi tyuuousoroe"></div> 159 <div class="kumorinochi tyuuousoroe"></div> 160 <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7269.916794736793!2d139.8557849286646!3d35.741468658458395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1527071966559" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 161 <div class="amenochi tyuuousoroe"> 162 <form action="/my-handling-form-page" method="post"> 163 <div class="kinyuuwrap"> 164 <div class="kinyuu lefuto"> 165 <input type="text" class="formnoiro" id="name" name="user_name" value="Name"> 166 </div> 167 <div class="kinyuu lefuto"> 168 <input type="text" class="formnoiro" id="last name" name="user_name" value="Last Name"> 169 </div> 170 <div class="clearfix"></div> 171 <div class="kinyuu lefuto"> 172 <input type="text" class="formnoiro" id="email" name="user_name" value="Email"> 173 </div> 174 <div class="kinyuu lefuto"> 175 <input type="text" class="formnoiro" id="phone" name="user_name" value="Phone"> 176 </div> 177 <div class="clearfix"></div> 178 <div class="kinyuu lefuto"> 179 <textarea class="formnoiro" id="message" name="message" placeholder="Message" rows="10" cols="50"></textarea> 180 </div> 181 </div> 182 <div class="clearfix"></div> 183 <input class="botann" type="submit" value="Send"> 184 185 </form> 186 </div> 187 <div class="rateone toppu"> 188 <div class="sekainoowari toppu bottomu lefuto">1st dimension</br><p class="mojishiro tyuuousoroe">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p></div> 189 <div class="sekainoowari toppu bottomu lefuto">2nd dimension</br><p class="mojishiro tyuuousoroe">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p></div> 190 <div class="sekainoowari toppu bottomu lefuto">3rd dimension</br><p class="mojishiro tyuuousoroe">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p></div> 191 </div> 192 <div class="footer toppu"> 193 <p class="lastword">copyright ebifurai55</p> 194 </div> 195 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 196 <script src="slicknav/jquery.slicknav.min.js"></script> 197 <script src="slick/slick.min.js"></script> 198 <script type="text/javascript"> 199$(function(){ 200 $("ul.menu li").hover(function(){ 201 $(">ul:not(:animated)",this).slideDown("fast"); 202 }, 203 204 function(){ 205 $(">ul",this).slideUp("fast"); 206 }); 207}); 208</script> 209<script> 210 $(function() { 211 $('.slick').slick({ 212 autoplay: true, 213 autoplaySpeed: 3000, 214 infinite: true, 215 arrows: true, 216 dots: false, 217 centerMode: true, 218 slidesToShow:(1), 219 220 221 centerPadding: '0px' 222 }); 223 224 225 }); 226</script> 227<script> 228$(function(){ 229 $('#gnav').slicknav({ 230 231 prependTo: "#container", //指定した要素内にメニュー表示 デフォルトはbody 232}); 233}); 234</script> 235 236</script> 237</body> 238</html>
だんだん混乱してきたので上手くまとめいただける方いらっしゃいませんか?ながくなりそうなので、複数回に分けて綴ります。
回答6件
あなたの回答
tips
プレビュー