https://ecojournal.co.kr/company/js/menu.js

1  var mheight = 0;
2  var normalheight = 0;
3  $(window).resize(function() { // 사이즈 변경 이벤트
4    var width = window.innerWidth;
5    if (width > 1024) {
6      $("body > header span").removeClass("open");
7      $("body > header span").addClass("close");
8      $("#menu").addClass("on");
9      $("#menu").css("height", mheight+"px");
10    }
11  });
12  $(document).ready(function() {
13    var width = window.innerWidth;
14    // Size Check (사이즈별 모바일 메뉴 초기화)
15    if (width <= 1024) {
16      $("body > header span").removeClass("close");
17      $("body > header span").addClass("open");
18    } else {
19      $("#menu").addClass("on");
20    }
21
22    // 모바일 메뉴 버튼 이벤트
23    $("header span").click(
24      function() {
25        if ($(this).hasClass("open")) {
26          $(this).removeClass("open");
27          $(this).addClass("close");
28          $("#menu").addClass("on");
29          $("#menu").css("height", mheight+"px");
30        } else if ($(this).hasClass("close")) {
31          $(this).removeClass("close");
32          $(this).addClass("open");
33          $("#menu").removeClass("on");
34          $("#menu").css("height", 0);
35        }
36      }
37    );
38
39    // 메뉴 이벤트
40    var num = $("#menu > ul > li").length;
41    var list_height = 40;
42
43    for (var i = 0; i < num; i++) {
44        if ($("#menu > ul > li:nth-child("+(i+1)+") > ul").length > 0) {
45            $("#menu > ul > li:nth-child("+(i+1)+") > a").attr("href", "javascript:;");
46            $("#menu > ul > li:nth-child("+(i+1)+") > a").addClass("expand");
47            $("#menu > ul > li:nth-child("+(i+1)+")").children("ul").css("transition","height 1s");
48            if ($("#menu > ul > li:nth-child("+(i+1)+")").hasClass("on")) {
49              $("#menu > ul > li:nth-child("+(i+1)+")").children("ul").css("height", $("#menu > ul > li:nth-child("+(i+1)+")").children("ul").children("li").length*list_height+"px"); // 초기화
50            } else {
51              $("#menu > ul > li:nth-child("+(i+1)+")").children("ul").css("height", 0); // 초기화
52            }
53
54            $("#menu > ul > li:nth-child("+(i+1)+")").click(function() {
55                if ($(this).hasClass("on")) {
56                    // $(this).children("ul").animate({"height":"0"},1000);
57                    $(this).children("ul").css("height", "0");
58                    $(this).removeClass("on");
59                    mheight -= $(this).children("ul").children("li").length * 40;
60                } else {
61                    // $(this).children("ul").animate({"height":$(this).children("ul").children("li").length*list_height+"px"},1000);
62                    $(this).children("ul").css("height",$(this).children("ul").children("li").length*list_height+"px");
63                    $(this).addClass("on");
64                    mheight += $(this).children("ul").children("li").length * 40;
65                }
66
67                $("#menu").css("height", mheight+"px");
68            });
69        }
70
71        mheight += $("#menu > ul > li:nth-child("+(i+1)+")").height(); // 총 세로 크기 합산
72    }
73  });