Spry
を使用したメニューバーの作成マウスポインターをメニューバーの上に置くと、サブメニューが表示されます。 メニュー barsallowメニューオプションの多くは、きれいな、整頓されたmainmenuからアクセスすることができます。 訪問者がメニューオプションの上にマウスポインタを置いたときに提供する対話性は、webページに動的要素を追加します。
メニューバーのウィジェットは、水平または垂直にすることができます:
- 垂直メニューバーは、通常、ページの左側にあるフレーム、テーブル列、または他のレイアウトオブジェクト（DIVやAP DIVなど）で整列されます。
- 水平メニューバーは、通常、ページの上部に配置され、レイアウトオブジェクトに挿入されずにそこに配置できます。
メニューバーウィジェットを挿入するためのSpryウィジェットを使用すると、サブメニューの二つのレベルでメニューバーを生成することができます。 したがって、ユーザーはメニューオプションをクリックし、新しいオプションセットでサブメニューを表示し、それらのオプションのいずれかを選択し、第二のサブメニューから選択することができます。
メニューバーウィジェットを生成するには、次の手順に従います:
- ウィジェットが挿入されるページを保存します。
- 挿入>Spry>Spryメニューバーを選択します。 Spryメニューバーのダイアログボックスが表示されたら、水平または垂直の形式を選択します。
- メニューバーウィジェットを生成した後、プロパティインスペクタでいくつかの基本的なメニュー barpropertiesを定義できます。 プロパティインスペクタの左側にあるメニュー項目またはサブメニュー項目を選択し、好きなように変更します（図4参照）。
- テキストボックスに、メニューに表示されるテキストを入力します。
- リンクボックスに、項目がクリックされたときに開くリンクを入力します。
- タイトルボックスに、ユーザーがメニューオプションの上にマウスポインタを置いたときにブラウザウィンドウに表示されるアクセシビリティテキストを入力します。
- 同じブラウザウィンドウでリンクを開くには、ターゲットボックスを空のままにするか、新しいブラウザウィンドウでリンクを開くには_blankを入力し
- 新しいメニュー項目を追加または削除するには、メニューまたはサブメニュー（またはサブサブメニュー）列の上にあるプラス（+）およびマイナス（-）ボタンを使用します。 メニュー項目の順序を変更するには、必要に応じて[項目を上に移動]ボタンと[項目を下に移動]ボタンを使用します。
図4プロパティインスペクタのメニューバーのオプションのレベルを定義します。
メニューバーウィジェットを作成または選択すると、プロパティインスペクタにスタイルをオフにするボタンが表示されます。 スタイルをオフにしても、ブラウザーでのスタイルのレンダリング方法には影響しませんが、Documentwindowでの書式設定をオフにします。 CSSスタイルパネルを使用して、選択されていないメニューバーのさまざまなメニューバープロパティの書式を調整できます。
すべてのメニューバーは、少なくともダースのCSSスタイルを生成します。 これらのCSSstylesのほとんどは、ユーザーがメニューオプションの上にマウスポインタを置いたときに表示されるメニューとサブメニューの位置とサイズを定義 これらのメニューのデフォルトの位置は通常問題なく、調整する必要はありません。 あなたは、独自のリンクやテキストを定義することにより、カスタマイズされたメニューバーを作成し、テキストと背景色をカスタマイズすることによ
CSSスタイルオプションの中には、メニューバーの比較的目立たない要素を制御するものがありますが、それらはすべてCSSスタイルパネルで編集できます。 メニューバーウィジェットに関連付けられているスタイルを編集するには、SpryMenuBarHorizontalを展開して、このスタイルシートに関連付けられているクラススタイルのリス CSSスタイルパネルの上部でこれらのクラススタイルの1つを選択すると、CSSスタイルパネルの下半分でそのスタイルのプロパティを編集できます。
メニューバーの背景やテキストの色を変更するには、スタイルを選択します。MenuBarHorizontal a(垂直メニューバーの場合,ul.メニューバー a）。 CSSスタイルパネルでスタイルを選択した状態で、CSSスタイルパネルの下半分のbackground-color swatchボックスを使用して新しい背景色を選択し、color swatchを使用してフォ
図5メニューバーのテキストの色を変更する。
別のオプションは、次の項目を使用して、ホバーオーバーホリゾンタルメニューオプションの背景とテキストの色を変更することです:
- ウル…メニューバー
- MenuBarHorizontal a.MenuBarItemSubmenuHover
- ul.MenuBarHorizontal a.MenuBarSubmenuVisible
垂直メニューバーのスタイルは似ていますが、スタイル名にhorizontalの代わりに垂直があります。
あなたが見始めているように、Spryメニューバーは多くの、多くのカスタマイズ可能な要素を提供しています。 最良の結果を得るには、実験してください。 基本的には、プロパティインスペクタでメニューバーの内容を編集するか、生成された多数のCSSスタイルのいずれかを選択してCSS Stylespanelで編集します。
さて、あなたは今、あなた自身の上にいます！ これらや他のSprywidgetsを楽しんでください。 そしてtouchandのtostayを覚えなさい私にそれらがあなたの場所でいかに働いているか知らせなさい。