SIR
목록으로

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

요구르트
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 6,788
답변 2
목록

Copy 
<!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/

 

 

 

#html #css #jquery #script

답변 2개

채택된 답변
+20 포인트

Copy 
<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>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

감사합니다 덕분에 해결했습니다!!

댓글을 작성하려면 로그인이 필요합니다.

제가 제이쿼리를 사용하지 않는 사람이라... 코드를 짜 드리지는 못하겠지만...

 

여튼 좌측 펼침메뉴 div 의 아이디가 id="category-side" 인데.

버튼 클릭시 id="category-side" 의 innerHTML 을 세션스토리지에 담아서

링크로 넘어가서는 id="category-side" 의 innerHTML 을 담아놓은 세션스토리지의 데이터로 바꾸면 될 것 같은데요?

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고