时间戳

首页 > 解决方案 > 如何设计具有下拉效果的下拉菜单？

javascript - 如何设计具有下拉效果的下拉菜单？

问题描述

我正在尝试使用动画制作下拉菜单。

到目前为止，我完成了一个常见的下拉菜单，如下例所示。

input {
  display: none;
}

label {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid;
  border-radius: 4px;
  background: transparent;
  color: #000;
  z-index: 100;
}


.menu {
  -webkit-transition: all .3s ease;
  height: 0;
  overflow: hidden;
  width: 200px;
  background: red;
  height: 100px;
  z-index: -1;
  /* transform: translateY(-100%); */
  /* I want it drawn down behind the button */
}

input:checked+.menu {
  transform: translateY(50%);
}
<label for="check">Click me</label>

<input id="check" type="checkbox">

<div class="menu">
  <p>I am dropdown menu</p>
</div>

然而，我的目的是设计一个可以在后面滑下（下拉）的菜单

按钮。我已将 z-index 设置为这些元素但不起作用。

此外，我无法将背景颜色设置为切换按钮，我需要保持透明。

有什么建议么？

标签： javascripthtmlcssanimation

解决方案

检查以下css更改使菜单元素绝对和顶部填充

input {
  display: none;
}

label {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid;
  border-radius: 4px;
  background: transparent;
  color: #000;
  z-index: 100;
}


.menu {
  -webkit-transition: all .3s ease;
  height: 0;
  overflow: hidden;
  width: 200px;
  background: #ffffff;
  height: 100px;
  z-index: -1;
  position:absolute;
  padding-top:35px;
  border:1px solid #000000;
  border-radius: 4px;
}

input:checked+.menu {
  transform: translateY(-40px);
}
<label for="check">Click me</label>

<input id="check" type="checkbox">

<div class="menu">
  <p>I am dropdown menu</p>
</div>

推荐阅读