在项目开发的时候,需要后台的系统好看点,左边的导航需要设计为多级的,而且要点击当前的链接页面,刷新后要实现选中状态

学习源头:http://www.layui.com/doc/element/nav.html

使用layui的导航 面包屑

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link href="{{ asset('css/css.css') }}" rel="stylesheet">

    <link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

    <script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>

    <script src="{{ asset('bootstrap/js/bootstrap.min.js') }}"></script>

    <link href="{{ asset('layui/css/layui.css') }}" rel="stylesheet">

    <script src="{{asset('layui/layui.js')}}"></script>

    {{--<link href="{{ asset('css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet">--}}

    {{--<script src="{{ asset('js/bootstrap-datetimepicker.js') }}"></script>--}}

    {{--<script src="{{ asset('js/bootstrap-datetimepicker.zh-CN.js') }}"></script>--}}

    {{--<!-- multiselect: -->--}}

    {{--<script type="text/javascript" src="{{ asset('js/bootstrap-multiselect.js') }}"></script>--}}

    {{--<link rel="stylesheet" href="{{ asset('css/bootstrap-multiselect.css') }}" type="text/css"/>--}}

    <script src="{{asset('layer/layer.js')}}"></script>

    @yield('link')

    <script type="text/javascript">

        $('.dropdown-toggle').dropdown()

    </script>

    <style>

        .menu { padding:0; margin:0; list-style-type:none;}

        .menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }

        .menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}

        .cur{ background:RGB(0,150,136); font-weight:bold;}

    </style>

</head>

<body>

<div class="container-fluid warp" style="margin: 0;padding: 0;">

    <nav class="navbar navbar-default">

        <div class="container-fluid">

            <div class="navbar-header">

                <span class=" logo_txt" >AI</span>

            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse">

                <ul class=" nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">

                    <li ><a  ><span class="glyphicon glyphicon glyphicon-user"></span> 您好,{{\Illuminate\Support\Facades\Session::get('name')}}</a></span></li>

                    <li ><a  href="/modifyPwd"><span class="glyphicon glyphicon glyphicon-cog"></span> 账号设置</a></li>

                    <li ><a  href="/logout"><span class="glyphicon glyphicon-log-out"></span> 退出</a></li>

                </ul>

            </div>

        </div>

    </nav>

    <div class="pull-left left_menu">

        {{--<ul class=" nav-tabs nav-stacked nav-ai">--}}

            {{--@foreach(\ai\Http\Controllers\Index::menuTree() as $k => $menu)--}}

                    {{--@if(!isset($menu['subcat']))--}}

                        {{--<li role="presentation" class=" normal" id="{{$menu['id']}}"><a  href="{{$menu['href']}}">{{$menu['name']}}</a></li>--}}

                    {{--@elseif(isset($menu['subcat']))--}}

                        {{--<li role="presentation" class="dropdown normal " id="{{$menu['id']}}">--}}

                            {{--<a class="dropdown-toggle" data-toggle="dropdown"  href="{{$menu['href']}}" role="button" aria-haspopup="true" aria-expanded="false">--}}

                                {{--{{$menu['name']}}<span class="caret"></span>--}}

                            {{--</a>--}}

                            {{--<ul class="dropdown-menu dropdown-menu-small ">--}}

                                {{--@foreach($menu['subcat'] as $son)--}}

                                    {{--<li role="presentation"><a class="bg-warning" href="{{$son['href']}}">{{$son['name']}}</a></li>--}}

                                {{--@endforeach--}}

                            {{--</ul>--}}

                        {{--</li>--}}

                    {{--@endif--}}

            {{--@endforeach--}}

        {{--</ul>--}}

        <ul class="layui-nav layui-nav-tree layui-bg-blue " lay-filter="test" style="width: 165px;" lay-shrink="all" id="menu">

            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->

            @foreach(\ai\Http\Controllers\Index::menuTree() as $k => $menu)

                @if(!isset($menu['subcat']))

                    <li class="layui-nav-item"><a  href="{{$menu['href']}}">{{$menu['name']}}</a></li>

                @elseif(isset($menu['subcat']))

                    <li class="layui-nav-item" id="{{$menu['id']}}">

                        <a href="javascript:;">{{$menu['name']}}</a>

                        <dl class="layui-nav-child">

                            @foreach($menu['subcat'] as $son)

                                <dd><a href="{{$son['href']}}">{{$son['name']}}</a></dd>

                            @endforeach

                        </dl>

                    </li>

                @endif

            @endforeach

        </ul>

    </div>

    <div class="pull-left right_content  " >

                @yield('content')

    </div>

    <div class="clearfix"></div>

    <div class="shx"></div>

    <script>

        //注意：导航 依赖 element 模块，否则无法进行功能性操作

        layui.use('element', function(){

            var element = layui.element;

            element.on('tab(demo)', function(data){

                var src=$(".layui-tab-item.layui-show").find("iframe").attr("src");

                $(".layui-tab-item.layui-show").find("iframe").attr("src",src);

            });

            //…

        });

    </script>

    <script type="text/javascript"> //设置选中链接高亮显示

        var urlstr = location.href;

        console.log(urlstr);

        //alert((urlstr + '/').indexOf($(this).attr('href')));

        var urlstatus=false;

        $("#menu a").each(function () {

            if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {

                console.log($(this));

                $(this).addClass('cur'); urlstatus = true;

                $(this).parent().parent().parent().addClass('layui-nav-itemed');

            } else {

                $(this).removeClass('cur');

            }

        });

        if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }

    </script>

    <script type="text/javascript">

//        //禁止滚动条

//        $(document.body).css({

//            "overflow-x":"hidden",

//            "overflow-y":"hidden"

//        });

//        //启用滚动条

//        $(document.body).css({

//            "overflow-x":"auto",

//            "overflow-y":"auto"

//        });

//        $(document).ready(function(){

//            $(document).off('click.bs.dropdown.data-api');

//        });

//        $(document).ready(function(){

//            dropdownOpen();//调用

//        });

//        /**

//         * 鼠标划过就展开子菜单，免得需要点击才能展开

//         */

//        function dropdownOpen() {

//

//            var $dropdownLi = $('li.dropdown');

//

//            $dropdownLi.mouseover(function() {

//                $(this).addClass('open');

//            }).mouseout(function() {

//                $(this).removeClass('open');

//            });

//        }

    </script>

</div>

</body>

</html>

layui导航的使用的更多相关文章

  1. layui导航栏和layui.layui.msg问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. layui导航

    关于导航 首先看一下官网的样式: <!DOCTYPE html><html><head> <meta charset="utf-8" /& ...

  3. Layui导航、面包屑

    物不在多,有用则精! 学习使用链接 导航:导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在.面包屑结构简单,支持自定义分隔符.千万不要忘了加载 elem ...

  4. [转]layui点击左侧导航栏，实现不刷新整个页面，只刷新局部

    本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...

  5. 监听导航新增Tab选项卡-layui

    1. 加载element模块 2. 监听导航事件 3. 创建选项卡 //加载element模块 layui.use('element', function () { element = layui.e ...

  6. layui禁止某些导航菜单展开

    官网上查得监听导航菜单的点击 当点击导航父级菜单和二级菜单时触发,回调函数返回所点击的菜单DOM对象: element.on('nav(filter)', function(elem){ consol ...

  7. layui 3种导航栏

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html ...

  8. layui禁用侧边导航栏点击事件

    layui是一款优秀的前端模块化css框架,作者是贤心 —— 国内的一位前端大佬. 我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然, ...

  9. layui水平导航条三级

    需求 需要做一个顶部的水平导航条,有三级,展开的时候二级和三级一起展开,结果如图: 效果 一级菜单 二级标题   三级菜单 三级菜单 二级标题   三级菜单 三级菜单 一级菜单 二级标题   三级菜单 ...

随机推荐

  1. 编写程序时候莫名出现<property name="dialect">org.hibernate.dialect.FirebirdDialect</property>

    把<propertyname="dialect">org.hibernate.dialect.FirebirdDialect</property> 语句去掉 ...

  2. POST方式跨域上传文件

    JSONP请求有限制: 第一,不能跳出两层, 第二,不支持POST. 往往解决跨域POST请求的方案是个"古老"方法, 请求同域下的iframe. 服务器端:  需要附加头信息: ...

  3. Mac OS X下实现结束占用某特定端口的进程

    ---恢复内容开始--- 1.打开终端,使用如下命令: lsof -i:**** 以上命令中,****代表端口号,我们首先要知道哪个(或哪些)进程占用该端口,比如你可以运行 lsof -i:8000, ...

  4. PHP生成UTF-8编码的CSV文件用Excel打开乱码的问题

    在你要输出的内容前先输出"\xEF\xBB\xBF",例如:你要输出的内容保存在$content里$content = "\xEF\xBB\xBF".$cont ...

  5. .Net版SQLite无法访问网络位置的数据库文件-winOpen,os_win.c 36702异常

    最近一个C#小程序,希望将SQLite数据库放在网络共享的位置,让多个客户端同时访问.却发现SQLite连接不上该网络位置的数据库,而如果数据库在本地则一切正常. 例如将SQLite数据库 test. ...

  6. 【SQL查询】查询结果翻译成其他值_decode

    decode()函数简介: 主要作用:将查询结果翻译成其他值(即以其他形式表现出来,以下举例说明): 使用方法: Select decode(columnname,值1,翻译值1,值2,翻译值2,.. ...

  7. 在 Ubuntu 上搭建 Hadoop 分布式集群 Eclipse 开发环境

    一直在忙Android FrameWork,终于闲了一点,利用空余时间研究了一下Hadoop,并且在自己和同事的电脑上搭建了分布式集群,现在更新一下blog,分享自己的成果. 一 .环境 1.操作系统 ...

  8. git pull VS git fetch&merge

    使用git fetch和git pull都可以更新远程仓库的代码到本地,但是它们之间还是有区别. git fetch  git fetch origin master git log -p maste ...

  9. 实战JAVA 高并发设计

    一.同步(Synchronous)和异步(Asynchronous) 同步和异步通常用来形容一次方法调用,同步方法,调用者必须等到方法调用返回后,才能继续后续的行为,异步方法调用会立即返回,调用者就可 ...

  10. ORM 关键

    1. 老师的增删改查 1. teacher_obj.cid.add(*[1, 2, 3]) 添加(必须打散) 2. teacher_obj.cid.set([1, 2, 3]) 设置(不用打散) 2. ...