js手风琴菜单

最新推荐文章于 2024-11-27 16:08:08 发布

伪全栈小白成长记

最新推荐文章于 2024-11-27 16:08:08 发布

阅读量1.8k

点赞数 1

分类专栏： javascript css html js动画文章标签： JS手风琴菜单 HTML css

本文链接：https://blog.youkuaiyun.com/qq_40962557/article/details/83000790

版权

本文介绍如何利用JavaScript创建手风琴效果的下拉菜单，结合HTML和CSS，实现交互式的菜单导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS实现手风琴下拉菜单。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My手风琴菜单</title>
</head>
<body>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
body{
    background: black;
}
#box{
    margin: 50px auto;
    background: white;
    width: 200px;
    height: auto;
    border: 1px solid forestgreen;
}
    ul{
        list-style: none;
    }
    a{
        text-align: center;
        text-decoration: none;
        display: block;
        color: red;
    }
span{
    line-height: 40px;
}
.nav_title{
    height: 40px;
    text-align: center;
    border-bottom: 1px solid grey;
    cursor: pointer;

}
a:hover{
    background-color: pink;
}
.nav_content li{
    line-height: 40px;
    border-bottom: 1px solid grey;
    cursor: pointer;

}

.nav_content{
    overflow: hidden;
    background-color: rgba(0,0,0,0.7);
}
</style>
<div id="box">
    <ul>
        <li>
            <div class="nav_title"><span class="span1">One</span></div>
            <ul class="nav_content">
                <li><a href="#">内容1</a> </li>
                <li><a href="#">内容1</a> </li>
                <li><a href="#">内容1</a> </li>
            </ul>
        </li>
        <li>
            <div class="nav_title"><span class="span1">Two</span></div>
            <ul class="nav_content">
                <li><a href="#">内容

最低0.47元/天解锁文章