메뉴 슬라이드 제작 유용한 팁  jquery 드롭다운 div 슬라이드 소스와 제어방법.
1홈페이지 메뉴 배너 슬라이드 제작에 유용한 드롭다운(위에서 아래로 내려오는 혹은 펼쳐지는) 소스입니다.

* slideUp, slideDown, slideToggle
$(선택자).slideUp(속도);
$(선택자).slideUp(속도),slideDown(속도);

$(선택자).css("속성","값").slideUp(속도),slideDown(속도);
$(선택자).css("속성","값").slideToggle(속도);


제이쿼리로 요소를 부드럽게 올라가게 하거나 내려오게 할 수 있습니다. 또한 올라 갔다가 곧바로 내려오게 할 수 있으며, 
더불어 CSS 속성도 추가할수 있습니다.


jquery 버젼
https://www.relation.co.kr/images_board/board_system_publishing/1/index_jq.php

$("document").ready(function(){          
  //BRD left
  $(".brd_ls > dl dd:not(:first)").css({"display":"none"});
  $(".brd_ls > dl dt").click( function(){
    let dt_idx = $(this).index("dt");
    if( $(".brd_ls > dl dd:eq("+dt_idx+")").css("display") != "none" ){
      $(".brd_ls > dl dd:eq("+dt_idx+")").slideUp("fast");  
    }else{
      $(this).siblings("dd").slideUp("fast"); //or slow
      $(".brd_ls > dl dd:eq("+dt_idx+")").slideDown("fast");
    }
  });
                    
  //RIGHT
  $(".btn_area_ri > ul li button").click( function(){
    let btn_idx = $(this).index("button");
    switch(btn_idx){
      case(1):
        $(".brd_ls_ri > dl dd").slideToggle(300);
        console.log("toggle");
        break;
      case(2):
        $(".brd_ls_ri > dl dd").slideUp(300);
        console.log("slideUp");
        break;
      case(3):
        $(".brd_ls_ri > dl dd").slideDown(300);
        console.log("slideDown");
        break;
      default: //0
        $(".brd_ls_ri > dl dd").slideUp(300).slideDown(300);
        console.log("up/down");
        break;
     }
    });
  });  

javascript 버젼
https://www.relation.co.kr/images_board/board_system_publishing/1/index_js.php

const top_area = document.getElementById("top_calendar_area");
const top_bg = document.querySelector(".top_bg");

/* LEFT AREA */        
const open_penel = () => {
  top_calendar_area.classList.add("on");
  top_bg.style.display = "block";
}

const close_penel = () => {
  top_calendar_area.classList.remove("on");
  top_bg.style.display = "none";
}

let ledtls = document.querySelectorAll(".brd_ls > dl > dt"); 
ledtls.forEach( x => {
  x.addEventListener("click", ()=>{
    //dd_close();
    let self_txt = x.innerText;
    let sibling_dd = x.nextElementSibling;   /* nextsibling 띄어쓰기 차이 */
    let sibling_boolean = sibling_dd.classList.contains("on");  /* hasclas()  */
    if(sibling_boolean == false){
      sibling_dd.classList.add("on");
    }else{
      sibling_dd.classList.remove("on");
    }
  });
});


/* RIGHT AREA */
const ridd = document.querySelector(".brd_ls_ri > dl > dd");
const ribtnls = document.querySelectorAll(".btn_area_ri > li > button");
ribtnls.forEach( (btn, index) => {
  btn.addEventListener("click", ()=>{
    self_txt = btn.innerText;
    if(self_txt === "up"){
      ribtn_up(self_txt, index);
    }else if(self_txt === "down"){    
      ribtn_down(self_txt, index);
    }else if(self_txt === "toggle"){
      const ridd_boolean = ridd.classList.toggle("on");
      if( ridd_boolean == true){
        ribtn_down(self_txt, index);    
      }else{
        ribtn_up(self_txt, index);
      }
    }
   });
});

const ribtn_down = (txt, num) => {
  ridd.classList.add("on");
}

const ribtn_up = (txt, num) => {
  ridd.classList.remove("on");
}