单击时上下滑动菜单项

Question

So I've created this burger menu:

 function menuToggle() { var x = document.getElementById("burgerMenu"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 :root { /* Static Colors*/ --clr-heading-footer: #4C5BA0; --clr-button: #4C5BA0; --clr-nav-color: #8D90A1; /* Dark Theme */ --clr-bg-dark: #2F2F35; --clr-card-bg-dark: #3A3B41; --clr-card-body-text-dark: #8D90A1; --clr-card-title-text-dark: #D3D3D9; --clr-nav-activ-color-dark: #D3D3D9; --clr-nav-hover-color-dark: #D3D3D9; /* (Default) Light Theme */ --clr-bg-light: #E1E1E1; --clr-nav-activ-color-light: #3A3B41; --clr-nav-hover-color-light: #3A3B41; /* (Default) Set Colors */ --foreground: var(--clr-bg-dark); --background: var(--clr-bg-light); --activ-mode-icon: var(--light-sun); --activ-hover-mode-icon: var(--light-hover-sun); --selected-nav-page: var(--clr-nav-activ-color-light); --hover-nav: var(--clr-nav-hover-color-light); /* (Default) Page Settings */ height: 100%; font-family: 'Montserrat'; padding: 0% 12%; } body { background: var(--background); color: var(--foreground); } .logo-style { /* Logo Style */ font-style: normal; font-weight: bold; font-size: 2rem; line-height: 2.438rem; letter-spacing: 0.05em; color: #4C5BA0; } /* Navigation */ .topnav { overflow: hidden; background: none !important; align-items: center; display: flex; justify-content: space-between; } .topnav button { border: none; cursor: pointer; } .topnav a { color: var(--clr-nav-color); text-align: center; padding: 0.09rem 0.30rem; text-decoration: none; font-size: 1.063rem; } .topnav a:hover { color: var(--hover-nav); } .topnav a.active { color: var(--selected-nav-page); } .right-nav { display: flex; flex-direction: row; gap: 0.625rem; align-items: center; } .topnav-menu { /* Burger Menu Content*/ width: 100%; overflow: hidden; padding: 0.09rem 0.30rem; background-color: darkblue; } .topnav-menu ul { /* Burger Menu Content*/ float: right; list-style-type: none; } .topnav-menu a { color: var(--clr-nav-color); text-align: center; padding: 0.09rem 0.30rem; text-decoration: none; font-size: 1.063rem; } .topnav-menu a:hover { color: var(--hover-nav); } .topnav-menu a.active { color: var(--selected-nav-page); } /* Navigation Burger Menu */ .line-one { width: 1.875rem; } .line-two { width: 1.875rem; } .line-three { width: 1.875rem; } .burger-menu div { width: 1.875rem; height: 0.25rem; background-color: var(--clr-nav-color); margin: 0.313rem 0; border-radius: 1.563rem; } .burger-menu { width: 1.875rem; } .burger-menu:hover div { width: 1.875rem; background-color: var(--hover-nav); }

 <div class="topnav"> <div class="left-nav"> <a href="#home"><p class="logo-style">Metrics</p></a> </div> <div class="right-nav"> <a href="#home" class="active">Home</a> <a href="#archives">Archives</a> <a href="#coverage">Coverage</a> <button type="button" class="dark-mode-toggle disp_mode nav-icon" id="dark-mode-toggle"></button> <a href="#burger-menu" class="burger-menu" onclick="menuToggle()"> <div class="line-one"></div> <div class="line-two"></div> <div class="line-three"></div> </a> </div> </div> <!-- Burger Menu Hidden By Default Untill menuToggle() is activated --> <div class="topnav-menu" id="burgerMenu" style="display: none;"> <ul> <li><a href="#item1">item1</a></li> <li><a href="#item2">item2</a></li> <li><a href="#item3">item3</a></li> </ul> </div>

What I'm trying to de is to make this burger menu <ul> items, slideDown like this code, and it should also slide up on second click.

 document.getElementById("button").addEventListener("click", function () { document.getElementById("wrapper").style.height = "240px"; });

 #wrapper { transition:height 1s ease-out; height:0; overflow:hidden; } .slideMeDown { font-size:24px; background: #4679bd; color:white; width:50%; height:200px; padding:20px; }

 <button id="button">Click to slideDown!</button> <div id="wrapper"> <div class="slideMeDown">cool!</div> </div>

How can this be achieved? I can't seem to make it work, when I try to merge these two codes together? And I dont know how to make it slide up, or it that just ease-in ?

Answer 1

You need to toggle the height of the element rather than the display css property. If you toggle from display: block; to display: none; you cannot use the transition property, because it's just siwtching from visible to invisible.

The logic behind your second snippet is that the div element is never hidden, rather they play with the height of the element. When the element height equals 0 it gives the illusion that it has disappeared but it has not.

When you toggle the height then you can add a transition to the change made by JS.

Note: overflow: hidden; is necessary to hide the content inside the element. If you don't use it, then the text inside will overflow the div element.

Try and review the following suggested fix

 function menuToggle() { var list = document.getElementById("list"); var listElements = list.childElementCount; var height = 30 * listElements; var x = document.getElementById("burgerMenu"); if (x.style.height === "0px") { x.style.height = height + "px"; } else { x.style.height = "0px"; } }

 :root { /* Static Colors*/ --clr-heading-footer: #4C5BA0; --clr-button: #4C5BA0; --clr-nav-color: #8D90A1; /* Dark Theme */ --clr-bg-dark: #2F2F35; --clr-card-bg-dark: #3A3B41; --clr-card-body-text-dark: #8D90A1; --clr-card-title-text-dark: #D3D3D9; --clr-nav-activ-color-dark: #D3D3D9; --clr-nav-hover-color-dark: #D3D3D9; /* (Default) Light Theme */ --clr-bg-light: #E1E1E1; --clr-nav-activ-color-light: #3A3B41; --clr-nav-hover-color-light: #3A3B41; /* (Default) Set Colors */ --foreground: var(--clr-bg-dark); --background: var(--clr-bg-light); --activ-mode-icon: var(--light-sun); --activ-hover-mode-icon: var(--light-hover-sun); --selected-nav-page: var(--clr-nav-activ-color-light); --hover-nav: var(--clr-nav-hover-color-light); /* (Default) Page Settings */ height: 100%; font-family: 'Montserrat'; padding: 0% 12%; } body { background: var(--background); color: var(--foreground); } .logo-style { /* Logo Style */ font-style: normal; font-weight: bold; font-size: 2rem; line-height: 2.438rem; letter-spacing: 0.05em; color: #4C5BA0; } /* Navigation */ .topnav { overflow: hidden; background: none !important; align-items: center; display: flex; justify-content: space-between; } .topnav button { border: none; cursor: pointer; } .topnav a { color: var(--clr-nav-color); text-align: center; padding: 0.09rem 0.30rem; text-decoration: none; font-size: 1.063rem; } .topnav a:hover { color: var(--hover-nav); } .topnav a.active { color: var(--selected-nav-page); } .right-nav { display: flex; flex-direction: row; gap: 0.625rem; align-items: center; } .topnav-menu { /* Burger Menu Content*/ width: 100%; overflow: hidden; transition: 1000ms; background-color: darkblue; } .topnav-menu ul { /* Burger Menu Content*/ float: right; list-style-type: none; } .topnav-menu a { color: var(--clr-nav-color); text-align: center; padding: 0.09rem 0.30rem; text-decoration: none; font-size: 1.063rem; } .topnav-menu a:hover { color: var(--hover-nav); } .topnav-menu a.active { color: var(--selected-nav-page); } /* Navigation Burger Menu */ .line-one { width: 1.875rem; } .line-two { width: 1.875rem; } .line-three { width: 1.875rem; } .burger-menu div { width: 1.875rem; height: 0.25rem; background-color: var(--clr-nav-color); margin: 0.313rem 0; border-radius: 1.563rem; } .burger-menu { width: 1.875rem; } .burger-menu:hover div { width: 1.875rem; background-color: var(--hover-nav); }

 <div class="topnav"> <div class="left-nav"> <a href="#home"><p class="logo-style">Metrics</p></a> </div> <div class="right-nav"> <a href="#home" class="active">Home</a> <a href="#archives">Archives</a> <a href="#coverage">Coverage</a> <button type="button" class="dark-mode-toggle disp_mode nav-icon" id="dark-mode-toggle"></button> <a href="#burger-menu" class="burger-menu" onclick="menuToggle()"> <div class="line-one"></div> <div class="line-two"></div> <div class="line-three"></div> </a> </div> </div> <!-- Burger Menu Hidden By Default Untill menuToggle() is activated --> <div class="topnav-menu" id="burgerMenu" style="height:0px;"> <div style="padding-right:5px"> <ul id="list"> <li><a href="#item1">item1</a></li> <li><a href="#item2">item2</a></li> <li><a href="#item3">item3</a></li> </ul> </div> </div>