drawer.jsを使ってドロワーメニューを作っています。
drawer-overlayを指定して、メニューが開いた時に
コンテンツにうっすら色をつけたいです。
そのoverlayをhtmlのどこに指定すればいいのかわかりません。
いろんな所につけてみましたらエラーが出たりで。
検索してみても、コンテンツのところにつける
という表示があるだけでいまいちどこか
わかりませんでした。
下が実際のコードです。
ご教授頂ければと思います。お願いいたします。

html
1<!DOCTYPE html>
2<html>
3<head>
4<!-- drawer.css -->
5<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/css/drawer.min.css">
6<!-- jquery & iScroll -->
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
8<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
9<!-- drawer.js -->
10<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script>
11
12</head>
13<body class="drawer drawer--left">
14  <header role="banner">
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="drawer-menu">
23        <li><a class="drawer-brand" href="#">Brand</a></li>
24        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
25        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
26      </ul>
27    </nav>
28  </header>
29  <main role="main">
30    <!-- Page content -->
31  </main>
32  
33  <!-- ドロワーメニューの利用宣言 -->
34  <script>
35    $(document).ready(function() {
36    $('.drawer').drawer();
37  });
38  </script>
39</body>
40
41</html>
42コード

行動規範の内容に同意します

回答1件

「drawer.js drawer-overlay コンテンツ」でググったところ、2番目にこのページがヒットしました。
大変わかりやすいと思いますので、参考にされてはいかがでしょうか。

コンテンツ部分にかかる半透明の黒色の変更 | Drawer（drawer.js）の見た目をカスタマイズするCSSの書き方 | Travelogue

本当に検索をしたのですか？

「検索してみても、コンテンツのところにつけるという表示があるだけでいまいちどこかわかりませんでした」とのことですが、どのようなキーワードで検索をかけたのでしょうか。前述の検索キーワードはあなたのご質問の文章の中から抜き出したものです。

失礼ながら、そもそも本当に検索をしてから質問をしているのか疑っています。
「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」みたいな質問だと、受け取りました。
質問するときのヒントにもありますように、最低限の検索をしてから質問をされることをお勧めします。

ググってから質問をするべき理由

なぜ質問する前に最低限の検索をした方がいいかというと、ググればすぐわかるような質問をすると、回答者に「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」みたいな丸投げ質問だと思われてしまうからです。
teratailの回答者は無償で回答していますので、「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」のような質問をされると、「俺はお前の部下じゃねーよ」などと不快になる人が多いかと思います。
不快になるような質問からは、よいコミュニケーションが生まれず、問題解決につながらず、ただ荒れたやり取りがあるだけになってしまいます。
これは避けるべきです。

本当にググってもわからなかった場合

ですから、本当にググってもわからなかった場合、「XXXXXというキーワードで調べて、XXXという記事を見ましたが、それらしき内容ではありませんでした」などと書いてください。
そうであれば、「ああ、この人は丸投げをしているのではなくて、ググるのが下手なんだな」と伝わるはずです。

質問者も回答者も、お互いに配慮して、気持ちの良いやり取りをしていきたいと思っていますので、なにとぞご協力をお願いいたします。

投稿2020/06/09 01:28

Lhankor_Mhy

総合スコア36960

MIYABITSUJIMOTO

2020/06/09 11:36

ご回答ありがとございます。私も検索した際こちらの記事を拝見いたしました。コピーして使ってみたのですが、overlayは変わりませんでした。そもそもhtmlにoverlayのクラスを追加していないので、どこに追加すればいいのかがわかなくて今回質問させて頂きました。ご回答頂ければと思います。お願いいたします

MIYABITSUJIMOTO

2020/06/09 11:37

どこにクラスを追加するのかという記事がいまいち見つけることができませんでした。