<%@ 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. 【4opencv】求解向量和轮廓的交点

    在“学习OpenCV3"的QQ群众,网友且行且珍惜针对前期博客(https://www.cnblogs.com/jsxyhelu/p/9345590.html)中的内容提出了以下问题: 比如 ...

  2. py4CV例子2.5车牌识别和svm算法重构

    1.什easypr数据集:  ) ) ] all_label_list = temp[:, ] n_sample = , ) matcher = cv2.FlannBasedMatcher(flann ...

  3. 《C Elements of Style》 书摘

    <C Elements of Style> 书摘 学完C语言和数据结构后,虽然能解决一些问题,但总觉得自己写的程序丑陋,不专业.这时候看到了Steve Oualline写的<C El ...

  4. jQuery中清空元素.empty()和.html('')，两种方法的对比

    jQuery 中有 .empty() 和 .html() 两种方式,都能够清空所选父元素中的所有子元素.但是这两者清空元素的方式上,有着很大的区别: 1.empty() jQuery对象.empty( ...

  5. 2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛题解

    链接:https://www.nowcoder.com/acm/contest/118/A 来源:牛客网 PUBG 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语 ...

  6. Java中单例设计模式，饿汉式和懒汉式

    Java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主要介绍三种:懒汉式单例.饿汉式单例.登记式单例. 单例模式有以下特点: 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯 ...

  7. 【Python019--函数与过程】

    一.函数与过程 1.Python只有函数没有过程 >>> def hello():    print('Hello  fishC!')>>> temp = hell ...

  8. hihoCoder week12 刷油漆

    题目链接: https://hihocoder.com/contest/hiho12/problem/1 给出一棵树 每个节点的价值 求以1为根的树中,选取m个相联通的节点的最大价值和 #includ ...

  9. wamp phpcms部署网站问题

    服务器使用自己的服务器,域名申请后通过信息服务iis管理器建网站,并将物理地址指定到wamp的www目录中的网站的根目录.这时候如果网站首页已经生成后访问域名将进入网站首页. 出现的问题: 1.导航( ...

  10. 用spring tool suite插件创建spring boot项目时报An internal error occurred during: "Building UI model". com/google/common/

    本文为博主原创,未经允许不得转载 在用spring tool suite创建spring boot项目时,报一下异常: 查阅很多资料之后发现是因为装的spring tool suite的版本与ecli ...