简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

layui 네비게이션 바 예시 공유

小云云
풀어 주다： 2018-01-11 14:40:20
원래의
4187명이 탐색했습니다.

이 글은 주로 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(&#39;element&#39;, function(){
 var element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块

 //监听导航点击
 element.on(&#39;nav(demo)&#39;, function(elem){
  //console.log(elem)
  layer.msg(elem.text());
 });
});
</script>
  </body>
</html>
로그인 후 복사

렌더링:

관련 권장 사항:

layui 테이블 구현 코드 공유

jquery는layui

De를 기반으로 2단계 연결 드롭다운 선택을 구현합니다. Layui 방법에 대한 꼬리말 설명 .js는 테이블 단일 확인 기능을 구현합니다

위 내용은 layui 네비게이션 바 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
layui 分享 导航
원천：php.cn
이전 기사：EasyUI Datebox 날짜 확인 시작일이 종료 시간보다 이전입니다. 예시 공유 다음 기사：고급 Angular 구성 요소 패턴 예
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
내 양식의 데이터를 인식할 수 없습니다. 무엇이 잘못되었는지 찾아주실 수 있나요? <div class="layadmin-user-login-boxlayadmin-user-login-bodylayui-form"> &l...
에서 2023-10-08 09:31:17
0
2
122
선생님께서 Layui 개발 문서를 갖고 계시나요? 혹시 Laui 개발 문서가 있는지 선생님께 여쭤봐도 될까요? Layui 공식 홈페이지가 삭제되었습니다.
에서 2023-02-27 12:16:24
0
1
384
TP6 튜토리얼 질문 튜토리얼을 따라가지만 복사된 html 표시가 동영상 튜토리얼과 다르고,layui를 임포트해도 소용이 없습니다.
에서 2022-01-17 10:36:36
0
2
780
튜토리얼에 따라 HTML을 복사했는데 문제가 있습니다. 튜토리얼에 따라 html이 복사되어 있고 텍스트만 한 줄씩 표시됩니다. 영상의 표시 형식이 아니며,layui를 로드할 때에도 로드할 수 없습니다.
에서 2022-01-17 10:31:03
0
1
707
layui를 로드할 수 없습니다 layui를 로드할 수 없습니다
에서 2022-01-16 23:06:24
0
4
865
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！