jquery は最も単純なスライディングメニュー効果を実装します code

jquery は最も単純なスライディングメニュー効果を実装します code_jquery

WBOY

リリース： 2016-05-16 15:39:49

オリジナル

1202 人が閲覧しました

この記事の例では、jquery によって実装された最も単純なスライディングメニュー効果コードについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは最も単純な jQuery ドロップダウンメニュー、jQuery コード実装です。メニューを変更する必要はあまりありません。いくつかの基本的な実装だけです。特に、jQuery を学習するための良い参考例です。ここでは jQuery パッケージライブラリを使用します。ファイル jquery.tools.min.js が外部からインポートされるため、読み込みに失敗するため効果が見られない場合があります。この問題は Web ページを更新することで解決できます。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

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

具体的なコードは次のとおりです:

<!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>

ログイン後にコピー

この記事が皆さんの jQuery プログラミングに役立つことを願っています。