페이지 이동시에도 드롭메뉴 고정 시키고 싶습니다 채택완료
</strong></p>
<p><!DOCTYPE html></p>
<p><html lang="en"></p>
<p><head></p>
<p> <meta charset="UTF-8"></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p> <title>Document</title></p>
<p> <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script></a></p>
<p></head></p>
<p><style></p>
<p> nav {</p>
<p> width: 150px;</p>
<p>}</p>
<p>ul { padding: 0; }</p>
<p>li {</p>
<p> list-style: none;</p>
<p> line-height: 34px;</p>
<p>}</p>
<p>a {</p>
<p> display: block; /* 범위 확장 */</p>
<p> text-decoration: none;</p>
<p> color: #616161;</p>
<p> text-align: left;</p>
<p>}</p>
<p>.sub_menu { display: none; } /* 서브메뉴들 숨김 */</p>
<p> </p>
<p>.snd_menu { }</p>
<p>.trd_menu { }</p>
<p>
</p>
<p>.selec { } /* 임시 클래스(선택) */</p>
<p></style></p>
<p><body></p>
<p> <nav></p>
<p> <ul id="main_menu"></p>
<p> <li class="main_li"><a href="#">ABOUT</a></li></p>
<p> <li class="main_li"><a href="#">SEASON</a></p>
<p> <ul class="snd_menu sub_menu"></p>
<p> <li class="main_li"><a href="#">F/W 2023</a></p>
<p> <ul class="trd_menu sub_menu"></p>
<p> <li class="main_li"><a href="#">OUTWEAR</a></li></p>
<p> <li class="main_li"><a href="#">TOP</a></li></p>
<p> <li class="main_li"><a href="#">BOTTOMS</a></li></p>
<p> <li class="main_li"><a href="#">ACCESSORIES</a></li></p>
<p> </ul></p>
<p> </li></p>
<p> <li class="main_li"><a href="#">S/S 2023</a></p>
<p> <ul class="trd_menu sub_menu"></p>
<p> <li class="main_li"><a href="#">OUTWEAR</a></li></p>
<p> <li class="main_li"><a href="#">TOPS</a></li></p>
<p> <li class="main_li"><a href="#">BOTTOMS</a></li></p>
<p> <li class="main_li"><a href="#">BAGS</a></li></p>
<p> <li class="main_li"><a href="#">ACCESSORIES</a></li></p>
<p> </ul></p>
<p> </li></p>
<p> </ul></p>
<p> </li></p>
<p> <li class="main_li"><a href="#">COMMUNITY</a></p>
<p> <ul class="trd_menu sub_menu"></p>
<p> <li class="main_li"><a href="#">NOTICE</a></li></p>
<p> </ul></p>
<p> </li></p>
<p> </ul></p>
<p> </nav></p>
<p></body></p>
<p></html></p>
<p> </p>
<p><script></p>
<p> $(document).ready(function(){</p>
<p> </p>
<p> //메뉴 슬라이드</p>
<p> $('#main_menu > li > a').click(function(){</p>
<p> $(this).next($('.snd_menu')).slideToggle('fast');</p>
<p> })</p>
<p> $('.snd_menu > li > a').click(function(e){</p>
<p> e.stopPropagation();</p>
<p> $(this).next($('.trd_menu')).slideToggle('fast');</p>
<p> })</p>
<p> </p>
<p> // 버튼 클릭 시 스타일 변경</p>
<p> $('li > a').focus(function(){</p>
<p> $(this).addClass('selec');</p>
<p> })</p>
<p> $("li > a").blur(function(){</p>
<p> $(this).removeClass('selec');</p>
<p> })</p>
<p> </p>
<p>})</p>
<p> </p>
<p></script></p>
<p><strong>
지금 이 상태인데
해당메뉴를 클릭해서 이동하면 그대로 드롭메뉴가 고정됐으면 좋겠는데 될까요
여기처럼 https://www.eachdiffer.com/
답변 2개
</p>
<p><script>
$(document).ready(function(){
//메뉴 슬라이드
$('#main_menu > li > a').click(function(){
$(this).next($('.snd_menu')).slideToggle('fast');
})
$('.snd_menu > li > a').click(function(e){
e.stopPropagation();
$(this).next($('.trd_menu')).slideToggle('fast');
})
// 버튼 클릭 시 스타일 변경
$('li > a').focus(function(){
$(this).addClass('selec');
})
$("li > a").blur(function(){
$(this).removeClass('selec');
})
</p>
<p> $('#main_menu a').each(function () {
if (this.href == location.href) {
// $(this).parents('.sub_menu').slideToggle('fast');
$(this).parents('.sub_menu').toggle();</p>
<p> return false;
}
});</p>
<p>
})
</script></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인