layui-导航栏

最新推荐文章于 2024-05-16 14:40:57 发布
最新推荐文章于 2024-05-16 14:40:57 发布
阅读量5.7k 收藏 1
点赞数 1
分类专栏： Layui 文章标签： 导航 layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ajlgl/article/details/72515025
版权

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>

这里写图片描述

官网导航栏

岽仔玖等
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Layui快速入门之第五节 导航
qq_61313896的博客
09-13 1775
Layui快速入门之第五节 导航
layui实现导航栏目
aqzengkuasheng的博客
02-28 3301
导航是依赖element模块的 所以要依赖加载模块:elememt 导航 水平导航 layui-nav layui-nav-item 表示的是导航的子项 layui-this 表示当前被选中的项 layui-nav-child 表示是二级菜单 垂直导航 layui-nav layui-nav-tree 侧边导航 layui-nav layui-nav-tree layui-nav-side 导航的主题颜色 layui-bg-颜色 面包屑式导航 layui-breadcrumb 通过lay
layui的基本组件使用
qq_62898618的博客
08-16 3643
主要功能：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。模块加载名称：laydate一·基础参数选项 通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数. elem - 绑定元素是必填项；...
JS+JQ+Layui菜单栏点击URL跳转后保持选中状态
最新发布
zheshiyangyang的博客
05-16 987
用户观感并不是很好，因此我们需要判断当处于当前选项卡对应的页面时，再次点击选项卡不会执行跳转操作。点击这个选项卡再次跳转到这个页面，这就导致用户体验极差且不会保留缓存数据。)时，页面切换到另一个页面，但是此时我。最近在开发个人网站，其中使用了“解决方式很简单，只需要在添加“”的函数处，同时设置该标签是“”选项卡成功被选中且保持高亮。”官方文档可知，当我们对“问题的解决有两种，可以使用。那么我们是不是可以通过“在我点击一个选项卡(解决，两种方式都行，
Layui之动态树(树形菜单)详解
ChatYU的博客
07-12 3330
树形菜单的展示及编写，菜单栏的级别
LayUi学习笔记
dingcai12003的博客
06-26 457
layui简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是...
layui导航栏实现代码
08-30
layui导航栏实现代码详解 layui框架作为一个前端开发框架，提供了丰富的UI组件和插件，lavui导航栏是其中的一个重要组件。本文将详细介绍layui导航栏的实现代码，包括水平导航菜单、垂直导航菜单和侧边固定导航菜单...
laravel-layui-admin:基于Laravel，Layui构建的RBAC后台管理系统
03-11
Laravel-layui-admin 基于Laravel，Layui构建的RBAC基础后台管理系统。 如果你想要vue版本的后台系统，移步 截图 要求 最低支持laravel5.8，支持6.0 安装 首先安装laravel，并确保您配置了正确的数据库连接。 ...
layui-v2.6.8.zip
03-09
4. **丰富的组件**：layui 包含了大量的前端组件，如表格、表单、按钮、图标、弹窗、导航、轮播图等，满足日常开发需求。 5. **主题定制**：layui 提供了默认主题，并允许用户根据需求自定义主题，以实现与企业品牌...
关于layui导航栏不展示下拉列表的解决方法
10-16
通过以上步骤，通常可以解决layui导航栏下拉列表不显示的问题。在排查过程中，确保逐个检查这些可能的原因，并根据需要进行调整。同时，了解layui的文档和社区资源也是非常有帮助的，它们可以提供更深入的解决方案和...
layui实现三级导航菜单
10-16
在本文中，我们将深入探讨如何使用layui框架来实现一个功能丰富的三级导航菜单。layui是一款流行的前端组件库，它提供了丰富的UI元素和交互效果，适用于快速构建美观的后台管理系统。实现三级导航菜单对于组织复杂的...
layui导航.rar
08-06
针对layui页面导航逻辑：头部导航点击左侧显示下一级导航，左侧具有收缩功能，收缩后弹出类似adminlte插件的效果，导航链接可对内容区加载相应页面 -针对layui框架做出的更改， -引入navbar.js和tab.js两个js插件， -并进行方法的新增和修改 -针对admin.css直接做的调整， -连接方法layui的jq实现 注：需要在环境下运行
精美的多级侧边栏导航菜单jQuery插件
07-10
精美的多级侧边栏导航菜单jQuery插件
layui实现左侧导航树形菜单
TestXzing的博客
07-11 2587
今日金句在上篇博客中，我们学习了layui的入门，还实现了后台的登陆注册，今天我们就来完成后台首页的重要组成部分——左侧导航树形菜单
layui 后台管理系统tab切换 如何绑定某一个左侧导航为默认首页，点击时不会触发新标签
qq_40295815的博客
11-25 3464
首先我们先看左侧栏 <li class="layui-nav-item layui-this"> <a href="javascript:;" data-url="<%=basePath%>price/MarketQuotations" data-id='1' data-text="市场行情"><i class="iconfont">&a...
layui-导航页面-带左侧栏伸缩和tab嵌入iframe自适应的前端代码
GinChou的萌新博客
05-26 2583
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8" name="referrer" content="no-referrer"> <meta http-equiv="Content-Type" name="viewport" content="width=device-width, initia.
layui选项卡切换及右键的动态操作（新增、切换、删除）
honvin的博客
09-29 1万+
要实现的效果：选项卡的新增以及切换、选项卡刷新、选项卡各种删除：删除其他、删除右侧所有、删除所有
Layui 导航默认展开和菜单栏选中高亮设置
热门推荐
huangbaokang的博客
06-27 2万+
&lt;ul class="layui-nav layui-nav-tree custom-nav-tree" lay-filter="kitNavbar" kit-navbar&gt; &lt;c:if test="${title_sys eq '内容管理' }"&gt; &lt;li class="lay.
layUi框架入门篇（二）——布局
我是一只蘑菇17的博客
10-20 3129
layui文档layui文档
layui 切换导航栏 修改layui-this设定
03-28
您可以通过修改 `.layui-nav-item.layui-this` 的 CSS 样式来更改当前选中导航栏的样式。 例如，您可以将 `.layui-nav-item.layui-this` 的背景颜色更改为红色： ```css .layui-nav-item.layui-this { background-color: #FF0000; } ``` 或者，您可以将 `.layui-nav-item.layui-this` 的字体颜色更改为白色： ```css .layui-nav-item.layui-this { color: #FFFFFF; } ``` 然后，将修改后的 CSS 样式添加到您的样式表中即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值