모바일 하단 플로팅 퀵메뉴 소스 좀 봐주세요ㅠㅠ 채택완료
그누초초보
2년 전
조회 1,943
서치해서 모바일 하단 플로팅 퀵메뉴를 만들었는데요~
잘되고있어요~ 근데..처음에 디폴트로 펼쳐진 채로 수정해달라 하셔서 수정하려니 잘 안되어서요ㅠㅠ
펼쳐진 채로 디폴트로 보여지기는 하는데 add버튼을 두번 눌러야 닫히더라구요~
제가 js소스를 몰라서 이해가 안되어서 수정을 제대로 못했는데
봐주실 수 있으실까요?
지금 디플트로 보이게 하는건 js에서 해줘야하는데 제가 못해서.. css에서
처음에 display:none으로 되어있는걸 강제로 block으로 처리한거였어요ㅠㅠ
js 소스를 어떻게 변경해야할까요?ㅠㅠㅠ
html소스
</p>
<p><link rel="stylesheet" href="<a href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"" target="_blank" rel="noopener noreferrer">https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"</a> />
<div id="quick"></p>
<p> <div id="quickMenu">
<a href="#"><span class="material-symbols-outlined">add</span></a>
<div class="menuWrap">
<ul>
<!-- 퀵메뉴1 { -->
<li>
<a href="tel:">
<span class="material-symbols-outlined">call</span>
<span class="quick_txt">테스트</span>
</a>
</li>
<!-- } -->
<!-- 퀵메뉴2 { -->
<li>
<a href="/event_quick_m.php">
<span class="material-symbols-outlined">calendar_month</span>
<span class="quick_txt">테스트</span>
</a>
</li>
<!-- } -->
<!-- 퀵메뉴3 { -->
<li>
<a href="" target="_blank">
<span class="material-symbols-outlined">sms</span>
<span class="quick_txt">테스트</span>
</a>
</li>
<!-- } -->
<li>
<a href="/product/list.html?cate_no=792">
<span class="material-symbols-outlined">schedule</span>
<span class="quick_txt">테스트</span>
</a>
</li>
<!-- } -->
</ul>
</div>
<div id="modalCover" />
</div></p>
<p></div></p>
<p>
js소스
</p>
<p>$(document).ready(function(){
quickBtn();
});</p>
<p>$(function() {
$('.quick5').click(function() {
$('.quick1').fadeToggle(200);
$('.quick2').fadeToggle(250);
$('.quick3').fadeToggle(300);
$('.quick4').fadeToggle(350);
});
});</p>
<p>function quickBtn(){
var quick = $('#quick'); // 퀵 영역 전체
var topBtn = $('#topBtn').children('a'); // 위로가기 버튼
var quickMenuBtn = $('#quickMenu').children('a'); // 퀵메뉴 버튼
var quickMenu = $('.menuWrap'); // 퀵메뉴
var modalCover = $('#modalCover');</p>
<p> // 스크롤 수치가 맨 위에서 1px 이라도 떨어지면 버튼들 나타나게
topBtn.click(function(){
$('html, body').stop().animate({
scrollTop : 0
}, 1000, 'easeInOutQuint');
return false;
});</p>
<p> // 위로가기 버튼을 클릭하면 맨 위로 스크롤 이동 & 퀵메뉴가 열려있을 시 맨 위로 이동 후 닫기
$(window).scroll(function(){
var top = $(window).scrollTop();
if( !top ) {
quick.stop().animate({
opacity : 0
}, function(){
quick.hide();
});
quickMenuBtn.removeClass('rot');
quickMenu.animate({
opacity : 0
}, function(){
quickMenu.hide();
});
modalCover.trigger('click');
} else {
quick.stop().show().animate({
opacity : 1
});
}
});</p>
<p> // 퀵메뉴 버튼을 누르면 회전 & 메뉴들 나오게
quickMenuBtn.click(function(){
if ( $(this).hasClass('rot') ){
$(this).removeClass('rot');
quickMenu.stop().animate({
opacity : 0
}, function(){
quickMenu.hide();
});
modalCover.stop().animate({
opacity : 0
},function(){
modalCover.hide()
});
} else {
$(this).addClass('rot');
quickMenu.show().stop().animate({
opacity : 1
});
modalCover.stop().show().animate({
opacity : 0.5
});
}
return false;
});</p>
<p> modalCover.click(function(){
quickMenuBtn.removeClass('rot');
quickMenu.stop().animate({
opacity : 0
}, function(){
quickMenu.hide();
});
$(this).stop().animate({
opacity : 0
},function(){
modalCover.hide()
});
});</p>
<p>};</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인