メニューバー Widget のカスタマイズ
"SpryMenuBarHorizontal.css" ファイルと "SpryMenuBarVertical.css" ファイルには、メニューバー Widget のデフォルトのスタイル設定が用意されています。 ただし、該当する CSS ルールを変更することによって Widget をカスタマイズできます。 "SpryMenuBarHorizontal.css" ファイルと "SpryMenuBarVertical.css" ファイルの CSS ルールでは、メニューバーの HTML コードの関連するエレメントと同じクラス名が使用されるため、メニューバー Widget のさまざまなセクションに対応する CSS ルールを簡単に把握できます。 さらに、"SpryMenuBarHorizontal.css" ファイルと "SpryMenuBarVertical.css" ファイルには、マウスオーバービヘイビアやクリックビヘイビアなど、Widget に関連するビヘイビアのクラス名が含まれています。
Widget の水平スタイルシートまたは垂直スタイルシートは、カスタマイズを開始する前に Web サイトに配置しておく必要があります。 詳細については、ファイルの準備を参照してください。
メニューバー Widget のスタイル設定 (一般的な方法)
メニューバー Widget のスタイルを設定するには、メニューバー Widget コンテナ全体のプロパティを設定するか、Widget の各コンポーネントのプロパティを個別に設定します。
- "SpryMenuBarHorizontal.css" ファイルまたは "SpryMenuBarVertical.css" ファイルを開きます。
- メニューバーの変更する部分の CSS ルールを見つけます。 たとえば、最上位レベルのメニュー項目の背景色を変更するには、CSS ファイルの ulMenuBarHorizontal a ルールまたは ulMenuBarVertical a ルールを編集します。
- CSS を変更してファイルを保存します。
CSS ファイルおよび HTML コードのスタイル関連のクラス名を独自のクラス名に置き換えることができます。 置き換えても Widget の機能には影響しません。
"SpryMenuBarHorizontal.css" ファイルと "SpryMenuBarVertical.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; プロパティおよび値を削除します。