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实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
封装 axios+promise通用请求函数操作
Aug 11 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 模拟POST|GET操作实现代码
2010/07/20 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
将python代码和注释分离的方法
2018/04/21 Python
解决python报错MemoryError的问题
2018/06/26 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python 图像平移和旋转的实例
2019/01/10 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
网吧收银员岗位职责
2013/12/14 职场文书
初婚初育证明
2014/01/14 职场文书
网络营销策划方案
2014/06/04 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
离职信范文
2015/06/23 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers