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

 < previousnext > 

 

Auto Menu

 

Auto menu is similar to the regular menu, but it opens and closes without clicks (the drawer's auto_open is not set to false).

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

The below example shows a simple auto menu that opens by moving the mouse near it and closes by moving the mouse away from it. 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 -->
      <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>
      
      <!-- the mask that hides the menu_body drawer when it's 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' 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