페이지 이동시에도 드롭메뉴 고정 시키고 싶습니다
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
nav {
width: 150px;
}
ul { padding: 0; }
li {
list-style: none;
line-height: 34px;
}
a {
display: block; /* 범위 확장 */
text-decoration: none;
color: #616161;
text-align: left;
}
.sub_menu { display: none; } /* 서브메뉴들 숨김 */
.snd_menu { }
.trd_menu { }
.selec { } /* 임시 클래스(선택) */
</style>
<body>
<nav>
<ul id="main_menu">
<li class="main_li"><a href="#">ABOUT</a></li>
<li class="main_li"><a href="#">SEASON</a>
<ul class="snd_menu sub_menu">
<li class="main_li"><a href="#">F/W 2023</a>
<ul class="trd_menu sub_menu">
<li class="main_li"><a href="#">OUTWEAR</a></li>
<li class="main_li"><a href="#">TOP</a></li>
<li class="main_li"><a href="#">BOTTOMS</a></li>
<li class="main_li"><a href="#">ACCESSORIES</a></li>
</ul>
</li>
<li class="main_li"><a href="#">S/S 2023</a>
<ul class="trd_menu sub_menu">
<li class="main_li"><a href="#">OUTWEAR</a></li>
<li class="main_li"><a href="#">TOPS</a></li>
<li class="main_li"><a href="#">BOTTOMS</a></li>
<li class="main_li"><a href="#">BAGS</a></li>
<li class="main_li"><a href="#">ACCESSORIES</a></li>
</ul>
</li>
</ul>
</li>
<li class="main_li"><a href="#">COMMUNITY</a>
<ul class="trd_menu sub_menu">
<li class="main_li"><a href="#">NOTICE</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
<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');
})
})
</script>
지금 이 상태인데
해당메뉴를 클릭해서 이동하면 그대로 드롭메뉴가 고정됐으면 좋겠는데 될까요
여기처럼
https://www.eachdiffer.com/
답변 2
<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');
})
$('#main_menu a').each(function () {
if (this.href == location.href) {
// $(this).parents('.sub_menu').slideToggle('fast');
$(this).parents('.sub_menu').toggle();
return false;
}
});
})
</script>
감사합니다 덕분에 해결했습니다!!
제가 제이쿼리를 사용하지 않는 사람이라... 코드를 짜 드리지는 못하겠지만...
여튼 좌측 펼침메뉴 div 의 아이디가 id="category-side" 인데.
버튼 클릭시 id="category-side" 의 innerHTML 을 세션스토리지에 담아서
링크로 넘어가서는 id="category-side" 의 innerHTML 을 담아놓은 세션스토리지의 데이터로 바꾸면 될 것 같은데요?
답변을 작성하시기 전에 로그인 해주세요.
