페이지 이동시에도 드롭메뉴 고정 시키고 싶습니다

페이지 이동시에도 드롭메뉴 고정 시키고 싶습니다

QA

페이지 이동시에도 드롭메뉴 고정 시키고 싶습니다

본문


<!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 을 담아놓은 세션스토리지의 데이터로 바꾸면 될 것 같은데요?

답변을 작성하시기 전에 로그인 해주세요.
전체 121
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT