Layui页面元素之导航

最新推荐文章于 2023-08-16 19:51:48 发布

原创最新推荐文章于 2023-08-16 19:51:48 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#LayUI

这篇博客介绍了前端UI框架Layui的导航元素，包括水平导航、导航主题、垂直/侧边导航和面包屑的使用方法。通过示例代码和实际效果展示了如何在项目中应用这些组件，并提供了配置导航样式的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layui页面元素之导航

Layui入门

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
使用Layui首先需要下载Layui的学习文档
官方链接
在这里插入图片描述
里边包含的内容：

下载完毕后部署到项目里

使用Layui需要在页面引入两个文件：

<link rel="stylesheet" href="static/js/layui/css/layui.css"  media="all">
<script src="static/js/layui/layui.all.js" charset="utf-8"></script>

<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></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><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
 
<script>
layui.use('element', function(){
  var element = layui.element;
});

效果图：
在这里插入图片描述

除了文字形式，还可以将导航栏的内容转换成图片或徽章

<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item">
    <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
</ul>

效果图：
在这里插入图片描述

导航主题

可以将导航栏的背景设置成自己想要的颜色
只需要在ul中的class加上颜色

<ul class="layui-nav layui-bg-blue">...</ul>

垂直/侧边导航

垂直导航和侧边导航一般使用在需要分类的地方
垂直导航的关键字为layui-nav-tree

<ul class="layui-nav layui-nav-tree" lay-filter="test">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">我</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</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>

垂直导航效果图
在这里插入图片描述
在垂直导航代码的后面加入 layui-nav-side
就是侧边导航
侧边导航效果图：

水平导航、垂直导航和侧边导航的区别：
垂直导航需要在ul中的class里加入layui-nav-tree；
侧边导航需要在ul中的class里加入layui-nav-tree layui-nav-side；

面包屑

<span class="layui-breadcrumb">
  <a href="">惊悚</a>
  <a href="">搞笑</a>
  <a href="">言情</a>
  <a><cite>恐怖</cite></a>
</span>

效果图：
在这里插入图片描述
其中的分割符可以自定义，在span标签里面加入lay-separator="-"：

<span class="layui-breadcrumb" lay-separator="-">

在这里插入图片描述
结语：
使用了导完包后可以在官网复制按钮的代码查看是否有效果，没有效果的话可以Ctrl+Shift+Delete清除浏览器缓存，然后检查引入的语句有没有出错