ホームページ >ウェブフロントエンド >jsチュートリアル >jquery は最も単純なスライディング メニュー効果を実装します code_jquery
jquery は最も単純なスライディング メニュー効果を実装します code_jquery
- WBOYオリジナル
- 2016-05-16 15:39:491232ブラウズ
この記事の例では、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 プログラミングに役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。