|
|
メニューバー Widget のカスタマイズ
プロパティインスペクタでは、メニューバー Widget の簡単な編集は可能ですが、カスタマイズされたスタイル設定タスクはサポートされません。 メニューバー Widget に関する CSS ルールを変更すると、自由にスタイル設定したメニューバーを作成できます。 高度なスタイル設定タスクの詳細については、www.adobe.com/go/learn_dw_sprymenubar_custom_jp を参照してください。
次のトピックに登場する CSS ルールは、すべて SpryMenuBarHorizontal.css ファイルまたは SpryMenuBarVertical.css ファイルに格納された初期設定ルールです。 Spry メニューバー Widget を作成すると、Dreamweaver によってサイトの SpryAssets フォルダにこれらの CSS ファイルが保存されます。 これらのファイルには、Widget に適用されるさまざまなスタイルに関する、役に立つコメント付き情報も含まれています。  メニューバー Widget に関するルールは、対応する CSS ファイルで直接編集することもできますが、[CSS スタイル] パネルを使用してメニューバーの CSS を編集することもできます。 [CSS スタイル] パネルでは、Widget のさまざまな部分に割り当てられた CSS クラスを見つけやすくなっています。特に [現在] モードがこの点に優れています。 メニュー項目のテキストスタイルの変更<a> タグに関連付けられた CSS には、テキストスタイルに関する情報が含まれています。 <a> タグには、さまざまなメニュー状態に関連するテキストスタイルクラス値も関連付けられています。
 メニュー項目のテキストスタイルを変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定値を変更します。
変更するスタイル
|
垂直または水平メニューバーに関する CSS ルール
|
関連するプロパティおよび初期設定値
|
|---|
初期設定テキスト
|
ul.MenuBarVertical a、ul.MenuBarHorizontal a
|
color: #333; text-decoration: none;
|
マウスポインタが上にあるときのテキストの色
|
ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover
|
color: #FFF;
|
フォーカスがあるときのテキストの色
|
ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus
|
color: #FFF;
|
マウスポインタが上にあるときのメニューバー項目の色
|
ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover
|
color: #FFF;
|
マウスポインタが上にあるときのサブメニュー項目の色
|
ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
|
color: #FFF;
|
メニュー項目の背景色の変更<a> タグに関連付けられた CSS には、メニュー項目の背景色に関する情報が含まれています。 <a> タグには、さまざまなメニュー状態に関連する背景色クラス値も関連付けられています。
メニュー項目の背景色を変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定値を変更します。
変更する色
|
垂直または水平メニューバーに関する CSS ルール
|
関連するプロパティおよび初期設定値
|
|---|
初期設定の背景
|
ul.MenuBarVertical a、ul.MenuBarHorizontal a
|
background-color: #EEE;
|
マウスポインタが上にあるときの背景色
|
ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover
|
background-color: #33C;
|
フォーカスがあるときの背景色
|
ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus
|
background-color: #33C;
|
マウスポインタが上にあるときのメニューバー項目の色
|
ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover
|
background-color: #33C;
|
マウスポインタが上にあるときのサブメニュー項目の色
|
ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
|
background-color: #33C;
|
メニュー項目の寸法の変更メニュー項目の寸法を変更するには、メニュー項目の li および ul タグの幅プロパティを変更します。
- ul.MenuBarVertical li または ul.MenuBarHorizontal li ルールを見つけます。
- 幅プロパティを必要に応じて変更します。または、プロパティを auto に変更して固定幅を削除し、このルールにプロパティおよび値 white-space: nowrap; を追加します。
- ul.MenuBarVertical ul または ul.MenuBarHorizontal ul ルールを見つけます。
- 幅プロパティを必要に応じて変更します。または、プロパティを auto に変更して固定幅を削除します。
- ul.MenuBarVertical ul li または ul.MenuBarHorizontal ul li ルールを見つけます。
- このルールにプロパティ float: none; および background-color: transparent; を追加します。
- プロパティおよび値 width: 8.2em; を削除します。
サブメニューの位置の設定Spry メニューバーのサブメニューの位置は、サブメニュー ul タグのマージンプロパティによって制御されます。
- ul.MenuBarVertical ul または ul.MenuBarHorizontal ul ルールを見つけます。
- margin: -5% 0 0 95%; の初期設定値を必要に応じて変更します。
|
