[dropdown] 드롭다운 메뉴 구현 ( 슬라이드 애니메이션 추가 )

[html]

[css]

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 216px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.7s ease;
}

.dropdown-content.show {
	max-height: 500px; /* 적당한 높이로 설정해주세요 */
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
}

 

[js]

var dropdownTimeout;

function showDropdown() {
    clearTimeout(dropdownTimeout);
    var dropdown = document.getElementsByClassName("dropdown-content")[0];
    dropdown.style.display = "block";
    dropdown.style.maxHeight = dropdown.scrollHeight + "px";
}

function hideDropdown() {
    clearTimeout(dropdownTimeout);
    var dropdown = document.getElementsByClassName("dropdown-content")[0];
    dropdownTimeout = setTimeout(function() {
        dropdown.style.maxHeight = "0";
        setTimeout(function() {
            dropdown.style.display = "none";
        }, 700);
    }, 200);
}

 

[TEST]

화면 기록 2023-05-19 오후 1.58.09.mov

0.70MB