当前位置: 首页 >>前端开发 >>LayUi教程 >>Layui中导航

Layui中导航

时间:2021/10/29 6:49:00 【admin】

导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。面包屑结构简单,支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如呼出二级菜单等,需借助element模块才能使用。…

导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。面包屑结构简单,支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如呼出二级菜单等,需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情

依赖加载模块:element

水平导航

image.png


HTML结构code

<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>

//注意:导航 依赖 element 模块,否则无法进行功能性操作

layui.use('element', function(){

  var element = layui.element;

  

  //…

});

</script>

      

设定layui-this来指向当前页面分类。



导航中的其它元素


除了一般的文字导航,我们还内置了图片和徽章的支持,如:

image.png

HTML结构code

<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>

      

是否瞬间上了个档次呢?


导航主题

image.png

通过对导航追加CSS背景类,让导航呈现不同的主题色


</>code

//如定义一个墨绿背景色的导航

<ul class="layui-nav layui-bg-green" lay-filter="">

  …

</ul>      

      

水平导航支持的其它背景主题有:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)

垂直导航支持的其它背景主题有:layui-bg-cyan(藏青)


垂直/侧边导航

image.png

垂直导航HTML结构code

<ul class="layui-nav layui-nav-tree" lay-filter="test">

<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->

  <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>

      

水平、垂直、侧边三个导航的HTML结构是完全一样的,不同的是:

image.png

垂直导航需要追加class:layui-nav-tree

侧边导航需要追加class:layui-nav-tree layui-nav-side


导航可选属性/类

对导航元素结构设定可选属性和 CSS 类名,可让导航菜单项达到不同效果。目前支持的属性如下:

image.png

面包屑

首页/ 国际新闻/ 亚太地区/ 正文

HTML结构code

<span class="layui-breadcrumb">

  <a href="">首页</a>

  <a href="">国际新闻</a>

  <a href="">亚太地区</a>

  <a><cite>正文</cite></a>

</span>

      

你还可以通过设置属性 lay-separator="-" 来自定义分隔符。如: 首页- 国际新闻- 亚太地区- 正文


HTML结构code

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

  <a href="">首页</a>

  <a href="">国际新闻</a>

  <a href="">亚太地区</a>

  <a><cite>正文</cite></a>

</span>

      

当然,你还可以作为小导航来用,如:

娱乐| 八卦| 体育| 搞笑| 视频| 游戏| 综艺

HTML结构code

<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>

      


扩充阅读

CopyRight:2007-2018 编程语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮