最近、JQuery を学習していて、このナビゲーションを作成しようとしました
ダウンロード: コード
伸縮式ナビゲーション
"ナビゲーター"
ナビゲーション カード 1
ul class= "nav1">
- サブプロジェクト 1
- サブプロジェクト 3
- サブプロジェクト 4
ナビゲーション カード 3
サブプロジェクト 1 サブプロジェクト 3 コードは次のとおりです。
/**
* 著者 LY 2013-11-11 22:30
**/
* {
margin :
パディング: 0;
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 "},"遅い");
});
});