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

学习源头: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. Spring 静态注入讲解（MethodInvokingFactoryBean）

    /* * Copyright (c) 2017 4PX Information Technology Co.,Ltd. All rights reserved. */package com.fpx.o ...

  2. js插件封装

    插件封装原则 1.暴露出来的实例必须只能是一个 2.IIFE包裹 !执行包裹 函数作用域保护 3.实例化方法不要写在函数内 throw这个方法是报错

  3. Treflection06_调用静态方法

    1. package reflectionZ; import java.lang.reflect.Method; public class Treflection06 { public static ...

  4. JQuery小知识点代码

    1.链式操作 $(function(){ /*var oDiv = $('#div1'); oDiv.html('hello'); oDiv.css('background','red'); oDiv ...

  5. 探究platform_driver中“多态”思想

    问题最初是下面的两段代码引出的: static struct platform_driver sonypi_driver = { .driver = { .name = "sonypi&qu ...

  6. vue.js 1.0中用v-for遍历出的li中的@click事件在移动端无效

    在vue.js使用v-for遍历出的li中的@click事件在移动端无效,在网页端可以执行,代码如下 <template> <div class="rating-secti ...

  7. 反汇编工具 objdump的使用简介

    arm-linux-objdump -D led.elf > led_elf.dis objdump是gcc工具链中的反汇编工具,作用是由编译链接好的elf格式的可执行程序反过来得到反汇编代码 ...

  8. 如何拿到半数面试公司Offer——我的Python求职之路(转载)

    从八月底开始找工作,短短的一星期多一些,面试了9家公司,拿到5份Offer,可能是因为我所面试的公司都是些创业性的公司吧,不过还是感触良多,因为学习Python的时间还很短,没想到还算比较容易的找到了 ...

  9. 假如数组接收到一个null，那么应该怎么循环输出。百度结果，都需要提前判断。否则出现空指针异常。。我还是想在数组中实现保存和输出null。

    假如数组接收到一个null,那么应该怎么循环输出.因为foreach与obj.length都会报错.null不是对象,foreach中不能赋值? sp页面forEach一个存放对象的集合,怎么判断其中 ...

  10. PostgreSQL流复制记录

    参考了别人的部分,添加了自己在实践中的内容,仅做记录. 1.同步流复制中 主机操作 1.1postgresql.conf wal_level = hot_standby # 这个是设置主为wal的主机 ...