CSSで、スマホ用画面の時はヘッダーの上部にあるリストを非表示にし、その代わりにメニューアイコンを表示させたいです。
しかし、リストは非表示になったのですが、メニューアイコンがずっと表示されたままになってしまいます。
原因がわかる方、どこを変えたらいいのか教えけると幸いです。宜しくお願いします。
また、可能であればjqueryで実装する場合も教えていただきたいです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>###</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <link rel="icon" href="icon.jpg"> 8 <script src="https://use.fontawesome.com/ec250f4b17.js"></script> 9 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 10 <script type="text/javascript" src="script.js" charset="utf-8"></script> 11 12 13 14 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css"> 15 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 16 <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> 17 <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script> 18 19 20 21 22 23</head> 24<body> 25 <!---------- ヘッダー ---------> 26 <div class="header"> 27 <h1> 28 <a href="http://otonavi.sakura.ne.jp/TOP.html"> 29 <img src="###"> 30 </a> 31 </h1> 32 <i class="fa fa-bars fa-3x menu-icon" aria-hidden="true"></i> 33 <div class="for-pc"> 34 <nav> 35 <ul> 36 <li class="header_item"><a href="">###</a></li> 37 <li class="header_item"><a href="">###</a></li> 38 <li class="header_item"><a href="">###</a></li> 39 </ul> 40 </nav> 41 </div> 42 43 44 45 </div> 46 47 48 <div class="main"> 49 50 </div> 51 52 53 <div class="footer"> 54 55 </div> 56</body> 57</html>
CSS
1 2.menu-icon{ 3 4 float:right; 5 6 /* デフォルトではメニューアイコンを非表示にする */ 7 display:none; 8 9} 10 11.header li{ 12 13 width: 180px; 14 padding: 0px; 15 margin: 0px; 16 font-size: 15px; 17 color: #3d9ec7; 18 list-style: none; 19 text-align: center; 20} 21.header li :visited{ 22 color: #3d9ec7; 23} 24.header_item{ 25 display: inline; 26 float: right; 27} 28 29 30 31 32/* --- メディアクエリ --- */ 33 34 35/* --- スマホ用 --- */ 36@media all and (max-width: 670px) { 37 38 /* for-pcクラスのdisplayをnoneに指定*/ 39.for-pc { 40display:none; 41 } 42 43 44/* menuクラスのdisplayをblockに指定 */ 45.menu-icon{ 46display:block; 47} 48 49} 50
あなたの回答
tips
プレビュー