前提・実現したいこと
WEBサイトのドロワーメニューをCSSとJavascriptで作成しております。
メニューオープン時、メニュー外クリックでも閉じれる機能をJavascriptで実装したいのですが、上手くいきません。
ハンバーガーボタンクリックによる開閉は実装済です。
発生している問題・エラーメッセージ
document.addEventListener('click'....で新たにfunctionを作ってみたが、 ボタンを押してもメニューがスライドして出てこない等上手くいかない。
該当のソースコード
HTML
1<section class="anime-renshu3"> 2 <a class="drawer-menu"> 3 <div></div> 4 <div></div> 5 <div></div> 6 </a> 7 <nav class="nav-menu"> 8 <ul> 9 <li><a href="#">menu1</a></li> 10 <li><a href="#">menu2</a></li> 11 <li><a href="#">menu3</a></li> 12 </ul> 13 </nav> 14 <div class="anime-tate"> 15 <h2>広大な空を旅しよう</h2> 16 </div> 17 <div class="overlay"></div> 18 </section>
css
1 2 /* anime-renshu3 */ 3 .anime-renshu3 { 4 background: url(http://sozai.yutorilife.com/s19201200/photo/umi03.jpg); 5 background-position: top right; 6 background-size: cover; 7 height: 100vh; 8 position: relative; 9 overflow: hidden; 10 z-index: 3; 11 } 12 13 .anime-tate { 14 display: inline-block; 15 overflow: hidden; 16 position: absolute; 17 top: 50%; 18 left: 50%; 19 transform: translate(-50%, -50%); 20 } 21 22 .anime-tate h2 { 23 font-weight: 900; 24 font-size: 3vw; 25 color: #fff; 26 background: rgba(0,0,0,.5); 27 padding: 30px; 28 writing-mode: vertical-rl; 29 text-orientation: mixed; 30 visibility: hidden; 31 } 32 33 @keyframes tate-play { 34 from { 35 transform: translateY(-100%); 36 } 37 38 to { 39 transform: translateY(0); 40 } 41 } 42 43 @keyframes tate-mask { 44 from { 45 opacity: : translateY(0); 46 } 47 48 to { 49 transform: translateY(100%); 50 } 51 } 52 53 .tate-start { 54 animation-name: tate-play; 55 animation-duration: .3s; 56 animation-fill-mode: forwards; 57 animation-timing-function: ease; 58 position: relative; 59 visibility: visible !important; 60 } 61 62 .tate-start::before { 63 animation-name: tate-mask; 64 animation-duration: .5s; 65 animation-delay: .5s; 66 animation-fill-mode: forwards; 67 animation-timing-function: ease-in; 68 position: absolute; 69 content: ''; 70 top: 0; 71 left: 0; 72 width: 100%; 73 height: 100%; 74 z-index: 1; 75 background: #fff; 76 } 77 78 /* .humburger-menu } */ 79 .drawer-menu { 80 display: block; 81 width: 80px; 82 height: 80px; 83 background: #193374; 84 position: fixed; 85 top: 0; 86 right: 0; 87 transition: all .8s; 88 z-index: 8; 89 } 90 91 .drawer-menu div { 92 height: 1px; 93 width: 50%; 94 background: #fff; 95 position: relative; 96 top: 50%; 97 left: 50%; 98 transform: translate(-50%, -50%); 99 transition: .5s; 100 } 101 102 .drawer-menu div:nth-of-type(1) { 103 transform: translate(-50%, -10px); 104 } 105 106 .drawer-menu div:nth-of-type(3) { 107 transform: translate(-50%, 10px); 108 } 109 /* menu-open class add event*/ 110 .drawer-menu.menu-open div:nth-of-type(1) { 111 transform: rotate(45deg) translate(-50%, 0px); 112 transform-origin: 0% 50%; 113 } 114 115 .drawer-menu.menu-open div:nth-of-type(2) { 116 opacity: 0; 117 } 118 119 .drawer-menu.menu-open div:nth-of-type(3) { 120 transform: rotate(-45deg) translate(-50%, 0px); 121 transform-origin: 0% 50%; 122 } 123 124 .nav-menu { 125 display: block; 126 width: 400px; 127 height: 100%; 128 position: fixed; 129 top: 0; 130 right: 0; 131 transform: translate(100%, 0); 132 transition: .3s ease-in-out; 133 background: rgba(25,51,116,.7); 134 z-index: 7; 135 } 136 137 .nav-menu ul li { 138 list-style: none; 139 padding: 30px; 140 } 141 .nav-menu ul li a { 142 color: #fff; 143 text-decoration: none; 144 } 145 .nav-menu.active { 146 transform: translate(0, 0); 147 } 148 149 .overlay { 150 position: absolute; 151 top: 0; 152 left: 0; 153 width: 100%; 154 height: 100%; 155 background: none; 156 position: fixed; 157 z-index:6; 158 } 159 160 .overlay.active { 161 background: rgba(0,0,0,.6); 162 } 163
Javascript
1 /* fullscreen subtitle load */ 2 window.addEventListener('load', function() { 3 const element = document.querySelectorAll('.anime-renshu3'); 4 element.forEach((items) => { 5 items.querySelector('.anime-tate h2').classList.add('tate-start'); 6 }); 7 }); 8 9 10 /* humburger menu click */ 11 document.querySelector('.drawer-menu').addEventListener('click', function() { 12 this.classList.toggle('menu-open'); 13 14 const element = document.querySelector('.drawer-menu'); 15 const elem = document.querySelector('.nav-menu'); 16 const overlay = document.querySelector('.overlay') 17 18 if(elem.classList.contains('active')) { 19 elem.classList.remove('active'); 20 element.style.background = '#193374'; 21 overlay.classList.remove('active'); 22 } else { 23 elem.classList.add('active'); 24 /*ボタン背景透過処理*/ 25 element.style.background = 'rgba(25,51,116,0)'; 26 /*active時暗くなる*/ 27 overlay.classList.add('active'); 28 } 29 });
試したこと
document.addEventListener('click' function()...
で.nav-menuをremoveする処理を試しましたが、
.drawer-menuをクリックしてもメニューがスライドしてきません。
補足情報(FW/ツールのバージョンなど)
windows10 64bit
Chrome バージョン: 80.0.3987.122
![guest](/img/icon/icnUserSample.jpg)
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/01 16:41
2020/03/01 16:43
2020/03/01 16:46
2020/03/01 16:50