SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Menu

 

Menus and elaborate interface elements can be created by combining drawers, masks and other basic SlickBoard features.

To create menus that overlap other web page elements, use <div> as described on the Overlapping Elements page.

The below example shows a simple menu that opens only if clicked, and closes if a menu item is selected or if the mouse is moved away. This basic construction can be customized to add rollover, colors, round corners, shadows, bevels, etc. Use your preferred scripting language to build complex menus with custom functions.

Tip: To create a menu quickly, design it as it looks when it is expanded, test it, and then apply a drawer and a mask to the moving part.

 

Example

<slickboard>
   
   <!-- an object encloseing the menu to offset it anywhere on the board -->
   <object offset_x='200' offset_y='50'>
     
      <!-- the menu title, which is a button that opens the menu drawer -->
      <rect  x='0' y='0' width='100' height='20' fill_color='888888' state='hit' />
      <text  x='0' y='0' width='100' height='20' align_h='center'>Menu</text>
      <action><item type='drawer_toggle' target='menu_body' /></action>
      
      <!-- the mask that hides menu_body when retracted -->
      <object id='menu_mask'>
         <rect  x='0' y='20' width='100' height='60' />
      </object>
      
      
      <!-- the menu body, which includes the menu items and their background -->
      <object id='menu_body' offset_y='-40'>
      
         <!-- the background of menu items, which functions as a drawer, masked by menu_mask -->   
         <rect x='0' y='0' width='100' height='60' fill_color='aaaaaa' />
         <mask target='menu_mask' />
         <drawer type='down' depth='60' auto_open='false' handle_front='60' handle_back='20' />   
         
         <!-- the first menu item -->
         <object offset_y='0'>
            <rect  x='0' y='0' width='100' height='19' fill_color='cccccc' state='hit' />
            <text  x='10' y='0' width='90' height='19'>Alert</text>
            <action>
               <item type='alert' text='Hello World!' />
               <item type='drawer_close' target='menu_body' />
            </action>
         </object>
         
          <!-- the second menu item -->
         <object offset_y='20'>
            <rect  x='0' y='0' width='100' height='19' fill_color='cccccc' state='hit' />
            <text  x='10' y='0' width='90' height='19'>Google</text>
            <action>
               <item type='link' url='http://www.google.com' target='_blank' />
               <item type='drawer_close' target='menu_body' />
            </action>
         </object>
         
          <!-- the third menu item -->
         <object offset_y='40'>
            <rect  x='0' y='0' width='100' height='19' fill_color='cccccc' state='hit' />
            <text  x='10' y='0' width='90' height='19'>Print</text>
            <action>
               <item type='print' />
               <item type='drawer_close' target='menu_body' />
            </action>
         </object>         
      </object>
      
   </object>   
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us