모바일 하단 플로팅 퀵메뉴 소스 좀 봐주세요ㅠㅠ
본문
서치해서 모바일 하단 플로팅 퀵메뉴를 만들었는데요~
잘되고있어요~ 근데..처음에 디폴트로 펼쳐진 채로 수정해달라 하셔서 수정하려니 잘 안되어서요ㅠㅠ
펼쳐진 채로 디폴트로 보여지기는 하는데 add버튼을 두번 눌러야 닫히더라구요~
제가 js소스를 몰라서 이해가 안되어서 수정을 제대로 못했는데
봐주실 수 있으실까요?
지금 디플트로 보이게 하는건 js에서 해줘야하는데 제가 못해서.. css에서
처음에 display:none으로 되어있는걸 강제로 block으로 처리한거였어요ㅠㅠ
js 소스를 어떻게 변경해야할까요?ㅠㅠㅠ
html소스
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<div id="quick">
<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>
</div>
js소스
$(document).ready(function(){
quickBtn();
});
$(function() {
$('.quick5').click(function() {
$('.quick1').fadeToggle(200);
$('.quick2').fadeToggle(250);
$('.quick3').fadeToggle(300);
$('.quick4').fadeToggle(350);
});
});
function quickBtn(){
var quick = $('#quick'); // 퀵 영역 전체
var topBtn = $('#topBtn').children('a'); // 위로가기 버튼
var quickMenuBtn = $('#quickMenu').children('a'); // 퀵메뉴 버튼
var quickMenu = $('.menuWrap'); // 퀵메뉴
var modalCover = $('#modalCover');
// 스크롤 수치가 맨 위에서 1px 이라도 떨어지면 버튼들 나타나게
topBtn.click(function(){
$('html, body').stop().animate({
scrollTop : 0
}, 1000, 'easeInOutQuint');
return false;
});
// 위로가기 버튼을 클릭하면 맨 위로 스크롤 이동 & 퀵메뉴가 열려있을 시 맨 위로 이동 후 닫기
$(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
});
}
});
// 퀵메뉴 버튼을 누르면 회전 & 메뉴들 나오게
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;
});
modalCover.click(function(){
quickMenuBtn.removeClass('rot');
quickMenu.stop().animate({
opacity : 0
}, function(){
quickMenu.hide();
});
$(this).stop().animate({
opacity : 0
},function(){
modalCover.hide()
});
});
};
답변 1
제이쿼리 소스를 올리실 때는 스크립트 가장 상단부분에 제이쿼리.js 를 src 로 호출하는 소스까지 올려주시기 바랍니다.
아래처렁요.
<script src="제이퀴리js경로"></script>
<script>
해당코드
</script>
답변을 작성하시기 전에 로그인 해주세요.
