複合メニュー・スタイルのカスタマイズ

MenuComposite.cls の XData Style ブロックに、CSS スタイルを追加できます。

次のように、MenuComposite.cls の XData Style ブロックを更新して、クラスをコンパイルします。


XData Style
{
<style type="text/css">
/*Styles for components in this composite component*/
  .title {
          background: #C5D6D6;
          color: black;
          font-size: 1.5em;
          font-weight: bold;
          padding: 5px;
          border-bottom: 1px solid black;
          text-align: center;
    }
/* Default style overrides*/
/* Override default menu item style */
  a.menuItem {
         font-size: 0.9em;
         color: black;
   }
  a.menuItemDisabled {
        font-size: 0.9em;
        color: black;
  }
</style>
}

このスタイル定義について、以下のことに注意してください。

最初の定義は、<html> コンポーネントのスタイルを制御します。セレクタとして、.title が使用されます。これは、<html> 要素の id 値と合致します。
残りの CSS 定義は、menuItem コンポーネントの既定のスタイルをオーバーライドします。