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.
