前提・実現したいこと
スマホ用ドロワーを作成しており、
クリックで開く、メニュー外クリックで閉じるは実装できています。
メニュー部スワイプで閉じたいのですがうまくいきません。
イメージ:https://www.google.com/のSP版ドロワー
発生している問題・エラーメッセージ
スワイプでドロワー閉じ処理が追加できない
該当のソースコード
html
1<div class="sp-top"> 2 <div class="top-inline hamburger menu-trigger"> 3 <a class="top-link1 " href="#"> 4 <img src="img/ham.png"> 5 </a> 6 </div> 7 </div> 8 <input type="checkbox" id="navTgl"> 9 <label for="navTgl" class="open"><span></span></label> 10 <label for="navTgl" class="close" id="ham"></label> 11 <nav class="hammenu" id="ham"> 12 <!-- ~メニュー中身~ --> 13 </nav> 14 <div class="overlay"></div>
CSS
1.contents { 2 transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); 3} 4#navTgl:checked ~ .contents { 5 transform: translateX(250px); 6} 7 8/* :::::: toggle button :::::: */ 9#navTgl { 10 display: none; 11} 12label { 13 cursor: pointer; 14 position: absolute; 15 top: 2.2vh; 16 left: 5vw; 17} 18.open { 19 z-index: 2; 20 width: 24px; 21 height: 24px; 22 /* background: lightSeaGreen; */ 23 transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); 24 background-image: url(../img/ham.png); 25 background-repeat: none; 26 background-size: 24px; 27 background-repeat: no-repeat; 28} 29.open::before, 30.open::after { 31 content: ""; 32} 33.open span, 34.open::before, 35.open::after { 36 content: ""; 37 position: absolute; 38 top: calc(50% - 1px); 39 left: 30%; 40 width: 40%; 41 /*border-bottom: 2px solid white;*/ 42 transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); 43} 44.open::before { 45 transform: translateY(-8px); 46} 47.open::after { 48 transform: translateY(8px); 49} 50.close { 51 z-index: 1; 52 width: 100%; 53 height: 100%; 54 pointer-events: none; 55 transition: background .6s; 56 margin: 0 0 0 -25px; 57} 58#navTgl:checked + .open { 59 background: indianRed; 60 transform: translateX(250px); 61 display: none; 62} 63#navTgl:checked + .open span { 64 transform: scaleX(0); 65} 66#navTgl:checked + .open::before { 67 transform: rotate(45deg); 68} 69#navTgl:checked + .open::after { 70 transform: rotate(-45deg); 71} 72#navTgl:checked ~ .close { 73 pointer-events: auto; 74 background: rgba(0,0,0,.5); 75 width: 100vh; 76 height: 100vh; 77 margin: -2.2vh 0 0px -5vw; 78} 79 80/* :::::: drawer menu :::::: */ 81.hammenu { 82 z-index: 1; 83 position: fixed; 84 overflow: auto; 85 top: 0; 86 left: 0; 87 width: 67vw; 88 height: 100vh; 89 margin: 0; 90 padding: 10px; 91 box-sizing: border-box; 92 background: #ffffff; 93 transform: translateX(-100%); 94 transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); 95} 96.hammenu h2, 97.hammenu a { 98 color: rgba(0,0,0,.54); 99 font-size: 16px; 100} 101.hammenu h2 { 102 text-align: center; 103} 104.hammenu ul { 105 margin: 0; 106 padding: 0; 107} 108.hammenu li { 109 font-size: .8em; 110 line-height: 1.4; 111 text-align: left; 112 margin: 0px 0px 0px 0px; 113} 114.hammenu li:not(:first-child) { 115 border-top: 1px solid rgba(255,255,255,.6); 116} 117.hammenu a { 118 /* display: block;*/ 119/* padding: 1em 2em;*/ 120 text-decoration: inherit; 121 transition: background .6s; 122} 123/*.hammenu a:hover { 124 background: black; 125} 126*/ 127.hammenu img{ 128 padding:0 4vw 0 0; 129} 130 131 132#navTgl:checked ~ .hammenu { 133 transform: none; 134} 135 136.hamlogo{ 137 margin:0 0 0 0; 138}
試したこと
CSS擬似クラスにてアクションを追加試行中
補足情報(FW/ツールのバージョンなど)
CSSでクラスを当ててドロワーのOPEN・CLOSEを切り替えています
参考
https://lopan.jp/css-animation-drawer/
あなたの回答
tips
プレビュー