このチュートリアルでは、 JQueryとCSS を使用してクールな動的メニューを作成する方法を段階的に説明します。 jQuery の「記述量を減らし、実行量を増やす」機能は誰でもよく知られており、JS プログラミングの経験が豊富でない人でも、jQuery が提供する API を使用してその使用方法をすぐに学ぶことができます。もちろん、経験がある場合には、それをお勧めします。 jQuery の各主要関数の実装原理を理解することができます。他のことについては触れずに、それを使用してメニューの魔法の効果を実現する方法を見てみましょう。
.jpg)
クリックしてデモを表示したり、ソース コードをダウンロードしたりできます。
ステップ 1 - HTML 構造
メニューの HTML コードを見てください。これは通常のメニュー コードと変わりません。
<div id="メニュー" クラス="メニュー">
<ul>
<li><a href="javascript:;">ホーム</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">JavaScript</a></li>
<li><a href="javascript:;">リソース</a></li>
<li><a href="javascript:;">チュートリアル</a></li>
<li><a href="javascript:;">概要</a></li>
</ul>
</div>
重要なのは、スクリプトを使用して各アンカー ポイント (要素) に複数の個別のレイヤーを作成し、マウスをホバーしたときに個別にアニメーション化するように制御できるようにすることです。これを行うには、DOM がロードされるときに DOM の構造を変更して、各アンカー コードが次のようになるようにする必要があります。
<a href="javascript:;">
<span class="out">ホーム</span>
<span class="bg"></span>
<span class="over">ホーム</span>
</a>
元の各アンカー ポイントのコンテンツは 2 つの Span 要素 (.out と .over) に追加され、もう 1 つの Span 要素 (.bg) は背景画像レイヤーです。
DOM 構造の変更方法については、手順 3 で JS コードを説明します。
ステップ 2 - CSS スタイル
この例では、背景画像ありと背景画像なしの 2 つのスタイルが示されています (詳細についてはデモを参照してください)。独自のスタイルを自由にカスタマイズして、より魅力的なメニューをデザインすることもできます。 :
/* 以下はメニューの基本スタイルです
*/.menuulli{
フロート: 左;
/* メニューのサブ要素の内容は表示されません */
オーバーフロー: 非表示;
/* 以下、一部コードを省略しています*/
}
.menu ul li a {
/* 相対位置である必要があります */
位置: 相対的;
表示: ブロック;
幅: 110ピクセル;
/* 以下、一部コードを省略しています*/
}
.menu ul li a span {
/* すべてのレイヤーは絶対位置を使用します */
位置: 絶対;
左: 0;
幅: 110ピクセル;
}
.menu ul li a span.out {
上: 0px;
}
.menu ul li a span.over,.menu ul li a span.bg {
/* 最初は、隠し効果を実現するために、.over レイヤーと .bg レイヤーは a 要素に対して -45 ピクセルです*/
上: -45px;}/
*以下は背景画像の使用例です*/
#メニュー {
/*メニューの背景*/
背景:url(bg_menu.gif) スクロール 0 -1px 繰り返し x;
ボーダー:1px ソリッド #CCC;}
#menu ul li a {
色: #000;
}
#menu ul li a span.over {
色: #FFF;
}
#メニューウルリスパン.bg {
/* 高さと背景画像を指定します*/
高さ: 45ピクセル;
背景: URL(bg_over.gif) 中央中央 リピートなし;
}
CSS スタイルを自分でカスタマイズすることもできます。スタイルの簡易バージョンもここで提供されています (デモを表示)