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

<html>

<head>

    <title>数据采集</title>

    <meta name="renderer" content="webkit">

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

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

    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">

    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">

    <script src="../../../js/jquery.min.js"></script>

    <script src="../../layuiadmin/layui/layui.js"></script>

</head>

<body>

<fieldset class="layui-elem-field layui-field-title">

    <legend>水平导航菜单</legend>

</fieldset>

<ul class="layui-nav">

    <li class="layui-nav-item"><a href="">最新活动</a></li>

    <li class="layui-nav-item layui-this">

        <a href="javascript:;">产品</a>

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

            <dd><a href="">选项1</a></dd>

            <dd><a href="">选项2</a></dd>

            <dd><a href="">选项3</a></dd>

        </dl>

    </li>

    <li class="layui-nav-item"><a href="">大数据</a></li>

    <li class="layui-nav-item">

        <a href="javascript:;">解决方案</a>

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

            <dd><a href="">移动模块</a></dd>

            <dd><a href="">后台模版</a></dd>

            <dd class="layui-this"><a href="">选中项</a></dd>

            <dd><a href="">电商平台</a></dd>

        </dl>

    </li>

    <li class="layui-nav-item"><a href="">社区</a></li>

</ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

    <legend>垂直导航菜单</legend>

</fieldset>

<ul class="layui-nav layui-nav-tree" lay-filter="demo">

    <li class="layui-nav-item layui-nav-itemed">

        <a href="javascript:;">默认展开</a>

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

            <dd><a href="javascript:;">选项一</a></dd>

            <dd><a href="javascript:;">选项二</a></dd>

            <dd><a href="javascript:;">选项三</a></dd>

            <dd><a href="">跳转项</a></dd>

        </dl>

    </li>

    <li class="layui-nav-item">

        <a href="javascript:;">解决方案</a>

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

            <dd><a href="">移动模块</a></dd>

            <dd><a href="">后台模版</a></dd>

            <dd><a href="">电商平台</a></dd>

        </dl>

    </li>

    <li class="layui-nav-item"><a href="">云市场</a></li>

    <li class="layui-nav-item"><a href="">社区</a></li>

</ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

    <legend>侧边固定导航菜单</legend>

</fieldset>

<ul class="layui-nav layui-nav-tree site-demo-nav" lay-filter="demo">

    <li class="layui-nav-item layui-nav-itemed">

        <a href="javascript:;">默认展开</a>

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

            <dd><a href="javascript:;">选项一</a></dd>

            <dd><a href="javascript:;">选项二</a></dd>

            <dd><a href="javascript:;">选项三</a></dd>

            <dd><a href="">跳转项</a></dd>

        </dl>

    </li>

    <li class="layui-nav-item">

        <a href="javascript:;">解决方案</a>

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

            <dd><a href="">移动模块</a></dd>

            <dd><a href="">后台模版</a></dd>

            <dd><a href="">电商平台</a></dd>

        </dl>

    </li>

    <li class="layui-nav-item"><a href="">云市场</a></li>

    <li class="layui-nav-item"><a href="">社区</a></li>

</ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

    <legend>默认面包屑</legend>

</fieldset>

<span class="layui-breadcrumb">

  <a href="/">首页</a>

  <a href="/demo/">演示</a>

  <a><cite>导航元素</cite></a>

</span>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

    <legend>自定义分隔符的面包屑</legend>

</fieldset>

<span class="layui-breadcrumb" lay-separator="—">

  <a href="">首页</a>

  <a href="">国际新闻</a>

  <a href="">亚太地区</a>

  <a><cite>正文</cite></a>

</span>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

    <legend>还可以用于门户频道的面包屑</legend>

</fieldset>

<span class="layui-breadcrumb" lay-separator="|">

  <a href="">娱乐</a>

  <a href="">八卦</a>

  <a href="">体育</a>

  <a href="">搞笑</a>

  <a href="">视频</a>

  <a href="">游戏</a>

  <a href="">综艺</a>

</span>

<script>

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

        var element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击

        element.on('nav(demo)', function(elem){

            //console.log(elem)

            layer.msg(elem.text());

        });

    });

</script>

</body>

</html>

　　

layui 3种导航栏的更多相关文章

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

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

  2. iOS frame从导航栏下面开始

    iOS7.0 之后,页面布局默认延伸到了手机界面的边缘;导航栏背景成透明颜色. 解决fram从导航栏下面开始方法: 第一种: 将导航栏改成不透明即可 if( ([[[UIDevice currentD ...

  3. Android开源项目——带图标文字的底部导航栏IconTabPageIndicator

    接下来的博客计划是,在<Android官方技术文档翻译>之间会发一些Android开源项目的介绍,直接剩下的几篇Android技术文档发完,然后就是Android开源项目和Gradle翻译 ...

  4. 网页导航栏 html + css的代码实现

    一般来讲,我们的网页导航栏是这么个模式来构建在结构上:1.首先我们需要给导航栏的div 给个类名 一般为nav2.然后就是一个无序表格 3.由于导航栏的文字一般都是链接用来跳转页面 要在li里面包含一 ...

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

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

  6. iOS:视图切换的第二种方式：UINavigationController导航栏控制器

    UINavigationController:一个以栈的形式管理多视图的容器,负责子控制器之间的跳转.由于以栈的方式管理视图,各个视图的切换就是压栈和出栈操作,所以出栈后的视图会立即销毁. 介绍: & ...

  7. iOS 更改状态栏、导航栏颜色的几种方法

    ios上状态栏 就是指的最上面的20像素高的部分状态栏分前后两部分,要分清这两个概念,后面会用到: 前景部分:就是指的显示电池.时间等部分:背景部分:就是显示黑色或者图片的背景部分: (一)设置sta ...

  8. 修改layui的后台模板的左侧导航栏可以伸缩

    原生的左侧导航栏代码: <div class="layui-side layui-bg-black"> <div class="layui-side-s ...

  9. Nuxt内导航栏的两种实现方式

    方式一 | 通过嵌套路由实现 在pages页面根据nuxt的路由规则,建立页面 1. 创建文件目录及文件 根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同 所以,我们的文件夹也为i ...

随机推荐

  1. SSL及其加密通信过程

    SSL及其加密通信过程 什么是SSL SSL英文全称Secure Socket Layer,安全套接层,是一种为网络通信提供安全以及数据完整性的安全协议,它在传输层对网络进行加密.它主要是分为两层: ...

  2. 使SourceInsight支持Python语言的方法

    刚用家里的电脑看Python代码,发现py的文件在SI不显示,才意识到还没有安装Python.CLF插件.正好把这个方法在这分享一下,毕竟so easy~ 下载点这里–>Python.CLF h ...

  3. 18种CSS3loading效果完整版

    今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...

  4. 【python041--构造方法：构造和析造】

    一.魔法方法 1.魔法方法总是被双下划线包围,例如:__init__ 2.为什么在类实例化的时候,有时候需要构造__init__,有时候不需要呢 举例说明: #定义一个矩形的类,需要长和宽两个参数,计 ...

  5. 类中函数前、后、参数加const

    1.参数加const:int fun(const int a) a在函数里不可被修改 2.函数前加const:const int* const fun() 这种一般是返回的指针或者是引用,加const ...

  6. 《AngularJS开发下一代Web应用》读书笔记与感想

    该书一共130页打算四天读完,边读边记录. 1. 2.学习MogoDB 3. 4. 5. 创建标识符的一段简单伪码模板: var myModule = angular.module(...); myM ...

  7. 4514: [Sdoi2016]数字配对 费用流

    链接 https://www.lydsy.com/JudgeOnline/problem.php?id=4514 思路 EK直接贪心做 <0的时候加上剩余返回 二分图a->b的时候 把b- ...

  8. GCD与莫比乌斯反演的勾当

    目录 机房最后一个学懵逼钨丝的人 题目一 题目 bzoj1101 机房最后一个学懵逼钨丝的人 题目一 链接 题目没找到 求\(\sum_{1}^{n}\sum_{1}^{m}gcd(i,j)\) 式子 ...

  9. Minikube 安装

    安装Minikube 在容器编排工具中安装配置最复杂的就是Kubernetes,想要运行一个简单的容器集群环境,对于没有使用过Kubernetes的人来说,需要花费一定的时间去理解各组件的概念和功能, ...

  10. 连号区间数|2013年蓝桥杯B组题解析第十题-fishers

    连号区间数 小明这些天一直在思考这样一个奇怪而有趣的问题: 在1~N的某个全排列中有多少个连号区间呢?这里所说的连号区间的定义是: 如果区间[L, R] 里的所有元素(即此排列的第L个到第R个元素)递 ...