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 相关文章推荐
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
js中作用域的实例解析
Mar 16 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
基于vue写一个全局Message组件的实现
Aug 15 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 $_SERVER当前完整url的写法
2009/11/12 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
浅谈PHP进程管理
2019/03/08 PHP
js右键菜单效果代码
2007/07/21 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
Vue 全局loading组件实例详解
2018/05/29 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
历史系毕业生自荐信
2013/10/28 职场文书
升学宴主持词
2014/04/02 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
小学中队委竞选稿
2015/11/20 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
详解JVM系列之内存模型
2021/06/10 Javascript