suchen

Heim >Web-Frontend >js-Tutorial >Baummenü-Effektcode basierend auf jquery_jquery

Baummenü-Effektcode basierend auf jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:40:291162Durchsuche

Das Beispiel in diesem Artikel beschreibt den Baummenü-Effektcode basierend auf JQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Baummenücode, der auf JQuery basiert. Klicken Sie auf den Menüpunkt, um das entsprechende sekundäre Menü nach unten zu verschieben. Der Effekt ist reibungslos und natürlich.

Schauen wir uns die Screenshots des Laufeffekts an:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery的树形菜单代码 </title>
<style>
body { font-family:"宋体"; font-size: 12px; line-height: 1.5em; color:#7FB0C8; padding:0; margin:0; background: #336699;}
ul,ol,li,dl,dt,dd { margin:0; padding:0; list-style-type:none;}
h1,h2,h3,form,input,iframe,span { margin:0; padding:0;} 
a { color:#7FB0C8;}
a:link {color: #7FB0C8; TEXT-DECORATION: none;}
a:visited {color: #7FB0C8; TEXT-DECORATION: none;}
a:hover {color: #fff; TEXT-DECORATION: none;}
.white { color:#fff;}
.white a:link {color: #fff; TEXT-DECORATION: none;}
.white a:visited {color: #fff; TEXT-DECORATION: none;}
.white a:hover {color: #73E1F5; TEXT-DECORATION: none;}
/* 树形菜单开始 */
.close { float:right; clear:right; font-size:12px; font-weight:normal; cursor:pointer; padding-right:10px;}
.title { font-size:14px; color:#fff; margin-bottom:10px; padding-left:5px; width:290px;}
.menu { width:290px; height:330px; overflow-y:auto; overflow-x:hidden; margin-bottom:10px;}
.menu { SCROLLBAR-FACE-COLOR: #002537; SCROLLBAR-HIGHLIGHT-COLOR: #002537; SCROLLBAR-SHADOW-COLOR: #0E6893; SCROLLBAR-3DLIGHT-COLOR: #0E6893; SCROLLBAR-ARROW-COLOR: #fff; SCROLLBAR-TRACK-COLOR: #053d58;SCROLLBAR-DARKSHADOW-COLOR: #002537; SCROLLBAR-BASE-COLOR: #01152a;}
.l1 { background:#000; font-size:13px; padding:5px 0 0 30px; height:20px; margin-bottom:5px; cursor:pointer;}
.slist { margin:0 0 5px 0; display:none;}
.l2 { padding:0 0 0 35px; font-size:13px;}
.l2 a { padding:6px 0 0 5px; width:230px; height:21px; display:block;} 
.currentl2 a,.l2 a:hover { background:#1E5A82; color:#fff;}
.sslist { background:#156890; width:235px; overflow:hidden; margin:0 0 5px 35px; display:none;}
.l3 a { padding:6px 0 0 5px; width:230px; height:20px; display:block;} 
.currentl3 a,.l3 a:hover { color:#fff; font-weight:bold;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script>
// 树状菜单
$(document).ready(function(){
 $(".l1").toggle(function(){
  $(".slist").animate({height: 'toggle', opacity: 'hide'}, "slow");
 $(this).next(".slist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
 },function(){
  $(".slist").animate({height: 'toggle', opacity: 'hide'}, "slow");
   $(this).next(".slist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
 });
 $(".l2").toggle(function(){
 $(this).next(".sslist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
 },function(){
   $(this).next(".sslist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
 });
 $(".l2").click(function(){
 $(".l3").removeClass("currentl3");
 $(".l2").removeClass("currentl2");
 $(this).addClass("currentl2");
 }); 
 $(".l3").click(function(){
 $(".l3").removeClass("currentl3");   
 $(this).addClass("currentl3");
 }); 
 $(".close").toggle(function(){
 $(".slist").animate({height: 'toggle', opacity: 'hide'}, "fast"); 
 $(".sslist").animate({height: 'toggle', opacity: 'hide'}, "fast"); 
  },function(){
 $(".slist").animate({height: 'toggle', opacity: 'show'}, "fast"); 
 $(".sslist").animate({height: 'toggle', opacity: 'show'}, "fast"); 
 }); 
});
</script>
</head>
<body>
<h1 class="title"><span class="close">全部收起/展开</span>树形菜单</h1>
<div class="menu">
 <h1 class="l1">一级菜单1</h1>
 <div class="slist">
 <h2 class="l2"><a href="javascript:function()">二级菜单1</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="javascript:function()">·三级菜单1</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单1</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单1</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单1</a></li>
 </ul>
 <h2 class="l2"><a href="javascript:function()">二级菜单2</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="javascript:function()">·三级菜单2</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单2</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单2</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单2</a></li>
 </ul>
 <h2 class="l2"><a href="javascript:function()">二级菜单3</a></h2>
 </div>
 <h1 class="l1">一级菜单2</h1>
 <div class="slist">
 <h2 class="l2"><a href="javascript:function()">二级菜单2</a></h2>
 <h2 class="l2"><a href="javascript:function()">二级菜单2</a></h2>
 <h2 class="l2"><a href="javascript:function()">二级菜单2</a></h2>
 </div>
 <h1 class="l1">一级菜单3</h1>
 <div class="slist">
 <h2 class="l2"><a href="javascript:function()">二级菜单3</a></h2>
 <h2 class="l2"><a href="javascript:function()">二级菜单3</a></h2>
 <h2 class="l2"><a href="javascript:function()">二级菜单3</a></h2>
 </div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery Horizontal löschen Fokusbild Spezialeffektcode Sharing_jqueryNächster Artikel：jQuery Horizontal löschen Fokusbild Spezialeffektcode Sharing_jquery

In Verbindung stehende Artikel

Mehr sehen