如何获得动画下拉菜单

Question

我想有一个动画下拉菜单作为导航！ 在 Css 中，我将过渡高度设置为 1s，在 Javascript 中我添加一个值
对于事件侦听器中的高度属性。当火腿符号为 单击菜单应在 1 秒的过渡中下降。问题是当我单击火腿符号时，它不会随着过渡而移动......它只是出现...我最近发现当我在 css 下拉菜单中添加显示：块时它可以工作，但显然切换单击火腿符号不再有效！请帮忙！

<nav>
    <a href="#">
         <img id="ham" alt="toggle menu" src="Images/hamburger.svg">
    </a>
    <div id="dropdown" class="hide-mobile">
         <ul>
             <li>
                <a href="#home_anchor">Home</a>
             </li>
             <li>
                <a href="#service_anchor">Service</a>
             </li>
             <li>
                <a href="#einbruch_anchor">Einbruchschutz</a>
             </li>
         </ul>
     </div>
</nav>

#dropdown {
        /* display: block */
        border-top: 3px solid red;
        position: absolute;
        width: 80%;
        top: 100%;
        left: 10%;
        height: 0;
        background: #fff;
        padding-top: 2.2rem;
        box-shadow: 0 2px 2px lightgrey;
        z-index: 1;
        transition: height 1s;
        }

let menu = document.getElementById('ham');
let nav = document.getElementById('dropdown');
menu.addEventListener('click', function(e) {
nav.classList.toggle('hide-mobile');
nav.style.height = "400px";
})

Answer 1

看看这个代码笔。你可以做得更好，但你的基本要求得到了满足。您只需要：

• 切换height，而不是top。
• 设置overflow-y: hidden;

Answer 2

如果你想

保留你的解决方案，你可以尝试这样的事情：

let menu = document.getElementById('ham');
let nav = document.getElementById('dropdown');
var isOpen = false;
menu.addEventListener('click', function(e) {
	
  if (isOpen == false){
	nav.classList.toggle('hide-mobile');
	nav.style.top = "-100%";
  isOpen = true;
  }
  else{
  nav.classList.toggle('hide-mobile');
	nav.style.top = "0%";
  isOpen = false;
  }
})

#dropdown {
  border-top: 3px solid red;
  position: absolute;
  width: 80%;
  top: 0;
  left: 10%;
  background: #fff;
  padding-top: 2.2rem;
  box-shadow: 0 2px 2px lightgrey;
  z-index: 1;
  transition: 1s;
 }
 
 
 /* Just for the example */
 img{
   height: 50px;
   width: 50px;
   margin-left:-5px;
   margin-top:-5px;
 }

<nav>
    <a href="#">
         <img id="ham" alt="toggle menu" src="https://static.thenounproject.com/png/195031-200.png">
    </a>
    <div id="dropdown" class="hide-mobile">
         <ul>
             <li>
                <a href="#home_anchor">Home</a>
             </li>
             <li>
                <a href="#service_anchor">Service</a>
             </li>
             <li>
                <a href="#einbruch_anchor">Einbruchschutz</a>
             </li>
         </ul>
     </div>
</nav>

单击"运行代码片段"以查看动画。如果这不起作用，则您的浏览器显示肯定有问题，请尝试在另一台计算机上并检查javascript是否未被禁用。

JSFiddle ：https://jsfiddle.net/t3wrhjpq/2/