Q&A
drawer.jsを使ってハンバーガーメニューを実装したのですが、PCサイズの時にハンバーガーメニューが消えていてPC、スマホサイズ両方に表示させたいのですがどこを変えればいいのか教えていただけないでしょうか```
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Open cafe</title> 8 <meta name="description" content="サイトの概要分"> 9 <!-- <link rel="shortcut icon" href=""> --> 10 11 <!-- reset css --> 12 <link rel="stylesheet" href="/css/reset.css"> 13 <!-- fontawesome --> 14 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"> 15 <!-- googlefonts --> 16 <link rel="preconnect" href="https://fonts.googleapis.com"> 17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 18 <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Damion&family=Noto+Serif+JP:wght@400;700&family=Patua+One&display=swap" rel="stylesheet"> 19 <!-- drawer.css --> 20 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css" media="screen and (max-width:767px)"> 21 <!-- jquery & iScroll --> 22<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 23<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> 24 <!-- drawer.js --> 25 <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> 26 <!-- wow --> 27 <script src="/js/wow.min.js"></script> 28 <link rel="stylesheet" href="/css/animate.css"> 29 <!-- original --> 30 <link rel="stylesheet" href="/css/style.css"> 31 <script src="/js/script.js"></script> 32</head> 33 34<body class="drawer drawer--right"> 35 <header id="js-header" class="header"> 36 <button type="button" class="drawer-toggle drawer-hamburger"> 37 <span class="sr-only pc-only">toggle navigation</span> 38 <span class="drawer-hamburger-icon"></span> 39 </button> 40 <!-- <div class="header__menu"> --> 41 <nav class="drawer-nav header__nav"> 42 <h1 class="header__logo-sp"><img src="/img/logo_light.png" alt="opencafe"></h1> 43 <ul class="drawer-menu header__nav-list"> 44 <li class="header__nav-item"> 45 <a class="header__nav-item-link-sp" href="#"><p>TOP</p><span>トップ</span> </a></li> 46 <li class="header__nav-item"> 47 <a class="header__nav-item-link-sp" href="#"><p>top-concept</p><span>コンセプト</span></a></li> 48 <li class="header__nav-item"> 49 <a class="header__nav-item-link-sp" href="#"><p>MENU</p><span>メニュー</span></a></li> 50 <li class="header__nav-item"> 51 <a class="header__nav-item-link-sp" href="#"><p>NEWS</p><span>お知らせ</span></a></li> 52 <li class="header__nav-item"> 53 <a class="header__nav-item-link-sp" href="#"><p>SHOP</p><span>店舗情報</span></a></li> 54 <li class="header__nav-item"> 55 <a class="header__nav-item-link-sp" href="#"><p>GIFT</p><span>ギフト・贈り物</span></a></li> 56 <li class="header__nav-item"> 57 <a class="header__nav-item-link-sp" href="#"><p>CONTACT</p><span>お問い合わせ</span></a></li> 58 </ul> 59 <div class="header__sns"> 60 <ul class="header__sns-list"> 61 <li class="header__sns-item"><a href="" class="header__sns-item-link-sp" aria-label="twitter"><i class="fab fa-twitter"></i></a></li> 62 <li class="header__sns-item"><a href="" class="header__sns-item-link-sp" aria-label="instagram"><i class="fab fa-instagram"></i></a></li> 63 <li class="header__sns-item"><a href="" class="header__sns-item-link-sp" aria-label="youtube"><i class="fab fa-youtube"></i></a></li> 64 </ul> 65 </div><!-- /.header__nav-sns --> 66 </nav> 67 </header><!-- header -->
javascript
1$(function() { 2 // drawer 3 $('.drawer').drawer() 4})
回答1件
0
ベストアンサー
html
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css" media="screen and (max-width:767px)">
↑を↓にするとどうですか。
html
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
投稿2021/12/23 01:50
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/23 02:16
2021/12/23 02:20