집 > 기사 > 웹 프론트엔드 > jQuery 수직 다단계 탐색 메뉴 코드 Sharing_jquery

jQuery 수직 다단계 탐색 메뉴 코드 Sharing_jquery

WBOY원래의: 2016-05-16 15:44:281213검색

jquery를 기반으로 한 세로 탐색 메뉴 특수 효과 코드입니다. 총 3가지 레벨이 있습니다. 효과는 간단하고 넉넉하며, 마지막 레벨은 사진 표시 및 설명에도 사용할 수 있습니다. 특수 효과 소스 코드.

공유해주신 jQuery 수직 다단계 네비게이션 메뉴 코드는 다음과 같습니다

<head>
<title>jQuery垂直多级导航菜单代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<ul class="ce">
 <li> <a class="xz" href="#">脚本之家</a> </li>
 <li> 
  <a href="#">目录B<img class="more" src="images/more.png"/></a>
  <ul class="er">
  <li>  <a href="##">二级目录A</a> </li>
  <li class="e_li"> 
   <a href="##">二级目录B</a> 
   <ul class="thr">
   <li> <a href="##">三级目录A</a> </li>
   <li> 
    <a href="##">三级目录B <img class="more1" src="images/more1.png"/></a> 
    <div class="thr_nr">
    <h3> 三级目录B主要内容 </h3>
    <img src="images/aa.png"/>
    </div>
   </li>
   <li> <a href="##">三级目录C</a> </li>
   <li> 
    <a href="##">三级目录D <img class="more1" src="images/more1.png"/></a> 
    <div class="thr_nr">
    <h3> 三级目录D主要内容 </h3>
    <img src="images/bb.png"/>
    </div>
   </li>
   <div class="clear"></div>
   </ul>
  </li>
  <li>  <a href="##">二级目录C</a> </li>
  <li class="e_li"> 
   <a href="##">二级目录D</a> 
   <ul class="thr">
   <li> <a href="##">三级目录A</a> </li>
   <li> <a href="##">三级目录B</a> </li>
   <li> <a href="##">三级目录C</a> </li>
   <li> <a href="##">三级目录D</a> </li>
   <div class="clear"></div>
   </ul>
  </li>
  </ul>
 </li>
 <li> <a href="http://www.jb51.net/jiaoben/369410.html">源码下载</a> </li>
 <li> <a href="http://demo.jb51.net/js/2015/jQuery-czdj-dhcd/">演示地址</a> </li>
 <li> <a href="#">目录E</a> </li>
 <li> 
  <a href="#">目录F <img class="more" src="images/more.png"/></a>
  <ul class="er">
  <li> <a href="##">二级目录A</a> </li>
  <li> <a href="##">二级目录B</a> </li>
  <li> <a href="##">二级目录C</a> </li>
  <li> <a href="##">二级目录D</a> </li>
  </ul>
 </li>
 <div class="clear"></div>
</ul>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<
</body>
</html>

작업 렌더링:

위는 여러분과 공유한 jQuery 수직 다단계 탐색 메뉴 코드입니다.

성명：

이전 기사：easyui Droppable 구성 요소는 배치 효과를 구현합니다.다음 기사：easyui Droppable 구성 요소는 배치 효과를 구현합니다.

jQuery 수직 다단계 탐색 메뉴 코드 Sharing_jquery

관련 기사