<%@ 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. mysql添加Federated引擎问题

    现在我有这么一个需求, 就是有两个项目, 一个叫项目A,一个项目B, 由于A的用户表和B的用户表是要实现一样的. 例如: 我在A项目中注册了,要实现在B项目中也能登录, 当用到B的时候, 由于B数据库 ...

  2. opencv学习之路（13）、图像阈值化threshold

    一.图像阈值化简介 二.固定阈值 三.自适应阈值 #include<opencv2/opencv.hpp> using namespace cv; void main(){ Mat src ...

  3. 网络对抗——web基础

    网络对抗--web基础 实践内容 (1)Web前端HTML (2)Web前端javascipt (3)Web后端:MySQL基础:正常安装.启动MySQL,建库.创建用户.修改密码.建表 (4)Web ...

  4. （转）Spring Cloud（二）

    (二期)23.微服务框架spring cloud(二) [课程23]熔断器-Hystrix.xmind0.1MB [课程23]微服务...zuul.xmind0.2MB 熔断器-Hystrix 雪崩效 ...

  5. git删除远程分支文件，不改变本地文件

    git提交项目时候踩的Git的坑 特别 由于准备春招,所以希望各位看客方便的话,能去github上面帮我Star一下项目 https://github.com/Draymonders/Campus-S ...

  6. Sample Classification Code of CIFAR-10 in Torch

    Sample Classification Code of CIFAR-10 in Torch from: http://torch.ch/blog/2015/07/30/cifar.html req ...

  7. SAP 财务模块 FI-TV 差旅管理

    SAP 财务模块 FI-TV 差旅管理 Travel Management差旅管理事务码              描述PRT3      Trip Costs: Maintain Postings ...

  8. PHP 冒泡排序(Bubble Sort)

    冒泡排序指的是依次比较相邻的两个数,然后根据大小做出排序,直至最后两位数.因为在排序的 过程中总是小数放前面,大数放后面,和气泡上升有点类似,所以又称作冒泡排序. 下面通过一个实例看一下如何实现冒泡排 ...

  9. ADO.NET DBHelper

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...

  10. P1622 释放囚犯

    传送门 区间DP简介: 在写这题前,需要先弄清楚区间DP是如何操作的: 区间DP的做法还是相对固定的,没有其他类型DP的复杂多变.主要思想就是先在小区间进行DP得到最优解,然后再利用小区间的最优解合并 ...