Layui后台管理系统布局模板【菜单展开/收起、全屏、个人信息、更多】

标签：style easy Layui 全屏 querySelector layui document 模板 left
一、前言

适合初学开发者和学生使用，可做静态网页或者后台管理系统，支持基本功能。除引用layui外无任何多余依赖。
layui依赖：https://layui.dev/
如下图直接下载，引入项目中！
在这里插入图片描述
二、源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>EASY后台</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<style>
    /* 顶部样式 */
    .layui-header {
        padding: 0 20px;
    }

    .layui-logo {
        line-height: 60px;
        text-align: center;
    }

    .easy-logo-img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
        border-style: none;
    }

    .easy-logo-title {
        font-size: 20px;
        font-weight: bold;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        position: relative;
    }

    /* 侧边菜单样式 */
    .layui-side {
        width: 200px;
    }

    .layui-nav-tree .layui-nav-item a {
        overflow: visible;
    }

    /* 主体样式 */
    .layui-tab {
        margin: 0;
    }

    .layui-tab-content {
        padding: 0;
    }

    /* 底部样式 */
	.layui-footer-body {
        position: fixed;
        right: 20px;
    }
</style>
<div class="layui-layout layui-layout-admin">
    <!-- 顶部区域 -->
    <div class="layui-header">
        <div class="layui-logo">
            <img class="easy-logo-img" src="./static/images/logo.png">
            <span class="easy-logo-title">后台管理系统</span>
        </div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="spreadMenu">
                <i class="layui-icon layui-icon-shrink-right" id="spreadMenu"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="fullScreen">
                <i class="layui-icon layui-icon-screen-full" id="fullScreen"></i>
            </li>
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="./static/images/logo.png" class="layui-nav-img">张三
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" lay-header-event="updateInfo">个人资料</a></dd>
                    <dd><a href="javascript:;" lay-header-event="updatePwd">修改密码</a></dd>
                    <dd><a href="javascript:;" lay-header-event="logout">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="rightMore" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <!-- 左侧导航区域 -->
    <div class="layui-side layui-tab">
        <ul class="layui-nav layui-nav-tree layui-side layui-nav-side" lay-filter="easy-menu">
            <li class="layui-nav-item easy-menu-item">
                <a href="javascript:;" data-url="welcome.html" data-title="首页">
                    <i class="layui-icon layui-icon-home"></i>
                    <span class="easy-menu-title">首页</span>
                </a>
            </li>
            <li class="layui-nav-item easy-menu-item">
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-username"></i>
                    <span class="easy-menu-title">系统管理</span>
                </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="javascript:;" data-url="dept.html" data-title="部门管理">
                            部门管理
                        </a>
                    </dd>
                    <dd>
                        <a href="javascript:;" data-url="user.html" data-title="用户管理">
                            用户管理
                        </a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>

    <!-- 内容主体区域 -->
    <div class="layui-body">
        <div class="layui-tab" lay-filter="easy-body" lay-allowClose="true">
            <ul class="layui-tab-title"></ul>

            <div class="layui-tab-content"></div>
        </div>
    </div>

    <!-- 底部区域 -->
    <div class="layui-footer">
        <span class="layui-footer-body">
            © 2025 xxx 版权所有
        </span>
    </div>
</div>

<script src="./static/layui/layui.js"></script>
<script>
    layui.use(['element', 'layer', 'util'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var util = layui.util;

        // 监听菜单点击
        element.on('nav(easy-menu)', function (elem) {
            // 1.菜单样式展开逻辑
            var spreadBtn = document.querySelector('#spreadMenu');
            if (spreadBtn.classList.contains('layui-icon-spread-left')) {
                // 图标变化
                spreadBtn.classList.remove('layui-icon-spread-left');
                spreadBtn.classList.add('layui-icon-shrink-right');

                // 宽度变化
                document.querySelector('.layui-logo').style.width = '200px';
                document.querySelector('.layui-side').style.width = '200px';
                document.querySelector('.layui-nav.layui-nav-tree').style.width = '200px';
                document.querySelector('.layui-body').style.left = '200px';
                document.querySelector('.layui-footer').style.left = '200px';
                document.querySelector('.layui-layout-left').style.left = '200px';

                // 菜单文字显示
                document.querySelector('.easy-logo-title').style.display = '';
                document.querySelectorAll('.easy-menu-title').forEach(e => e.style.display = '');
                document.querySelectorAll('.easy-menu-item a .layui-icon-down').forEach(e => e.style.display = '');
            }

            // 2.页面打开逻辑
            var url = elem.attr('data-url');
            var title = elem.attr('data-title');
            if (!url) {
                return;
            }

            // 判断Tab是否已添加
            if ($(".layui-tab-title li[lay-id='" + url + "']").length <= 0) {
                tabEvent.add(url, title);
            }

            // 切换页面
            tabEvent.change(url);
        });

        // tab事件
        var tabEvent = {
            // 新打开Tab
            add: function (url, name) {
                element.tabAdd('easy-body', {
                    title: name,
                    content: '<iframe src="' + url + '" scrolling="auto" frameborder="0"  style="width:100%;height:100%;"></iframe>',
                    id: url
                })
                FrameWH();
            },
            // 切换Tab页
            change: function (url) {
                element.tabChange('easy-body', url);
            },
            // 删除指定Tab
            delete: function (url) {
                element.tabDelete("easy-body", url);
            },
            // 删除所有Tab
            deleteAll: function (urls) {
                $.each(url, function (i, item) {
                    element.tabDelete("easy-body", item);
                })
            }
        };

        // 打开首页
        tabEvent.add('welcome.html', '首页');
        tabEvent.change('welcome.html');

        // 重置iframe窗口大小
        $(window).resize(function () {
            FrameWH();
        })

        // 计算frame高度
        function FrameWH() {
            var h = $(window).height() - 60 - 40 - 44;
            $("iframe").css("height", h + "px");
        }

        // 头部事件
        util.event('lay-header-event', {
            // 菜单展开收起
            spreadMenu: function () {
                var spreadBtn = document.querySelector('#spreadMenu');
                // 是否收起状态?是->展开，否->收起
                if (spreadBtn.classList.contains('layui-icon-spread-left')) {
                    // 图标变化
                    spreadBtn.classList.remove('layui-icon-spread-left');
                    spreadBtn.classList.add('layui-icon-shrink-right');

                    // 宽度变化
                    document.querySelector('.layui-logo').style.width = '200px';
                    document.querySelector('.layui-side').style.width = '200px';
                    document.querySelector('.layui-nav.layui-nav-tree').style.width = '200px';
                    document.querySelector('.layui-body').style.left = '200px';
                    document.querySelector('.layui-footer').style.left = '200px';
                    document.querySelector('.layui-layout-left').style.left = '200px';

                    // 菜单文字图标显示
                    document.querySelector('.easy-logo-title').style.display = '';
                    document.querySelectorAll('.easy-menu-title').forEach(e => e.style.display = '');
                    document.querySelectorAll('.easy-menu-item a .layui-icon-down').forEach(e => e.style.display = '');
                } else {
                    // 图标变化
                    spreadBtn.classList.remove('layui-icon-shrink-right');
                    spreadBtn.classList.add('layui-icon-spread-left');

                    // 宽度变化
                    document.querySelector('.layui-logo').style.width = '50px';
                    document.querySelector('.layui-side').style.width = '50px';
                    document.querySelector('.layui-nav.layui-nav-tree').style.width = '50px';
                    document.querySelector('.layui-body').style.left = '50px';
                    document.querySelector('.layui-footer').style.left = '50px';
                    document.querySelector('.layui-layout-left').style.left = '50px';

                    // 菜单文字图标隐藏
                    document.querySelector('.easy-logo-title').style.display = 'none';
                    document.querySelectorAll('.easy-menu-title').forEach(e => e.style.display = 'none');
                    document.querySelectorAll('.easy-menu-item a .layui-icon-down').forEach(e => e.style.display = 'none');
                    document.querySelectorAll('.easy-menu-item.layui-nav-itemed').forEach(e => e.classList.remove('layui-nav-itemed'));
                }
            },
            // 全屏
            fullScreen: function () {
                var docE = document.documentElement;
                if (!document.fullscreenElement) {
                    if (docE.requestFullscreen) {
                        docE.requestFullscreen();
                    } else if (docE.mozRequestFullScreen) {
                        docE.mozRequestFullScreen();
                    } else if (docE.webkitRequestFullScreen) {
                        docE.webkitRequestFullscreen();
                    }

                    var fullScreenBtn = document.querySelector('#fullScreen');
                    fullScreenBtn.classList.remove('layui-icon-screen-full');
                    fullScreenBtn.classList.add('layui-icon-screen-restore');
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    }

                    var fullScreenBtn = document.querySelector('#fullScreen');
                    fullScreenBtn.classList.remove('layui-icon-screen-restore');
                    fullScreenBtn.classList.add('layui-icon-screen-full');
                }
            },
            // 右侧菜单事件
            rightMore: function () {
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            },
            // 修改个人信息
            updateInfo: function () {
                // todo
                console.log("修改个人信息");
            },
            // 修改密码
            updatePwd: function () {
                // todo
                console.log("修改密码");
            },
            // 退出登录
            logout: function () {
                // todo
                console.log("退出登录");
            }
        });
    });
</script>
</body>
</html>