HTMLページで、レスポンシブに対応したナビメニューを作ろうとしています。
デスクトップサイズではマウスホバーによるメニュー開閉、スマートフォンサイズでは開閉のためのボタンが現れ、それを押すことでメニューを表示する予定です。
そのまま作るとスマートフォンサイズのときにメニューを閉じた後、デスクトップサイズまで画面を広げるとメニューは消えたままなので操作できなくなってしまいます。
逆にデスクトップでホバーアウトでメニューを閉じるとスマートフォンサイズではメニューが閉じたままになります。
メディアクエリで !important を使うと開閉ができなくなってしまうので、ウィンドウのリサイズイベントをJavascript で拾ってブレークポイントで表示/非表示を切り替えるなどあるかと思いますが、こういったケースではどのようにするのが一般的なのでしょうか?
HTML
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <title></title> 7 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 8 <style rel="stylesheet"> 9 #menu { 10 background-color: aliceblue; 11 display: block; 12 position: relative; 13 height: 30px; 14 line-height: 30px; 15 width:300px; 16 } 17 18 #menu ul { 19 display: block; 20 margin: 0; 21 width: 100%; 22 position: absolute; 23 left: 0; 24 top: 30px; 25 } 26 27 #menu-button { 28 display: inline; 29 } 30 31 @media (min-width: 768px) { 32 #menu ul { 33 display: none; 34 } 35 36 #menu-button { 37 display: none; 38 } 39 } 40 </style> 41</head> 42 43<body> 44 <p><button id="menu-button">Menu</button></p> 45 <div id="menu"> 46 <div>MENU</div> 47 <ul> 48 <li>menu 1</li> 49 <li>menu 2</li> 50 <li>menu 3</li> 51 </ul> 52 </div> 53 <script> 54 $(function () { 55 $('#menu').hover(function(){ 56 if (window.matchMedia('(min-width: 768px)').matches) { 57 $('#menu ul').slideDown('fast'); 58 } 59 }, function(){ 60 if (window.matchMedia('(min-width: 768px)').matches) { 61 $('#menu ul').slideUp('fast'); 62 } 63 }); 64 65 $('#menu-button').on('click', function(){ 66 $('#menu').toggle(); 67 }); 68 }); 69 </script> 70</body> 71</html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。