layui导航栏实现代码


Posted in Javascript onMay 19, 2017

本文实例为大家分享了layui水平导航菜单的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>导航与面包屑</title>
    <link rel="stylesheet" href="layui/css/layui.css">
  </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 src="layui/layui.js" charset="utf-8"></script>
<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导航栏实现代码

官网导航栏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 常用操作方法
Jan 28 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
详解AngularJS controller调用factory
May 19 #Javascript
layer弹窗插件操作方法详解
May 19 #Javascript
layui选项卡效果实现代码
May 19 #Javascript
bootstrap table单元格新增行并编辑
May 19 #Javascript
layui弹出层效果实现代码
May 19 #Javascript
layui分页效果实现代码
May 19 #Javascript
layui前段框架日期控件使用方法详解
May 19 #Javascript
You might like
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python Tkinter GUI编程入门介绍
2015/03/10 Python
深入理解Python变量与常量
2016/06/02 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
对python 命令的-u参数详解
2018/12/03 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
Python实现图片添加文字
2019/11/26 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
初中化学教学反思
2014/01/23 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
房地产财务管理制度
2014/02/02 职场文书
运动会致辞稿50字
2014/02/04 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
小学班主任评语
2014/12/29 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
python创建字典及相关管理操作
2022/04/13 Python