Q&A
プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）
drawer.jsを使ってハンバーガーメニューを実装したのですが、Pcサイズの時にもハンバーガーメニューになってしまい、drawer.jsを無効にすることができません。
どうすればdrawer.jsを好きなタイミングで無効にすることができるのでしょうか？
drawer.js
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"> 6 7 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css"> 8 9 <link rel="stylesheet" href="css/main.css"> 10 <title>デイトラ2nd 最終課題</title> 11</head> 12<body class="drawer drawer--right"> 13 <header role="banner"> 14 <img class="hd-logo" src="img/logo.png" alt=""> 15 <!-- ハンバーガーボタン --> 16 <button type="button" class="drawer-toggle drawer-hamburger"> 17 <span class="sr-only">toggle navigation</span> 18 <span class="drawer-hamburger-icon"></span> 19 </button> 20 <!-- ナビゲーションの中身 --> 21 <nav class="drawer-nav" role="navigation"> 22 <ul class="hd-list drawer-menu"> 23 <li class="hd-item drawer-brand"><a href="#news">News</a></li> 24 <li class="hd-item drawer-menu-item"><a href="#service">Service</a></li> 25 <li class="hd-item drawer-menu-item"><a href="#results">Results</a></li> 26 <li class="hd-item drawer-menu-item"><a href="#price">Price</a></li> 27 <li class="hd-item drawer-menu-item"><a href="#com-comments">Comments</a></li> 28 <li class="hd-item drawer-menu-item"><a href="#qanda">FAQs</a></li> 29 <li class="hd-item drawer-menu-item"><a href="#contact">Contact</a></li> 30 </ul> 31 </nav> 32 </header> 33 34<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 35</script> 36<script src="http://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> 37<script src="http://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script> 38 39 <script src="js/main.js"></script> 40</body>
javascript
1$(document).ready(function() { 2 $('.drawer').drawer(); 3}); 4
回答2件
0
自己解決
@media and screen (min-width:650px) {
}
の間にcssを設定してらうまくコーディングできました。
投稿2020/04/13 08:55
総合スコア8
0
どうすればdrawer.jsを好きなタイミングで無効にすることができるのでしょうか？
公式サイトの下記例文で無効にできます。
Destroy
js
1$('.drawer').drawer('destroy');
「スマホ」の判定をどうするつもりかはわかりませんが、単純に画面幅であればwindow.matchMediaで分岐すればよいです。
【window.matchMedia - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia
投稿2020/04/13 08:24
総合スコア69400
あなたの回答
tips
プレビュー
