jquery implementiert den Slide-Down-Menüeffekt der sekundären Navigation, der nach unten gleitet

jquery implementiert den Slide-Down-Menüeffekt der sekundären Navigation, der nach unten gleitet_jquery

WBOY

Freigeben： 2016-05-16 15:43:04

Original

1428 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie JQuery den Slide-Down-Menüeffekt der sekundären Navigation implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Slide-Down-Menüeffekt auf einer Webseite, der von jQuery und JavaScript implementiert wird. Das farbige ist das Hauptmenü der ersten Ebene. Nach dem Klicken wird es erweitert und zum Untermenü der zweiten Ebene verschoben Das Hauptmenü wird erneut angezeigt, und das Untermenü wird eingeblendet. In Bezug auf die Funktionen, die das Menü anzeigen kann, eignet es sich für die Produktklassifizierung auf Unternehmenswebsites, die Spaltennavigation in Nachrichtenartikeln usw. Derzeit unterstützt dieses Menü zwei Ebenen Sie können weitere Menüebenen selbst erweitern.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<title>向下滑动展开的JS下滑菜单</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}
ul#sidemenu a{display: block;text-decoration: none;}
ul#sidemenu li{margin: 5px auto;}
ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}
ul#sidemenu li a: hover{background: #000;}
ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}
ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}
</style>
</head>
<body>
<div class="leftbar">
 <ul id="sidemenu">
  <li><a href="#" >+ 网页菜单类素材一</a>       
   <ul>
     <li><a href="#">下滑菜单</a></li>
     <li><a href="#">折叠菜单</a></li>
     <li><a href="#">垂直菜单</a></li>
    </ul>
  </li>
  <li><a href="#" >+ 编程源码类资源</a>
   <ul>
    <li><a href="#">ASP源码</a></li>
    <li><a href="#">Delphi源码</a></li>
    <li><a href="#">vc++源码</a></li>
    <li><a href="#">VB源码</a></li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function initMenu() {
 $('#sidemenu ul').hide();
 $('#sidemenu ul:first').hide();
 $('#sidemenu li a').click(
 function() {
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  return false;
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
  $('#sidemenu ul:visible').slideUp('normal');
  checkElement.slideDown('normal');
  return false;
  }
  }
 );
 }
$(document).ready(function() {initMenu();});
</script>
</body>
</html>

Nach dem Login kopieren

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