菜单--垂直+折叠+小箭头

最新推荐文章于 2021-12-11 10:03:21 发布

erdouzhang

最新推荐文章于 2021-12-11 10:03:21 发布

阅读量6.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：菜单

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/55188831

菜单专栏收录该内容

0 篇文章

订阅专栏

这篇博客分享了如何使用HTML、CSS和JavaScript创建一个垂直折叠菜单，包括页面相关文件的引入，HTML结构，CSS样式以及JavaScript交互代码。提供了一个完整的代码示例链接和在线演示地址。

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

完整代码：https://github.com/erdouzhang/menu
在线演示：https://erdouzhang.github.io/menu/

这里写图片描述

1.页面引入相关文件

这里写图片描述

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="lib/jquery/jquery.js"></script>
<script src="js/main.js"></script>

2.写html、css、js

html代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>菜单--垂直收缩</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div>
        <div class="VerticalMenu">
            <div>
                <div><span>菜单一</span><i class="glyphicon glyphicon-chevron-right"></i></div>
                <div name="menu">
                    <div>
                        <div><span>选项一</span></div>
                    </div>
                    <div>
                        <div><span>选项一</span></div>
                    </div>
                    <div>
                        <div><span>选项一</span></div>
                    </div>
                </div>
            </div>
            <div>
                <div><span>菜单二</span><i class="glyphicon glyphicon-chevron-right"></i></div>
                <div name="menu">
                    <div>
                        <div><span>选项二</span></div>
                    </div>
                    <div>
                        <div><span>选项二</span></div>
                    </div>
                    <div>
                        <div><span>选项二</span></div>
                    </div>
                </div>
            </div>
            <div>
                <div><span>菜单三</span><i class="glyphicon glyphicon-chevron-right"></i></div>
                <div name="menu">
                    <div>
                        <div><span>选项三</span></div>
                    </div>
                    <div>
                        <div><span>选项三</span></div>
                    </div>
                    <div>
                        <div><span>选项三</span></div>
                    </div>
                </div>
            </div>
            <div>
                <div><span>菜单四</span><i class="glyphicon glyphicon-chevron-right"></i></div>
                <div name="menu">
                    <div>
                        <div><span>选项四</span></div>
                    </div>
                    <div>
                        <div><span>选项四</span></div>
                    </div>
                    <div>
                        <div><span>选项四</span></div>
                    </div>
                </div>
            </div>
            <div>
                <div><span>菜单五</span><i class="glyphicon glyphicon-chevron-right"></i></div>
                <div name="menu">
                    <div>
                        <div><span>选项五</span></div>
                    </div>
                    <div>
                        <div><span>选项五</span></div>
                    </div>
                    <div>
                        <div><span>选项五</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="lib/jquery/jquery.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

css代码:

.VerticalMenu{
    height:100%;
    width:200px;
    cursor:pointer;

    &>div{
        width:200px;
        float:left;
        &>div:first-child{
            text-align:center;
            height:40px;
            background-color:white;
            line-height:40px;
            padding-right:10px;
            border-bottom: 1px solid  #cdb0b0;
            transition:background-color 0.4s linear;
            &:hover{
                background-color:#33B9FF;
            }
            &>i:last-child{
                line-height:40px;
                float:right;
                transform:rotate(0deg);
                transition:transform 0.4s linear;
            }
        }
        &>div:last-child{
            width:200px;
            display:none;
            &>div{
                background-color:white;
                transition:background-color 0.1s linear;
                text-align:center;
                line-height:40px;
                border-bottom:1px solid #e6e6e6;
                &:hover{
                    background-color:#33B9FF!important;
                }
            }
        }
    }
    &>div:first-child{
        &>div:first-child{
            border-top-left-radius:5px;
            border-top-right-radius:5px;
        }
    }
    &>div:last-child{
        &>div:first-child{
            border-bottom-left-radius:5px;
            border-bottom-right-radius:5px;
        }
        &::after{
            display:block;
            clear:both;
        }
    }
}

js代码:

$(function(){  
    $(".VerticalMenu>div>div:first-child").click(function () {
        $menu = $(".VerticalMenu>div>div:first-child");
        // 右侧小箭头动画
        $($menu).not(this).children("i.glyphicon-chevron-right").css({ "transform": "rotate(0deg)", "color": "#000000" }).attr("leng", "")
        if ($(this).children("i.glyphicon-chevron-right").attr("leng") != "s") {
            $(this).children("i.glyphicon-chevron-right").attr("leng", "s")
            $(this).children("i.glyphicon-chevron-right").css({ "transform": "rotate(90deg)", "color": "#f9579e" })
        } else {
            $(this).children("i.glyphicon-chevron-right").attr("leng", "")
            $(this).children("i.glyphicon-chevron-right").css({ "transform": "rotate(0deg)", "color": "#000000" })
        }
        // 点击后子菜单展开其他菜单折叠
        $($menu).not($(this)).siblings("[name='menu']").stop().slideUp(400)
        $(this).siblings("[name='menu']").slideToggle(400)

    })
    // 菜单点击后背景颜色变化
    $VerticalMenu_scdj = null;
    $(".VerticalMenu>div>div:last-child>div").click(function () {
        $($VerticalMenu_scdj).css("background-color", "white");
        $(this).css("background-color","#33B9FF");
        $VerticalMenu_scdj=$(this)
    })
})