<%@ 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. 前端 --- 1 HTML

    一.文档结构 <!DOCTYPE html> <html lang="zh-CN"> #这个lang表示语言,zh-CN是中文的意思, 如果以英文为主,就写 ...

  2. ImageView控件有关问题

    了解了一下ImageView控件,这个控件本身及其属性倒没有什么特别之处.只是在看<第一行代码>时,郭大神写到创建drawable-xhdpi文件有些问题,首先先说drawable和mip ...

  3. RabbitMQ 入门指南——安装

    RabbitMQ好文 Rabbitmq Java Client Api详解 tohxyblog-博客园-rabbitMQ教程系列 robertohuang-CSDN-rabbitMQ教程系列 Rabb ...

  4. 在cygwin下创建的文件位于windows的哪个目录下?

    答: 1. C盘的SPB_Data目录下 2. 在cygwin下通过pwd命令可以查看,例如: jello@jello ~ $ pwd /cygdrive/c/SPB_Data (/cygdrive/ ...

  5. 4-Three-Matterhorn man

    What was the main objective of early mountain climbers?   ①Modern alpinists try to climb mountains b ...

  6. Twitter开发2

    There are different API families The standard (free) Twitter APIs consist of REST APIs and Streaming ...

  7. [转载]undefined reference to `memcpy@GLIBC_2.14'

    转自:http://blog.sina.com.cn/s/blog_6c5a47d30102wfw9.html undefined reference to `memcpy@GLIBC_2.14' ( ...

  8. 使用p4c将P4 14代码转换为16代码

    参考: [Question] How to make conversion between P4 14 and P4 16? 使用p4c将P4 14代码转换为16代码: $ p4test --p4v ...

  9. 4、lvs nat和dr类型演示

    实战操作 LVS-NAT  (应用场景:VIP是公网地址,DIP和RIP一般使用私网地址,NAT的主要目的是为了隐藏服务器) 核心要点: 1.DIP与各real server的RIP必须在同一个网段中 ...

  10. 【AT1219】历史研究

    Problem Description \(IOI\)国历史研究的第一人--\(JOI\)教授,最近获得了一份被认为是古代\(IOI\)国的住民写下的日记.\(JOI\)教授为了通过这份日记来研究古代 ...