Question

我想要一个动画的下拉菜单作为导航！在CSS中，我将过渡高度设置为1s，在Javascript中，我添加了一个值
用于Eventlistener中的height属性。当火腿符号是单击菜单应在1秒的过渡时间内下降。问题是，当我单击ham-symbol时，它不会随着过渡而移动...它只是出现...我最近在添加display：block时在css下拉菜单中找到了它，但是很明显单击ham-symbol不再起作用！请帮忙！

<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

看看这个codepen。您可以使它更好，但可以满足您的基本要求。您只需要：

切换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/

如何获得动画的下拉菜单？

2 个答案: