layui 一个含垂直导航栏的frame例子

最新推荐文章于 2023-07-14 22:38:39 发布
最新推荐文章于 2023-07-14 22:38:39 发布
阅读量2.1k 收藏
点赞数
分类专栏： 前端 layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qr457535344/article/details/102897822
版权 
效果

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>frame</title>
    <link rel="stylesheet" href="css/layui.css"  media="all">
    <style type="text/css">
    .layui-btn+.layui-btn {
        margin-left: 0px;
    }
    </style>
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">XX平台</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">项目分析</a></li>
            <li class="layui-nav-item"><a href="">菜单二</a></li>
            <li class="layui-nav-item"><a href="">菜单三</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">菜单四</a>
                <dl class="layui-nav-child">
                    <dd><a href="">管理1</a></dd>
                    <dd><a href="">管理2</a></dd>
                    <dd><a href="">管理3</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    用户CAN
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">管理1</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a lay-href="createProject">清单1</a></dd>
                        <dd><a href="javascript:;">清单2</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-tree">
                    <a href="javascript:;">管理2</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">清单1</a></dd>
                        <dd><a href="javascript:;">清单2</a></dd>
                        <dd><a href="javascript:;">清单3</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-tree">
                    <a href="javascript:;">管理3</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">清单1</a></dd>
                        <dd><a href="javascript:;">清单2</a></dd>
                        <dd><a href="javascript:;">清单3</a></dd>
                        <dd><a href="javascript:;">清单4</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-tree">
                    <a href="javascript:;">管理4</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">清单1</a></dd>
                        <dd><a href="javascript:;">清单2</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">



        </div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © our.com - 底部固定区域
    </div>
</div>
<script src="js/layui.all.js" charset="utf-8"></script>
<script>

</script>
</body>
</html>
需要的资源文件layui.css和layui.all.js可在官网下载https://www.layui.com/
qr457535344
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layui 左侧三级菜单栏
dingtuo8679的博客
04-11 891
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <tit...
layui管理后台模板
weixin_52236586的博客
05-21 812
layui搭建的后台模板~
layui搭建后台管理系统
weixin_45833112的博客
05-29 5451
好文章需要耐心阅读…茶凡—Matrix 首先想要使用layui搭建一个这样简洁通用的后台管理模板，需要理解后台管理系统的结构。大致可以分为三部分。 🍕header 这里的header 不只是最上面的部分，可以理解为点击可以跳转路径的地方，例如右边的菜单栏和右上角的用户名按钮。 🍕content 这里就是我们点击按钮显示在中间的页面内容，这个content 页面通常就是根据我们自己业务来定义的，理论可以定义N个。 🍕footer 这里的footer 其实对于后台管理系统来说可有可无，不过有的喜欢把左边菜单
layui搭建管理后台系统
weixin_43811651的博客
07-23 1万+
先上最终效果图： 点击左侧的菜单树可以显示在导航栏中 下面是具体步骤： ①下载layui https://www.layui.com/ ②项目结构介绍 html：存放静态界面 img：存放图片 json：模拟请求数据，展示用 layui：步骤一下载的文件 ③源码 index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> ...
使用layui框架迅速搭建后台管理页面
热门推荐
戴翔的技术博客
09-01 1万+
写在前面 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信...
layui导航栏实现代码
08-30
在上面的代码中，我们使用了layui提供的nav-tree组件，定义了一个垂直导航菜单。每个菜单项都可以包含一个链接和一个下拉菜单。我们可以通过layui提供的样式来美化我们的菜单。 三、侧边固定导航菜单 侧边固定导航...
layui禁用侧边导航栏点击事件的解决方法
10-16
在使用layui框架构建Web应用时，侧边导航栏是一个常用的功能，它可以帮助用户方便地浏览和切换不同的功能模块。然而，有时我们可能需要禁用侧边导航栏的点击事件，例如在某些特定条件下不希望导航链接触发跳转或加载...
Qt导航栏Demo之侧边垂直菜单
02-17
在许多应用程序中，垂直导航栏作为主菜单布局，能有效地节省空间并提供更好的用户体验。本示例将介绍如何利用QMenu、QDialog、事件过滤器以及QPushButton等组件实现这一功能。 首先，我们需要理解QMenu类。QMenu是...
Layui 导航默认展开和菜单栏选中高亮设置的方法
10-16
- 在Layui中，通常会有一个初始化或事件绑定的JS文件，比如 `layui.use(['element'], function(){...})`，在这个回调函数中，你可以使用 `layui.element` 的方法来操作导航栏。 - 例如，可以通过监听 `layui.nav` ...
关于layui导航栏不展示下拉列表的解决方法
10-16
在本文中，我们将探讨如何解决layui框架中导航栏不显示下拉列表的问题。layui是一款流行的前端UI框架，它提供了丰富的组件和模块，包括导航栏，用于构建美观且功能强大的网页应用。然而，在实际使用过程中，可能会...
LayUI后端布局实现导航栏点击主体内容改变
fengbiao_z的博客
03-03 2657
<div class="layui-body"> <!-- 内容主体区域,改为<iframe>标签即可 --> <iframe src="" name="middle" width="100%" height="100%" frameborder="0"></iframe> </div> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav la
三级菜单导航以及其中a标签的嵌套问题
weixin_48129874的博客
09-04 545
三级菜单导航以及其中a标签的嵌套问题 我原先的导航是二级导航。因项目需要，现在要在右侧导航栏添加三级导航，查找了很多资料，都是用div里面ul li写的示例，而我的导航里面需要a标签嵌套文字实现跳转功能。所以我在需要三级导航的a标签里面再次嵌套了一个a标签。如下示例： <li class="layui-nav-item" pc> <a href="javascript:;"> <i class="layui-icon"><cite&g
[Layui]后台大布局tab风格动态菜单-无限层
德仔
03-16 1066
后台大布局tab风格动态菜单-无限层 结合前2篇，进行JS改造即可 * *name: 名称 *url: iframe地址 *icon：图标 *childMenus：子菜单 *注意：该菜单支持无限级的菜单，如果用的级别较多请自行修改导航的样式，不然会引起位置错乱 */ [ { "name": "文档", "url": "pages/wendang.html", "icon": "layui-icon-snowflake", "ch
js layui跳转页面_js相关：layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法...
weixin_34463228的博客
01-27 1285
js相关：layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法发布于 2020-7-17|复制链接分享一篇关于layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小妖过来看看吧其实这篇文章是给自己看的，以后忘记怎么做回来还能看一下点击左侧菜单栏只刷新局部，局部就用iframe。首先先建layout页，建左侧菜单栏，然后下面的@R...
layui-导航页面-带左侧栏伸缩和tab嵌入iframe自适应的前端代码
GinChou的萌新博客
05-26 2596
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8" name="referrer" content="no-referrer"> <meta http-equiv="Content-Type" name="viewport" content="width=device-width, initia.
2.用layui搭建简单后台页面
weixin_43324141的博客
04-19 1146
HTML部分（一些具体的看官方文档）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/layui.css"&g...
前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）
最新发布
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-14 5272
利用Layui搭建一个用户的管理系统实例完成CRUD操作，十分钟完成案例还不点进来看看嘛!!
LayUI框架的使用步骤&&实现登录页面
qq_63492318的博客
07-08 1万+
LayUI的使用、自定义模块、实现登录页面...
从简到繁——SSM个人博客搭建完全记录【2】后台管理系统页面设计——使用Layui
van_brilliant的博客
04-12 8025
前言  搭建完生产环境，接下来进行后台管理系统页面的设计。目前自己的学习重点和知识领域主要还是在后端，但是前端有很多框架，或者说很多适合后端程序员使用的框架，比如easyUI、Boostrap等，能够在前端知识有限的情况下完成一些简单的开发。这里我选择了Layui进行后台管理页面的编写。Layui提供了很多组件拿来就用，风格也非常简洁，且文档友好，很适合快速开发。这是官网提供的文档：layui开发...
下拉框是一个选择垂直的导航栏的html代码
06-09
以下是一个用下拉框实现选择垂直导航栏的 HTML 代码示例： ```html ;"> 请选择一个导航栏 关于我们 产品与服务 博客 联系我们 ``` 以上代码中，我们使用了一个 `<select>` 标签来实现下拉框，通过添加 `...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值