layui垂直导航右边文字变化

最新推荐文章于 2023-01-31 01:04:21 发布
最新推荐文章于 2023-01-31 01:04:21 发布
阅读量1.5k 收藏 4
点赞数
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guoyu1_/article/details/89884086
版权

1.当前点击跳转（js控制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="layui/layui.js"></script>
    <style>


    </style>
</head>
<body>
<div class="gy_wrap1">
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div title="菜单缩放" class="kit-side-fold"><i class="fa fa-navicon" aria-hidden="true"></i></div>
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li>
                    <a href="javascript:;"><img class="logo" src="images/logo.png" alt=""></a>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >首页</span></a>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >智能柜管理</span></a>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >单号管理</span></a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >订单管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"  onclick="selectItem(this)" id="sidebar_item_summary"><i class="fa fa-list fa-lg"></i> <span >订单管理</span></a></dd>
                        <dd><a href="javascript:;" onclick="selectItem(this)" id="sidebar_item_attachment"><i class="fa fa-clipboard fa-lg"></i> <span >新增订单</span></a></dd>
                        <dd><a href="javascript:;" onclick="selectItem(this)" id="sidebar_item_cert"><i class="fa fa-file-text fa-lg"></i> <span >订单列表打印</span></a></dd>
                        <dd><a href="javascript:;" onclick="selectItem(this)" id="sidebar_item_procedure"><i class="fa fa-file-text fa-lg"></i> <span >人工调度</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >地理围栏</span></a>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >报表统计</span></a>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >系统管理</span></a>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >日志信息</span></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">

    </div>
</div>
<div class="fourteen wide stretched column" id="mainpage">
    <iframe style="border: 0;width: 100%"></iframe>
</div>

<script type="text/javascript">
    function selectItem(obj) {
        $('.active.item').removeClass("active");
        obj.className += " active";
        if (obj.id == 'sidebar_item_summary') {//订单管理
            $('#mainpage iframe').css({ "margin-left": "220px","max-width":"1700px"});
            $('#mainpage iframe').attr('src',"OrderManagement.html");
        } else if (obj.id == 'sidebar_item_attachment') {//新增订单
            $('#mainpage iframe').attr('src',"NewOrder.html");

        }  else if (obj.id == 'sidebar_item_cert') {//订单列表打印
            $('#mainpage iframe').attr('src',"OrderListPrinting.html");
        } else if (obj.id == 'sidebar_item_procedure') {//人工调度
            $('#mainpage iframe').attr('src',"ManualScheduling.html");
        }
    }
    $(document).ready(function(){
        $('#wrapper').css("min-height",$(document.body).height()-96);
        selectItem($('#sidebar_item_summary')[0]);
    });
</script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
    var isShow = true;  //定义一个标志位
    $('.kit-side-fold').click(function(){
        //选择出所有的span，并判断是不是hidden
        $('.layui-nav-item span').each(function(){
            if($(this).is(':hidden')){
                $(this).show();
            }else{
                $(this).hide();
            }
        });
        //判断isshow的状态
        if(isShow){
            $('.layui-side.layui-bg-black').width(60); //设置宽度
            $('.kit-side-fold i').css('margin-right', '70%');  //修改图标的位置
            //将footer和body的宽度修改
            $('.layui-body').css('left', 60+'px');
            $('.layui-footer').css('left', 60+'px');
            //将二级导航栏隐藏
            $('dd span').each(function(){
                $(this).hide();
            });
            //修改标志位
            isShow =false;
        }else{
            $('.layui-side.layui-bg-black').width(200);
            $('.kit-side-fold i').css('margin-right', '10%');
            $('.layui-body').css('left', 200+'px');
            $('.layui-footer').css('left', 200+'px');
            $('dd span').each(function(){
                $(this).show();
            });
            isShow =true;
        }
    });

</script>
</body>
</html>

 2.指定路径页面跳转 （href控制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="layui/layui.js"></script>
</head>
<body style="background: #dcdcdc">
<div class="gy_wrap1">
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div title="菜单缩放" class="kit-side-fold"><i class="fa fa-navicon" aria-hidden="true"></i></div>
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li>
                    <a href="javascript:;"><img class="logo" src="images/logo.png" alt=""></a>
                </li>
                <li class="layui-nav-item">
                    <a class="title" href="HomePage.html"><span>首页</span></a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="title" href="javascript:;"><span>智能柜管理</span></a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a data-href="terminal.html" data-show><span>终端管理</span></a></dd>
                        <dd><a data-href="Terminalport.html"><span>终端格口型号管理</span></a></dd>
                        <dd><a data-href="TerminalAttributeport.html"><span >终端格口属性管理</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="title" href="javascript:;"><span>单号管理</span></a>
                </li>
                <li class="layui-nav-item">
                    <a class="title" href="javascript:;"><span>订单管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a data-href="OrderManagement.html"><span >订单管理</span></a></dd>
                        <dd><a data-href="NewOrder.html"><span >新增订单</span></a></dd>
                        <dd><a data-href="OrderListPrinting.html"><span >订单列表打印</span></a></dd>
                        <dd><a data-href="ManualScheduling.html"><span >人工调度</span></a></dd>
                        <dd><a data-href="Sendcode.html"><span >寄递码打印</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="title" href="javascript:;"><span >地理围栏</span></a>
                    <dl class="layui-nav-child">
                        <dd><a data-href="Daddresslist.html"> <span >围栏列表</span></a></dd>
                        <dd><a data-href="Daddressadd.html"><span >新增围栏</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="title" href="javascript:;"><span >报表统计</span></a>
                </li>
                <li class="layui-nav-item">
                    <a class="title" href="javascript:;"><span >系统管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a data-href="Xcollector.html"><span >揽收员管理</span></a></dd>
                        <dd><a data-href="Xrole.html"><span >角色管理</span></a></dd>
                        <dd><a data-href="Xmenu.html"><span >菜单管理</span></a></dd>
                        <dd><a data-href="Xuser.html"><span >用户管理</span></a></dd>
                        <dd><a data-href="Xshop.html"><span >店铺管理</span></a></dd>
                        <dd><a data-href="Xnum.html"><span >面单号管理</span></a></dd>
                        <dd><a data-href="Xlog.html"><span >系统日志</span></a></dd>
                        <dd><a data-href="Xdictionaries.html"><span >数据字典</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="title" href="javascript:;"><span >日志信息</span></a>
                </li>
            </ul>
        </div>
    </div>

</div>
<div class="fourteen wide stretched column" id="mainpage">
   <!--下面的src表示打开页面是右边默认显示页面-->
    <iframe style="border: 0;width: 100%;min-height: 1064px" src="terminal.html" frameborder="0" scrolling="auto"></iframe>
</div>

<script type="text/javascript"> 

    $(document).ready(function(){
        $('#wrapper').css("min-height",$(document.body).height()-96);
        selectItem($('#sidebar_item_terminal')[0]);
    });
</script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });

    // 列表收缩
    var navLi = $('.layui-nav-tree li');
    navLi.each(function(){
        var $dl = $(this).find('dl');
        var title = $(this).find('a.title');
        title.click(function(){
            title.css('color','#fff').parent().siblings().children().css('color','#bad3c7')
            $(this).parent().siblings().removeClass('layui-nav-itemed');
            if($dl.length == 0){
                // 不存在二级列表跳转
                var href = $(this).attr('data-href');
                if(href){
                    $('#mainpage iframe').attr('src',href);
                }
            }
        })
        var dlHref = $(this).find('dl a');
        dlHref.click(function(){
            // 列表跳转
            var href = $(this).attr('data-href');
            if(href){
                $('#mainpage iframe').attr('src',href);
            }
        })
    })


    var isShow = true;  //定义一个标志位
    $('.kit-side-fold').click(function(){
        //选择出所有的span，并判断是不是hidden
        $('.layui-nav-item span').each(function(){
            if($(this).is(':hidden')){
                $(this).show();
            }else{
                $(this).hide();
            }
        });
        //判断isshow的状态
        if(isShow){
            $('.layui-side.layui-bg-black').width(60); //设置宽度
            $('.kit-side-fold i').css('margin-right', '70%');  //修改图标的位置
            //将footer和body的宽度修改
            $('.layui-body').css('left', 60+'px');
            $('.layui-footer').css('left', 60+'px');
            //将二级导航栏隐藏
            $('dd span').each(function(){
                $(this).hide();
            });
            //修改标志位
            isShow =false;
        }else{
            $('.layui-side.layui-bg-black').width(200);
            $('.kit-side-fold i').css('margin-right', '10%');
            $('.layui-body').css('left', 200+'px');
            $('.layui-footer').css('left', 200+'px');
            $('dd span').each(function(){
                $(this).show();
            });
            isShow =true;
        }
    });

</script>
</body>
</html>

 

效果：

前端路上迷茫的小鲨鱼
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+jquery+CSS实现最简单的右侧导航栏效果
12-31
html+jquery+CSS实现最简单的右侧导航栏效果
纵向导航css设置主要属性,纵向导航菜单
weixin_36125599的博客
08-04 1039
纵向导航菜单也属于网站应用当中的一种重要形式，而纵向导航菜单指的是放置在网页左侧或者是右侧的从上至下排列的一种导航形式。如图：如图示代码结构：如图显示，这次的Xhtml代码横向代码有点不同，没有再使用ul以及li标签，然而，继续使用ul元素也可以实现纵向导航系统，但是能运用不同途径展现css设计的灵活与方便，以便于抛砖引玉，然后开拓更多的设计思想。采用的是div+h1+h2的形式。使用div标签设...
JAVA竖向导航栏,css实现横向导航和竖向导航栏的方法（代码）
weixin_35703897的博客
03-13 1600
本篇文章给大家带来的内容是关于css实现横向导航和竖向导航栏的方法(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、竖向导航ul{list-style-type:none;margin:0;padding:0;}a{display:block;background-color:green;color:white;width:80px;text-align:center;p...
Layui前端框架导航栏使用介绍
热门推荐
Tiger的专栏
05-12 3万+
LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互、从这里信手拈来。 LayUI优点 由于开发项目必须要在IE8上支持，选择LayUI前端UI框架，Layui兼容除IE6/7以外的全部浏览器，并且多数结构支
框架 - LayUI（一）
Qianmoer的博客
12-20 674
框架 - LayUI（一）
layui导航栏实现代码
08-30
本文将详细介绍layui导航栏的实现代码，包括水平导航菜单、垂直导航菜单和侧边固定导航菜单等。 一、水平导航菜单 水平导航菜单是layui框架中的一种常见的导航菜单样式。下面是实现水平导航菜单的代码： ``` ...
layui无限级导航菜单.zip
04-12
在“layui无限级导航菜单.zip”这个压缩包中，我们主要会接触到layui如何实现一个功能完善的无限级导航菜单。这个菜单通常用于Web应用程序的左侧栏，帮助用户便捷地浏览和访问多层级的页面结构。 首先，layui的导航...
layui多级导航嵌套.md
11-21
layui多级导航嵌套，tap切换内容，此代码主要以三级导航为例，有需求还可以自己进行嵌套，原理都一样。在代码中有说明。
关于layui导航栏不展示下拉列表的解决方法
10-16
在本文中，我们将探讨如何解决layui框架中导航栏不显示下拉列表的问题。layui是一款流行的前端UI框架，它提供了丰富的组件和模块，包括导航栏，用于构建美观且功能强大的网页应用。然而，在实际使用过程中，可能会...
layui实现三级导航菜单
10-16
在本文中，我们将深入探讨如何使用layui框架来实现一个功能丰富的三级导航菜单。layui是一款流行的前端组件库，它提供了丰富的UI元素和交互效果，适用于快速构建美观的后台管理系统。实现三级导航菜单对于组织复杂的...
html简单组件（一）：最简单的右侧导航栏
一方通行的博客
12-29 1万+
html+jquery+CSS实现最简单的右侧导航栏效果 一直在百度上没找到最简单实现右侧导航栏效果的代码，索性自己做一个最简单的demo 最简单的效果图 废话不多说，直接上代码 html+jquery代码 html主代码 <div class="mobile-nav"> <ul> <li class="nav_menu"><a onclick="change(1)">首页</a></li> <li cla
HTML5+CSS3:简易的竖直导航栏
师范大学生的博客
10-15 7590
  记录一下网站中常见的竖直导航栏怎么做。开发软件是Dreamweaver2019。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>csdn_nav_test1</title> <style type="text/css"> </sty...
layui中导航元素的简单使用
ToBeXX的博客
09-26 8150
整体效果图 所需界面 main.html界面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理</title> <link rel="stylesheet" href="layui/css/...
html 隐藏_HTML实战篇：纯css制作二级横向以及竖向菜单导航
weixin_39904612的博客
11-29 1881
​本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作；菜单导航是网站建设中最常用的一块了，基本每个网站内都会有个导航菜单，用鼠标划过还可以有下拉子菜单。由上图我们可以看出，该图包含一个横向导航条，然后鼠标经过横向导航条之后，子导航显示出来。1)制作页面所用知识点我们这里主要用到的知识点就是列表标签(ul、dl)的使用、浮动(float)的使用、绝对定位(absolu...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
weixin_29051811的博客
05-31 5779
原标题：HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单 今天这篇文章我们来说一下css的浮动属性(float)，给块状元素添加float属性可以使其转变为行内元素，也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。(1)float使用语法css的float主要有3个属性值none、left、right，默认为none；具体的使用如下所...
Layui实现点击文字、缩略图查看图片功能
qq_42434923的博客
01-15 4409
刚完成一个客户需求，同一个页面上要有点击缩略图查看大图功能，也有点击图片名称查看原图的功能。 点击缩略图查看大图的功能 点击缩略图查看大图的功能实现用的是layui开发文档内的layer.photos-相册层。 官方开发文档里photos支持传入json和直接读取页面图片两种方式。 下面是官方开发文档的截图，官方开发文档链接：https://www.layui.com/doc/m...
layui框架学习（4：导航）
gc_2299的博客
01-31 2686
学习并记录layui框架中页面元素的导航相关内容。
LayUI-----动态选项卡
qq_62331938的博客
07-20 3885
上次我们分享了LayUI的动态树，既侧边菜单。做了这个功能总要有用吧，这次分享的内容就是基于上篇分享的内容进行完善。在点击侧边菜单时，新增选项卡、点击已有选项卡的菜单项更改选中。.........
Layui-导航
chen2745213271的博客
12-09 5585
这次介绍layui里面的导航栏的样式，首先导航栏的功能依附于element模块，所以想要使用layui的导航栏功能就需要启用该模块，其次是layui的css样式，有了这两样layui里的导航栏就可以正常的使用了，下面我将介绍如何启用模块和css样式的各种用法 首先启用模块，如下图 下面就是HTML的部分了 首先是水平导航栏，在外层使用ul标签并使用class名layui-nav作为导航栏的容器，接着下面的li子标签需要使用class名layui-nav-item，其次layu...
layui修改垂直导航宽度
最新发布
04-01
要修改layui垂直导航的宽度，可以通过修改CSS样式来实现。可以在页面中添加以下CSS代码： ```css .layui-side-scroll { width: 200px; /*修改宽度*/ } ``` 将上面的200px修改为你想要的宽度即可。如果需要修改...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值