suchen

Heim >Web-Frontend >js-Tutorial >jquery implementiert den Slide-Down-Menüeffekt der sekundären Navigation, der nach unten gleitet_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:43:041436Durchsuche

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>

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：Einfacher Code für den Menüeffekt mit verschiebbaren Registerkarten für Webseiten, implementiert in jsNächster Artikel：Einfacher Code für den Menüeffekt mit verschiebbaren Registerkarten für Webseiten, implementiert in js

In Verbindung stehende Artikel

Mehr sehen