ロールオーバーで背景画像と垂直方向のメニュー

前者の記事では、CSSを使用する方法を説明しましたマウスオーバー効果と垂直メニューをあなたがマウスを移動している項目をマークするために、異なる背景色を使用して、。

我々は、この例を再検討し、拡大して、このメニューの2つの重要な機能追加： 弾丸を使用することで改善されたアクセシビリティとデザインの面で優れたパフォーマンスを。

ここでは、取得したい結果は次のとおりです。

マウスポインタのスクリーンショットの例ではメニューの2番目のリンク上で静止している。

この2つの画像は名前とmenu_1.gifのmenu_2.gifを与えるために例に使用されます。

サイズ（150X22ピクセル）がされている場合には、個々のアイテムに割り当てられたボックス、フォントサイズとパディングの幅に合わせてカスタマイズされています。

私は、レイアウトとそのニーズへの適切な寸法にカスタムイメージを作成する読者を招待。

メニューの描画を開始する、の練習をしましょう​​。 我々は、HTMLコードを分析する。

 <div id="menu">



    



 <UL>



        



 <LI> <a href="#">ページ1 </ A> </ LI>



        



 <LI> <a href="#">ページ2 </ A> </ LI>



        



 <LI> <a href="#">ページ3 </ A> </ LI>



        



 <LI> <a href="#">ページ4 </ A> </ LI>



        



 <LI> <a href="#">ページ5 </ A> </ LI>



    



 </ UL>







 </ DIV>

すべてのメニューは、我々はリンクを含む箇条書きリストを構築しますで、"メニュー"とマークされたボックスになります。

任意のIDと要素の入れ子によってのみ識別に基づいてメニュー項目（リスト、リスト、リンク）、のいずれかにリンクするクラスを割り当てないでください。

適切な発言を伴うCSSは次のとおりです。

 / *一般的にDIVタグ様式化された* /









 P







 {



    



フォントサイズ：10pxの;



    



フォントファミリー：Verdanaの;







 }









 / *メニューの背景とボックスの幅を割り当てる* /









 ＃メニュー







 {



    



背景：＃CCDDEE;



    



幅：150px;







 }









 / *メニューに含まれているULタグからデフォルトのスタイルを削除する* /









 ＃メニューUL







 {



    



マージン：0px 0px 0px 0px;



    



リストスタイルのタイプ：なし;







 }









 /メニューで*、スタイリッシュでリスト* /









 ＃メニューれます







 {



    



マージン：0px 0px 0px 0px;



    



ボーダー底：1pxの実線＃FFFFFF;







 }









 / *は、メニューのリスト内のリンクにスタイルを割り当てます* /









 ＃メニューのLi、それらの：ホバー







 {



    



表示：ブロック;



    



位置：相対;



    



テキスト装飾：なし;



    



色：＃192939;



    



フォントの太さ：太字;



    



パディング：5pxの5PX 5PX 5PX;







 }









 / *デフォルトでは、リンクの背景を設定し、マウスオーバー* /









そこに＃メニュー







 {



    



背景画像：のURL（menu​​_1.gif）;







 }







ホバー：＃メニューになります







 {



    



背景画像：のURL（menu​​_2.gif）;







 }

上述したように、要素の入れ子の操作は、この様式で表示されるだけ弾丸がIDを持つボックスの内側の入れ子の結果として、メニューになっていることを確認"メニュー。"

サイトの他のすべての弾丸は、デフォルトの彼らの方法を持っているか、または明示的にCSSを経由して割り当てになります。