1. 타겟

💡 금일 타겟 → 서치 메뉴 카테고리 메뉴 완료, 헤드 노란띠 애니메이션 li leave시 효과 적용되도록 수정

2. 과정

• 메뉴 콘텐츠 사이즈에 따른 오버플로우 적용
  • max-height 로 해결

#fix_menu .fix_cont .wrap > div {
    max-height: calc(100vh - 142px);
    overflow-y: scroll;
}

• 스크롤바 커스텀

/* 스크롤바 커스텀 */
#fix_menu .fix_cont .wrap > div::-webkit-scrollbar {
  width: 10px;  /* 스크롤바의 너비 */
}

#fix_menu .fix_cont .wrap > div::-webkit-scrollbar-thumb {
	height: 30%; /* 스크롤바의 길이, 콘텐츠 영역에 따른 최소크기 변경 불가 */
  background: #a4a9b4; /* 스크롤바의 색상 */
  border-radius: 10px;
}

#fix_menu .fix_cont .wrap > div::-webkit-scrollbar-track {
  background: #eaecef;  /*스크롤바 뒷 배경 색상*/
}

• 헤드 애니메이션 조절

<li> mouseleave시 디테일 콘텐츠로 마우스가 이동하면 사라지기 때문에 우측 아이콘 영역에 .hover시 효과를 초기화 시켰습니다.

/* 메뉴 검색 아이콘 영역 */
        $(".sign").hover(function(){
            $(".part" + (n + 1)).css({
                "display": "none"
            });
            $(".curtain").removeClass("modal");
            lph = lw / 2 + lp; //양쪽으로 작아지기 위한 이동
            $("#stiker .wrap > i").css({
                "left": lph,
                "width": 0
            });
            $("#stiker").stop().animate({
                "height": 82
            }, 300)            
        })

3. 결과

KB 카드 완료

PC : 메인 페이지, 카테고리창, 검색창

Mobile : 메인페이지, 검색창