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

学习源头: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的几个通知（前置、后置、环绕、异常、最终）

    1.没有异常的 2.有异常的 1.被代理类接口Person.java package com.xiaostudy; /** * @desc 被代理类接口 * * @author xiaostudy * ...

  2. d2.js学习笔记（七）——动态SVG坐标空间

    目标 在这一章,我们将学习如何使SVG坐标空间是动态的,这样我们的数据可视化不论数据是什么,都始终是可见的. 我们会使得SVG坐标空间尺度上调或下调来适于我们的数据. 三个SVG长方形 我们就从三个长 ...

  3. ImageView显示图像控件

    ImageView显示图像控件 一.简介 1. 2. ImageView,图像视图,直接继承自View类,它的主要功能是用于显示图片,实际上它不仅仅可以用来显示图片,任何Drawable对象都可以使用 ...

  4. eclipse中修改工程的Android版本

    项目根目录下project.properties的记录项目中所需要的环境信息,比如Android的版本等 project.properties示例如下: [html] view plaincopy # ...

  5. java之字符串中查找字串的常见方法

    1.int indexOf(String str) :返回第一次出现的指定子字符串在此字符串中的索引.      int indexOf(String str, int startIndex):从指定 ...

  6. iframe标签用法详解

      功能:iframe标签用于定义内联框架. 语法:<iframe></iframe> 内联框架是在一个页面中嵌入另一个页面. 有很多网页看上去是一个网页,但实际上它其中可能镶 ...

  7. elasticsearch负载均衡节点——客户端节点 node.master: false node.data: false 其他配置和master 数据节点一样

    elasticSearch的配置文件中有2个参数:node.master和node.data.这两个参 数搭配使用时,能够帮助提供服务器性能. 数据节点node.master: false node. ...

  8. C#—序列化(Serialize)和反序列化(NonSerialize)

    (转自:http://www.cnblogs.com/Abel-Zhang/p/Serialize.html) 一.概述 序列化是把对象转变成流.相反的过程就是反序列化. 哪些场合用到这项技术呢? 1 ...

  9. 几种常见排序算法的C++描述

    基本的排序算法有如下特点: 1.几种容易的算法都是以O(N2)排序的 2.Shell排序编程简单,其也是以O(N2)排序的,在实践中用的很多 3.复杂的排序算法往往都是按照O(NlogN)尽心排序的 ...

  10. HAWQ取代传统数仓实践（八）——维度表技术之角色扮演维度

    单个物理维度可以被事实表多次引用,每个引用连接逻辑上存在差异的角色维度.例如,事实表可以有多个日期,每个日期通过外键引用不同的日期维度,原则上每个外键表示不同的日期维度视图,这样引用具有不同的含义.这 ...