suchen

Heim >Web-Frontend >js-Tutorial >jquery implementiert den einfachsten Schiebemenüeffekt code_jquery

jquery implementiert den einfachsten Schiebemenüeffekt code_jquery

WBOY
WBOYOriginal
2016-05-16 15:39:491213Durchsuche

Das Beispiel in diesem Artikel beschreibt den einfachsten von jquery implementierten Sliding-Menü-Effektcode. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist das einfachste jQuery-Dropdown-Menü, die Implementierung des jQuery-Codes. Es gibt nicht viel zu ändern am Menü, nur einige grundlegende Implementierungen. Insbesondere ist es ein gutes Referenzbeispiel für das Erlernen von jQuery. Hier wird eine JQuery-Paketbibliothek verwendet Die Datei jquery.tools.min.js wird während des Tests möglicherweise nicht angezeigt, da das Laden nicht erfolgreich war. Das Problem kann behoben werden.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-simple-nav-cha-menu-style-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>下拉滑出的菜单</title>
<script src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
 $("#list li").hover(function() {
 $(this).children("ul").slideDown();
 }, function() {
 $(this).children("ul").slideUp();
 });
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none}
#list{font-size:14px;width:500px;margin:55px auto}
#list ul{font-size:12px;display:none}
#list .li{float:left;width:100px;margin-right:1px;background:orange}
</style>
</head>
<body>
<ul id="list">
 <li class="li">
  <a href="#">游戏</a>
  <ul>
   <li><a href="#">单机游戏</a></li>
   <li><a href="#">网络游戏</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">音乐</a>
  <ul>
   <li><a href="#">流行歌曲</a></li>
   <li><a href="#">摇滚</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">编程语言</a>
  <ul>
   <li><a href="#">Javascript</a></li>
   <li><a href="#">PHP</a></li>
  </ul>
 </li>
</ul>
</body>
</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung 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：Code für das Back-End-Menü für die linke Verwaltung, implementiert durch js_javascript-KenntnisseNächster Artikel：Code für das Back-End-Menü für die linke Verwaltung, implementiert durch js_javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen