<%@ 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. python，pycharm安装

    下载python地址:https://www.python.org/downloads/release/python-371/ 安装python ***python安装目录下的scripts加入环境变 ...

  2. ldap集成nexus

    nexus版本:2.14.4 添加nexus支持ldap认证: 管理员登录,点击 Administration --> Server -->Security Settings,将 OSS ...

  3. bzoj 1614 Telephone Lines架设电话线 - 二分答案 - 最短路

    Description Farmer John打算将电话线引到自己的农场,但电信公司并不打算为他提供免费服务.于是,FJ必须为此向电信公司支付一定的费用. FJ的农场周围分布着N(1 <= N ...

  4. CentOS7下Docker中构建Jenkins容器

    背景 在CentOS搭建Docker完成后,我们需要在Docker中搭建Jenkins用来实现工程自动部署. 安装前提 jdk已安装,安装目录如:usr/java/jdk1.8.0_161 maven ...

  5. JDK8新特性：使用Optional避免null导致的NullPointerException

    空指针异常是导致Java应用程序失败的最常见原因.以前,为了解决空指针异常,Google公司著名的Guava项目引入了Optional类,Guava通过使用检查空值的方式来防止代码污染,它鼓励程序员写 ...

  6. Python3基础 frozenset 使用list创建frozenset

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  7. Vim 插键及配置

    如果你觉得这个页面广告太多,欢迎移步博客阅读:Vim 插键及配置 编辑器之神 -- Vim 平日使用vim经常编辑文件,想想使用时的痛点,决定研究一下插件的使用. Vim的扩展通常也被成为bundle ...

  8. （转）JPA & Restful

    参考博客: JPA: https://www.jianshu.com/p/b6932740f3c0 https://shimo.im/docs/zOer2qMVEggbF33d/ Restful: h ...

  9. office完全卸载

    第一步:先暂停office服务,再通过 控制面板--卸载程序  --卸载office应用 第二步:通过office_move(自己命名的工具)软件卸载  工具分享:https://pan.baidu. ...

  10. html 之 table cellpadding,cellspacing

    单元格(cell) -- 表格的内容 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间 单元格间距(表格间距)(cellspacing) - ...