html+css多级目录手风琴式分类导航菜单

最新推荐文章于 2024-07-15 23:16:45 发布

小小舍

最新推荐文章于 2024-07-15 23:16:45 发布

阅读量5.1k

点赞数 1

分类专栏： html+css

本文链接：https://blog.csdn.net/qq_43560721/article/details/83691370

版权

html+css 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

menu.html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>多级目录手风琴式分类导航菜单</title>
    <link rel="stylesheet" type="text/css" charset="utf-8" href="menu.css">
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("div").click(function() {
                //slideToggle([speed],[easing],[fn])
                //通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
                $(this).children('ul').slideToggle();
            });
        });
    </script>
</head>
<body>
<div style="background: skyblue;height: 900px">
    <div align="center" style="font-size: 50px;color: aqua;">
        多级目录手风琴式分类导航菜单</div>
    <div class="div">
        <div>
            <p>js特效</p>
            <ul>
                <li>Item 1-1</li>
                <li>Item 1-2</li>
                <li>Item 1-3</li>
            </ul>
        </div>
        <div>
            <p>前端模板</p>
            <ul>
                <li>Item 2-1</li>
                <li>Item 2-2</li>
                <li>Item 2-3</li>
            </ul>
        </div>
        <div>
            <p>网站源码</p>
            <ul>
                <li>Item 3-1</li>
                <li>Item 3-2</li>
                <li>Item 3-3</li>
            </ul>
        </div>
        <div>
            <p>视频教程</p>
            <ul>
                <li>Item 4-1</li>
                <li>Item 4-2</li>
                <li><p>List 4-1</p></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

menu.css代码：

@charset "utf-8";
*{
    margin:0px;
    padding:0px;
    font-size:18px;
    list-style:none;
    background:skyblue;
}
.div{
    padding: 3px;
    margin:50px auto;
    width:400px;
    border:1px solid #ccc;
    border-radius: 10px 10px 10px 10px;
    background-color: cadetblue;
}
.div p{
    height:50px;
    line-height:25px;
    background:lightblue;
    font-weight:bold;
    border-bottom:1px solid #ccc;
    padding: 5px 5px;
}
.div div ul{
    display:none;
}
.div li{
    height:50px;
    line-height:24px;
    text-indent:20px;
    border-bottom:1px solid #ccc;
}
.div p:hover{
    color: aqua;
    font-weight: bold;
}
.div li:hover{
    color: white;
    background: cadetblue;
}

效果：