ホームページ > 記事 > ウェブフロントエンド > jQuery_jquery によって実装された Web ページの垂直メニュー効果コード
jQuery_jquery によって実装された Web ページの垂直メニュー効果コード
- WBOYオリジナル
- 2016-05-16 15:42:311063ブラウズ
この記事の例では、jQuery によって実装された Web ページの垂直メニュー効果コードについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、jQuery に基づいた縦型 Web ページ メニュー コードであり、バックグラウンド管理で使用できる、折りたたみおよび展開可能な 2 番目の Web ページ メニューを左側に表示するように変更します。 jqueryを追加するとメニューの展開・縮小機能が実現できて便利ですし、アニメーション効果も追加されるので互換性も良好です。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/jquery-v-web-menu-style-codes/
具体的なコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>
<style>
body{font-family: Helvetica, Arial, sans-serif; font-size: 0.9em;}
p{line-height: 1.5em;}
ul#menu, ul#menu ul{list-style-type:none; margin: 0; padding: 0; width: 15em;}
ul#menu a{display: block; text-decoration: none;}
ul#menu li{margin-top: 1px;}
ul#menu li a{background: #333; color: #fff; padding: 0.5em;}
ul#menu li a:hover{background: #000;}
ul#menu li ul li a{background: #ccc; color: #000; padding-left: 20px;}
ul#menu li ul li a:hover{background: #aaa; border-left: 5px #000 solid; padding-left: 15px;}
.code{border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0;}
.code code{display: block; padding: 3px; margin-bottom: 0;}
.code li{background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em;}
.indent1{padding-left: 1em;}
.indent2{padding-left: 2em;}
</style>
<title>网页竖排菜单jQuery版</title>
<!--[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]-->
</head>
<body>
<ul id="menu">
<li>
<a href="#">Weblog工具</a>
<ul>
<li><a href="#">PivotX</a></li>
<li><a href="#">WordPress</a></li>
</ul>
</li>
<li>
<a href="#">程序语言</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">PERL</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">C#</a></li>
</ul>
</li>
<li>
<a href="#">Cool Stuff</a>
<ul>
<li><a href="#">Apple</a></li>
<li><a href="#">Maitianquan</a></li>
<li><a href="#">XBOX360</a></li>
<li><a href="#">Nifengla</a></li>
<li><a href="#">Nintendo</a></li>
</ul>
</li>
</ul>
</body>
</html>
この記事が皆さんの jquery プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。