JQuery ( offset(), hasClass(), toggleClass() ) hambuger_slide_accordion_menu

offset()
선택된 요소의 상대적 위치를 나타내는 좌표 값을 구하는데 사용
offset().top은 수직 방향의 좌표이고, offset().left는 수평 방향의 좌표이다.

hasClass()
특정 클레스를 가졌으면, true 아니면 false 값 반환.
$("p").hasClass("intro") <p>요소 intro 클레스 가졌으면 true 없으면 false

toggleClass()
매우 자주 사용.
선택된 요소에 특정 클레스를 더하고 빼는 것을 반복.
$("p").toggleClass("main")는 <p> 요소에 'main'클레스를 더하고 빼는 것을 반복한다.

 

hambuger_slide_accordion_menu

 

<script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
<style>
    body { background: #0eb1d5; }
    ul { list-style-type: none; }
    a { text-decoration: none; color: black; }
    #wrapper { cursor: pointer; }
    #wrapper #hambuger_menu { position: relative; width: 25px; height: 20px;
                                  margin: 15px; }
    #wrapper #hambuger_menu span { opacity: 1; left: 0; display: block; width: 100%; 
    		height: 2px; border-radius: 10px; color: black; background-color: white;
            position: absolute; transform: rotate(0deg); transition: .4s ease-in-out;}
            /* transform 회전, 크기, 기울이기, 이동효과 부여 */
    #wrapper #hambuger_menu span:nth-child(1) { top: 0; }
    #wrapper #hambuger_menu span:nth-child(2) { top: 9px; }
    #wrapper #hambuger_menu span:nth-child(3) { top: 18px; }
    #wrapper #hambuger_menu.open span:nth-child(1) {transform: translateY(9px) rotate(135deg); }
    #wrapper #hambuger_menu.open span:nth-child(2) { opacity: 0;transform: translateX(-60px); }
    #wrapper #hambuger_menu.open span:nth-child(3) {transform: translateY(-9px) rotate(-135deg); }
    #container .menu_list .submenu { padding-top: 20px; padding-bottom: 20px; }
    #container .menu_list { padding-left: 0; display: block; position: absolute;
                            width: 400px; background: white; 
                            box-shadow: rgba(100,100,100,0.2) 6px 2px 10px;
                            z-index: 999; overflow-y: auto; overflow-x: hidden; left: -100%; }
    #container .menu_list li.toggle { font-size: 16px; padding: 20px; border-top: 1px solid #dbdcd2; }
    #container .menu_list li:first-of-type { border-top: 0; }
    .toggle, .submenu_content { cursor: pointer; font-size: 16px;
                                position: relative; letter-spacing: 1px; }
    .submenu_content { display: none; }
    .toggle a:before, .toggle a:after {content: ""; display: block; position: absolute;
                                top: 50%; right: 30px; width: 15px; height: 2px; 
                                margin-top: -1px; background-color: #5a5858;
                                transform-origin: 50% 50%; transition: all 0.3s ease-out; }
    .toggle a:before { transform: rotate(-90deg); opacity: 1; z-index: 2; }
    .toggle.active_menu { background: orange; transition: all 0.3s ease; }
    .toggle a.active:before { transform: rotate(0deg); background: #fff; }
    .toggle a.active:after { transform: rotate(180deg); background: #fff; opacity: 0; }
</style>
<script>
    $(document).ready(function () {
      function slideMenu() {
        var activeState = $("#container .menu_list").hasClass("active");
        $("#container .menu_list").animate({left: activeState ? "0%" : "-100%"}, 400);
       }                                          // 3항 연산자
      $("#wrapper").click(function(event) {
        event.stopPropagation();
            // e.preventDefault()와 e.stopPropagation()의 차이
            // stopPropagation() 객체 내에서 이벤트 전달 제거. 
    // preventDefault() 다른 테크의 동작을 중단시키고 함수의 기능을 실행시킨다.
            // 함수로 event 적용한 것만 활성화 다른 것은 stop.
        $("#hambuger_menu").toggleClass("open");
            // toggleClass() 매우 자주 사용.
        $("#container .menu_list").toggleClass("active");
        slideMenu();
      });  
      $(".menu_list").find(".toggle").click(function() {
        $(this).next().toggleClass("open").slideToggle("fast");
        $(this).toggleClass("active_menu").find(".menu_link").toggleClass("active"); 
        $(".menu_list.submenu_content").not($(this).next()).slideUp("fast").removeClass ("open");
        $(".menu_list .toggle").not($(this)).removeClass("active_menu").find(".menu_link"). removeClass("active");
      });
    });
</script>
</head>	
<body>
  <div id="container">
  <div id="wrapper">
  <div id="hambuger_menu"><span></span><span></span><span></span> </div>
  </div>  
   <ul class="menu_list">
     <li id="nav1" class="toggle"> 
        <a class="menu_link" href="#">메뉴 1</a>
     </li>  
   <ul class="submenu submenu_content">
     <li><a href="#">서브메뉴 1</a></li>
     <li><a href="#">서브메뉴 2</a></li>
     <li><a href="#">서브메뉴 3</a></li>
   </ul> 
     <li id="nav2" class="toggle"> 
       <a class="menu_link" href="#">메뉴 2</a>
     </li> 
   <ul class="submenu submenu_content">
     <li><a href="#">서브메뉴 1</a></li>
     <li><a href="#">서브메뉴 2</a></li>
   </ul> 
     <li id="nav3" class="toggle"> 
       <a class="menu_link" href="#">메뉴 3</a>
     </li>
   <ul class="submenu submenu_content">
     <li><a href="#">서브메뉴 1</a></li>
     <li><a href="#">서브메뉴 2</a></li>
     <li><a href="#">서브메뉴 3</a></li>
    </ul>  
   </ul>
 </div> 
</body>