js悬浮二级菜单代码_JavaScript实现下拉二级菜单详解

最新推荐文章于 2021-08-20 12:00:44 发布

最新推荐文章于 2021-08-20 12:00:44 发布 · 1.3k 阅读

文章标签：

本文详细介绍了如何使用JavaScript和CSS实现一个悬浮的二级下拉菜单，包括设置HTML骨架、CSS样式以控制菜单的显示和隐藏，以及JavaScript代码来实现动态效果。通过绝对定位和动态改变高度、透明度，实现了菜单的上升下拉动画。同时强调了在CSS中给二级菜单绝对定位并设置其父级相对定位的重要性。

下拉菜单最终效果如图：

实现原理，通过绝对定位的方式，使下拉列表脱离文档流。通过js或者css来控制鼠标移入后的效果

初始时可以改变

1.display：none;使其隐藏

2.height：0px;改变高度使其隐藏

-->加上下面代码可以实现菜单的**上升下拉逐渐出现动画效果**

transition: height 2s ease;

3.opacity：0；改变透明度使其隐藏

-->加上下面代码可以实现菜单的**渐隐渐显动画效果**

 transition: opacity 2s ease;

等等。。。

**以下步骤可以实现二级菜单上升下拉逐渐出现的动画效果，上面其他两种方式可自行尝试**

第一步写html文档，构建页面的骨架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-