nifty-gui

<menu id="mainMenu" font="menu.fnt" childlayout="vertical" align="center" valign="center" height="50%">
  <effect>
    <onstartscreen name="hide" length="500" inherit="true" startdelay="1000"/>
    <onstartscreen name="fade" startcolor="#fff0" endcolor="#ffff" length="1000" startdelay="500" inherit="true"/>
    <onendscreen name="fade" startcolor="#ffff" endcolor="#fff0" length="500" inherit="true"/>
  </effect>
  <menuitem id="helloWorld" text="Hello World" align="center">
    <interact onclick="helloWorld()"/>
    <hover width="200%" falloffconstraint="horizontal"/>
    <effect>
      <onhover name="hint" hoverwidth="200%" width="200%" targetelement="hintElement" text="Run the Hello World Example"/>
      <onfocus name="pulsate" hoverwidth="200%" width="200%" period="500" startcolor="#3c000000" endcolor="#ff7c00ff" timetype="infinite" cycle="false"/>
    </effect>
  </menuitem>
  <menuitem id="textfield" text="Textfield Example" align="center">
    <interact onclick="textField()"/>
    <hover width="200%" falloffconstraint="horizontal"/>
    <effect>
      <onhover name="hint" hoverwidth="200%" width="200%" targetelement="hintElement" text="Run the Textfield Example"/>
      <onfocus name="pulsate" hoverwidth="200%" width="200%" period="500" startcolor="#3c000000" endcolor="#ff7c00ff" timetype="infinite" cycle="false"/>
    </effect>
  </menuitem>
  <menuitem id="exit" text="Exit" align="center">
    <interact onclick="exit()"/>
    <hover width="200%" falloffconstraint="horizontal"/>
    <effect>
      <onhover name="hint" hoverwidth="200%" width="200%" targetelement="hintElement" text="Leave the Examples"/>
      <onfocus name="pulsate" hoverwidth="200%" width="200%" period="500" startcolor="#3c000000" endcolor="#ff7c00ff" timetype="infinite" cycle="false"/>
    </effect>
  </menuitem>
</menu>

<menu id="mainMenu" font="menu.fnt">
  <menuitem id="helloWorld" text="Hello World">
    <interact onclick="helloWorld()"/>
  </menuitem>
  <menuitem id="textfield" text="Textfield Example">
    <interact onclick="textField()"/>
  </menuitem>
  <menuitem id="exit" text="Exit">
    <interact onclick="exit()"/>
  </menuitem>
</menu>

<!-- main menu style -->
<style id="menu">
  <attributes childLayout="vertical" align="center" valign="center" height="50%"/>
  <effect>
    <onStartScreen name="hide" length="500" inherit="true" startDelay="1000"/>
    <onStartScreen name="fade" startColor="#fff0" endColor="#ffff" length="1000" startDelay="500" inherit="true"/>
    <onEndScreen name="fade" startColor="#ffff" endColor="#fff0" length="500" inherit="true"/>
  </effect>
</style>
 
<!-- menu item style -->
<style id="menu-item">
  <attributes align="center"/>
  <hover width="200%" falloffConstraint="horizontal"/>
  <effect>
    <onFocus name="pulsate" hoverWidth="200%" width="200%" period="500" startColor="#3c000000" endColor="#ff7c00ff" timeType="infinite" cycle="false"/>
  </effect>
</style>

<panel id="first" backgroundcolor="#f00f"> ... </panel>
<panel id="second" backgroundcolor="#f00f"> ... </panel>
<panel id="third" backgroundcolor="#f00f"> ... </panel>
...
<panel id="fortytwo" backgroundcolor="#f00f"> ... </panel>

<style id="my-panel-style">
  <attributes backgroundColor="#f00f"></attributes>
</style>
<panel id="first" style="my-panel-style"> ...</panel>