用js写一个甜品下拉菜单动画
时间: 2023-12-10 08:04:08 浏览: 28
好的,下面是一个简单的甜品下拉菜单动画示例:
HTML代码:
```html
<div class="menu">
<button class="btn">选择甜品</button>
<ul class="menu-list">
<li>巧克力蛋糕</li>
<li>草莓奶油蛋糕</li>
<li>提拉米苏</li>
<li>芒果布丁</li>
</ul>
</div>
```
CSS代码:
```css
.menu {
position: relative;
}
.btn {
padding: 10px;
background-color: #f5a623;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.menu-list {
position: absolute;
top: 50px;
left: 0;
padding: 0;
margin: 0;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out;
}
.menu-list li {
padding: 10px;
list-style: none;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.menu-list li:last-child {
border-bottom: none;
}
```
JavaScript代码:
```javascript
const btn = document.querySelector('.btn');
const menuList = document.querySelector('.menu-list');
btn.addEventListener('click', function() {
if (menuList.style.maxHeight) {
menuList.style.maxHeight = null;
} else {
menuList.style.maxHeight = menuList.scrollHeight + 'px';
}
});
```
解释说明:
1. 将按钮和菜单列表放在一个父容器 `.menu` 中,设置 `.menu` 的 `position` 属性为 `relative`,使得菜单列表的 `position` 属性为相对该父容器定位。
2. 设置按钮 `.btn` 的样式,包括背景颜色、边框、圆角等。
3. 设置菜单列表 `.menu-list` 的样式,包括位置、背景颜色、边框、圆角、阴影等,同时设置 `max-height` 属性为0,使得菜单列表默认是隐藏的。
4. 给菜单列表中的每个选项添加样式。
5. 监听按钮的点击事件,判断菜单列表是否已经展开,如果已经展开,则将 `max-height` 属性设置为 `null`,使得菜单列表收起来;否则,将 `max-height` 属性设置为菜单列表的滚动高度,使得菜单列表展开。通过设置 `transition` 属性,使得菜单列表展开和收起时具有过渡效果。
这样,就完成了一个简单的甜品下拉菜单动画。