jQueryはフェードアウト可能な展開可能なカスケードメニューを実現
1817 ワード
多くのサイトのナビゲーションメニューの場所では、展開可能なカスケードメニューが多く採用されています.メインメニューをクリックすると下のサブメニューが展開され、もう一つ
ここでは、リモートのWebページをロードでき、画面をリフレッシュする必要がなく、次に、ダイナミックな効果のあるフェードアウトされたカスケードメニューの
jQueryの実現.
まずはHTMLのコード
そしてJSファイル
次はCSSファイルです
ダイナミックに木の構造を実現し、ダイナミックな効果もあり、使いやすいと言えます.
ここでは、リモートのWebページをロードでき、画面をリフレッシュする必要がなく、次に、ダイナミックな効果のあるフェードアウトされたカスケードメニューの
jQueryの実現.
まずはHTMLのコード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> </title>
<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/Ajax/js/menu.js"></script>
<link rel="stylesheet" href="/Ajax/css/menu.css" type="text/css"></link>
</head>
<body>
<ul>
<a href="#"> </a>
<li> 1</li>
<li> 2</li>
</ul>
<ul>
<a href="#"> </a>
<li> 1</li>
<li> 2</li>
</ul>
</body>
</html>
そしてJSファイル
/* ， */
// ， ul onclick
$(function(){
$("a").click(function(){
// ul $(this)
var list = $(this).parent().children("li");
list.toggle("slow");
})
});次はCSSファイルです
li{
list-style: none;
margin-left: 18px;
display: none;
}
ul{
/* ul */
cursor: pointer;
}
a:LINK {
text-decoration: none;
}ダイナミックに木の構造を実現し、ダイナミックな効果もあり、使いやすいと言えます.