HTML+CSS+JS无组件引入实现类后台管理页面结构【菜单栏+标签状态栏】

提示：本例为页面结构基本学习案例，实际项目中多采用组件库快速搭建页面结构

---

视频预览

本案例页面结构参考维普管理系统页面纯手写HTML+CSS+JS实现，无组件引入仅供学习参考

menu

---

一、页面初解及实现功能

页面可初分为三个部分，1.左侧菜单栏，2.右侧标签状态栏（上），3.右侧内容区域（下）

1.菜单栏

菜单栏初分为一级、二级菜单，该部分均通过JS动态渲染HTML结构。具体实现功能：点击一级菜单展示当前一级菜单下的二级菜单目录，同时关闭其他展示的二级菜单目录，再次点击已展示的一级菜单收起；点击二级菜单时，右侧标签状态栏依次添加当前点击的二级标签同时内容区域展示当前相关部分内容（内容区域本案例未做具体实现，可自行完善）

2.右侧标签状态栏（上）

动态添加当前点击的二级菜单标签，可点击关闭当前标签页，其他标签页及所有标签页，状态栏超过页面宽度时自动隐藏超出部分，可点击左右箭头滚动展示。

3.右侧内容区域（下）

该部分通过JS动态切换盒子以实现结构或内容的更替与菜单所示内容对应

本案例中仅预留内容部分位置未进行具体实现，可自行布局设计补充完善。

二、代码部分

代码部分仅注释了部分代码，若有疑问欢迎评论区留言。

1.HTML

<div class="menu">
        <div class="logo_box">后台管理系统</div>
        <ul class="menu_list">
            <div class="lineIndicator_bar"></div>
        </ul>
    </div>
    <div class="all_cont">
        <div class="header">
            <div class="account">
                <div class="user">用户名</div>
            </div>
            <div class="navigate">
                <span class="slider_left">
                    <svg t="1715750948172" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1202" width="15" height="15">
                        <path
                            d="M487.253333 535.893333l386.133334-386.133333c13.226667-13.226667 13.226667-34.986667 0-48.213333-13.226667-13.226667-34.986667-13.226667-48.213334 0l-386.133333 386.133333c-13.226667 13.226667-13.226667 34.986667 0 48.213333 13.226667 13.226667 34.986667 13.226667 48.213333 0z"
                            fill="#bfbfbf" p-id="1203"></path>
                        <path
                            d="M873.386667 873.813333l-386.133334-386.133333c-13.226667-13.226667-34.986667-13.226667-48.213333 0-13.226667 13.226667-13.226667 34.986667 0 48.213333l386.133333 386.133334c13.226667 13.226667 34.986667 13.226667 48.213334 0 13.226667-13.226667 13.226667-34.986667 0-48.213334z"
                            fill="#bfbfbf" p-id="1204"></path>
                        <path
                            d="M218.88 536.32l386.133333-386.133333c13.226667-13.226667 13.226667-34.986667 0-48.213334-13.226667-13.226667-34.986667-13.226667-48.213333 0L170.666667 488.106667c-13.226667 13.226667-13.226667 34.986667 0 48.213333 13.226667 13.653333 34.986667 13.653333 48.213333 0z"
                            fill="#bfbfbf" p-id="1205"></path>
                        <path
                            d="M605.013333 874.24l-386.133333-386.133333c-13.226667-13.226667-34.986667-13.226667-48.213333 0-13.226667 13.226667-13.226667 34.986667 0 48.213333l386.133333 386.133333c13.226667 13.226667 34.986667 13.226667 48.213333 0 13.226667-13.226667 13.226667-34.56 0-48.213333z"
                            fill="#bfbfbf" p-id="1206"></path>
                    </svg>
                </span>
                <div>
                    <span><svg t="1715671029966" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5916" width="13" height="13">
                            <path
                                d="M647.1 665.11c10.88 12.86 9.28 32.1-3.58 42.98-37.31 31.57-78.05 47.88-121.36 47.88s-84.05-16.31-121.38-47.88a30.513 30.513 0 0 1-10.3-28.72 30.497 30.497 0 0 1 19.72-23.28 30.499 30.499 0 0 1 30.02 5.44c26.69 22.63 53.71 33.44 81.93 33.44 28.2 0 55.22-10.82 81.93-33.44a30.515 30.515 0 0 1 22.24-7.12c8.08 0.67 15.55 4.52 20.78 10.7z"
                                p-id="5917" fill="#8a8a8a"></path>
                            <path
                                d="M934.19 386.74L553.05 79.27c-23.93-19.41-58.19-19.41-82.12 0L89.8 386.72c-15.86 12.81-25.09 32.27-25.09 52.86l0.1 3.82c1.67 30.37 23.08 55.38 51.38 61.91l2.34 0.47 0.02 344.53 0.1 4.8c2.91 58.61 49.81 104.18 106.84 104.18H798.5l4.72-0.1 4.51-0.35c55.32-5.14 97.71-51.95 97.71-108.53l-0.02-344.53 3.54-0.77a66.073 66.073 0 0 0 36.03-23.6c22.69-29.2 17.85-71.57-10.8-94.67zM897.09 443c-1.08 1.36-2.68 2.15-4.39 2.15h-17.93c-16.71 0-30.25 13.83-30.25 30.9v374.87c0 25.23-19.38 46.03-43.94 47.29l-3.17 0.08H225.82c-24.7 0-45.05-19.82-46.29-44.93l-0.06-3.23v-374.1c0-17.06-13.54-30.9-30.25-30.88h-17.93c-3.09 0-5.59-2.56-5.59-5.73 0-1.73 0.77-3.37 2.11-4.47l380.74-308a5.493 5.493 0 0 1 6.91 0l380.72 308.02a5.821 5.821 0 0 1 0.91 8.03z"
                                p-id="5918" fill="#8a8a8a"></path>
                        </svg></span>
                    <span>首页</span>
                </div>
                <ul class="nav_list"></ul>
                <span class="slider_right">
                    <svg t="1715750916984" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="845" width="15" height="15">
                        <path
                            d="M556.8 535.893333L170.666667 149.76c-13.226667-13.226667-13.226667-34.986667 0-48.213333 13.226667-13.226667 34.986667-13.226667 48.213333 0l386.133333 386.133333c13.226667 13.226667 13.226