JQuery 伸縮ナビゲーション演習 example_jquery

最近、JQuery を学習していて、このナビゲーションを作成しようとしました

ダウンロード: コード

コードをコピー コードは次のとおりです。

"ナビゲーター"

ナビゲーション カード 1

ul class= "nav1">

• サブプロジェクト 1


• サブプロジェクト 3
• サブプロジェクト 4

ナビゲーション カード 3

サブプロジェクト 1

サブプロジェクト 3

コードは次のとおりです。


/**
* 著者 LY 2013-11-11 22:30
**/

* { margin :
パディング: 0;

フォントファミリー: "Microsoft Yahei","Arial" } .navigator { 幅: 180px; マージン; -top: 30px; margin-left: 30px;

border-top: 10px ソリッド #ddd;

border-left: 3px ソリッド #ddd;
ボーダー右: 3px ソリッド #ddd;
背景: #ddd;
}
.tabs {
リストスタイル:

}

.tabs li {
クリア: 両方;
オーバーフロー: 自動;

.tabs li h3 {
マージン: 0; 🎜>フォントサイズ: 14px;
行の高さ: 40px;
幅: 180px;背景: #07f;
ボーダー: 1px ソリッド #ccc;
.tabs li:last-child h3 {
ボーダー:なし; >}
.tabs li h3.current {
background: #6af;
}
.tabs li ul {
margin-left: auto;
margin-right: auto;
幅: 160px;
高さ: 0px;
リストスタイル: 非表示;
}
.tabs li ul li {
高さ: 30px;
行の高さ: 30px;
背景: #eee;
ボーダー: 1px ソリッド
}






コードをコピー


コードは次のとおりです:


$(document ).ready (function(){
$(".nav1").css("height","160px");
$(".tabs li h3:first").addClass("current" );
$(".tabs li h3").click(function() {
$(".tabs li h3").removeClass("current");
$(this).addClass ("current" ");
$(".tabs li ul").animate({height:"0"},"fast");
$(this).next().animate({height :"160 "},"遅い");
});
});