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

学习源头: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. BI项目中的ETL设计详解（数据抽取、清洗与转换 ）（转载）

    原文:http://www.cnblogs.com/reportmis/p/5939732.html ETL是BI项目最重要的一个环节,通常情况下ETL会花掉整个项目的1/3的时间,ETL设计的好坏直 ...

  2. java用servlet、cookie实现一个阅读记录

    效果如图 代码1 package com.xiaostudy.servlet; import java.io.IOException; import java.io.PrintWriter; impo ...

  3. 网络数据包头部在linux网络协议栈中的变化

    接收时使用skb_pull()不断去掉各层协议头部:发送时使用skb_push()不断添加各层协议头部. 先说说接收: * eth_type_trans - determine the packet' ...

  4. Git 更改远程地址

    查看远程地址 git remote -v 更换远程地址 git remote set-url origin 新的地址 更换之后可以查看一下 这个非常实用. 通常我们把gitlab服务器更换的时候,对应 ...

  5. Nginx配置端口访问的网站

    server { listen 80; #listen [::]:80 default_server ipv6only=on; server_name www.website.com; index i ...

  6. JNI_Z_09_Java的字符串

    ZC: jstring 就是 Java中的String对象 ZC: 10.8 Unicode字符串结尾(http://www.360doc.cn/article/14233282_321497569. ...

  7. # IFE前端（2015春）-task2

    第一章 JavaScript数据类型及语言基础 期望达成 掌握JavaScript的各种数据类型概念.判断方法 掌握JavaScript函数.对象的概念 掌握字符串.数字.数组.日期等对象的方法 了解 ...

  8. java多线程补：充原子性和可见性

    参考:http://www.cnblogs.com/mengyan/archive/2012/08/22/2651575.html 原子性:所谓原子性就是不可分割的,比如:在我们编程中直接给变量赋值, ...

  9. Python 面向对象-------补充

    Python 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过 ...

  10. oracle索引-二元高度

    本文转载 作为数据库管理员来说,要在表上建立索引很简单.但是要知道这个索引是否合适.如何优化索引则就具有一定的难度.这项工作也是用来评价一个数据库管理员是否算得上专家的一个重要指标.那么为什么索引优化 ...