お世話になってます。
さて、今回ですがtoggleを用いて開閉システムを作ってみようと思いました。
といいますのも、clickを使って開閉などを制御したいのですが、どう書けばいいかわからなかったためこの方法かなと思い考えているところであります。
HTML
<div id="header_all_frame_min"> <ul> <a class="menu-trigger"> <span></span> <span></span> <span></span> </a> </ul> </div> <div style="width:100%; height:100%; position:absolute; left:-100%; opacity:0; z-index:1; display:block; background-color:#CCC;" id="menu_brack_back"> <ul style="text-align:center;"> <li style="width:100%; height:11.5%; background-color:#000;">〇〇〇</li> <li style="width:100%; height:11.5%; background-color:#000;">〇〇〇</li> <li style="width:100%; height:11.5%; background-color:#000;">〇〇〇</li> <li style="width:100%; height:11.5%; background-color:#000;">〇〇〇</li> <li style="width:100%; height:11.5%; background-color:#000;">〇〇〇</li> <li style="width:100%; height:11.5%; background-color:#000;">〇〇〇</li> <li style="width:100%; height:11.5%; background-color:#000;">〇〇〇</li> <li style="width:100%; height:11.5%; background-color:#000;">〇〇〇</li> </ul> </div>
JS
$("#header_all_frame_min").toggle( function(){ setTimeout(function(){ $("#menu_brack_back").animate({ left:'100%', zIndex:14, opacity:14, },10); }); }, function(){ setTimeout(function(){ $("#menu_brack_back").animate({ width:'1%', zIndex:1, opacity:0, },1000); }); } );
CSS
@media screen and (max-width: 1024px){ #header_all_frame_min { width:30px; height:auto; top:20px; position:fixed; left:20px; opacity:0; margin:auto; background-color:#FFF; z-index:10000; display:block; } } .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 30px; height: 20px; z-index:10001; } .menu-trigger span { position: absolute; left: 0; width: 30px; height: 3px; background-color: #000; border-radius: 4px; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 10px; } .menu-trigger span:nth-of-type(3) { top: 20px; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); } .menu-trigger.active span:nth-of-type(2) { opacity: 0; } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(10px) rotate(45deg); transform: translateY(-10px) rotate(45deg); }
CSSはボタン部分で https://codepen.io/anon/pen/ybdMBj を参考に作りました。
そもそも、ここでtoggleを用いて考えるのはおかしいのではとさえ思っています(toggleについては初使用です)
なにかいい打開策があればぜひとも教えていただけたらと思います。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。