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

最新推荐文章于 2023-03-03 14:17:52 发布

erdouzhang

最新推荐文章于 2023-03-03 14:17:52 发布

阅读量6.3k

点赞数 2

分类专栏：菜单

本文链接：https://blog.csdn.net/erdouzhang/article/details/55188831

版权

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

摘要由CSDN通过智能技术生成

完整代码：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>