Javascript 如何在单击按钮时转换覆盖菜单

如何用尽可能少的Jquery转换/动画我的

.overlay

div？下面是一个关于的例子。请随意重写代码笔中的JS。非常感谢

HTML

          <nav>
            <button class="hamburger hamburger--squeeze" type="button">
              <span class="hamburger-box">
                <span class="hamburger-inner">button</span>
              </span>
            </button>

            <div class="overlay">
                 menu list goes hee 
             </div>
          </nav>

---

您可以使用jquery中的

toggle

函数获得转换

$("button").click(function() {
   $(".overlay").toggle("slow");
});

---

希望有帮助：）

这是一个CSS版本，它在高度和顶部填充上有一个过渡

.overlay{
位置：固定；
排名：0；
左：0；
身高：0；
宽度：100%；
背景颜色：灰色；
溢出：自动；
z指数：99；
文本对齐：居中；
填充顶部：0；
过渡：高度0.5s；
}
1.超气旋{
位置：绝对位置；
顶部：10px；
左：10px；
}
标签[for=“butt1”]{
边框：1px实心；
背景：浅灰色；
填充物：2px4px；
}
#巴特1{
显示：无；
}
#butt1：选中~。覆盖{
身高：100%；
填充顶部：100px；
过渡：高度0.5s，衬垫顶部0.5s；
}

按钮
接近
菜单单上写着hee

因此，当单击按钮时，您希望转换显示右边的div吗？是的，我希望转换.overlay div。基本上，在单击时打开和关闭.overlay。因为您没有添加jquery脚本。最新的道歉我现在会加进去。你要什么；我提供了cool，但是我如何才能关闭覆盖菜单？那个开关将是徒劳的：（“关闭它”意思是说？那真的很酷！但是我现在还不能编辑我的html到那种程度extent@samsos谢谢，用一个使用现有标记的脚本示例进行了更新。这太棒了！我可以简单地将填充顶部替换为不透明度，因为我只想让它淡入淡出@LGSon@samsos是的，通过向覆盖添加子div，覆盖本身可以透明…还为您添加了一个2:nd脚本，另一种类型的动画可能会给您这样的效果。以下是我到目前为止取得的成果-。它只淡入淡出：(

$("button").click(function() {
   $(".overlay").toggle("slow");
});