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

 < previousnext > 

 

Expanding Menu

 

An expanding menu is a menu with several menu titles, each expands when clicked to reveal its menu items. Expanding 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 expanding menu. 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='190' offset_y='50'>
   
      <!-- menu 1 -->
      <object id='menu_1' offset_y='0'>

         <!-- title_1 -->
         <rect  x='0' y='0' width='100' height='19' fill_color='888888' state='hit' />
         <text  x='0' y='0' width='100' height='19' align_h='center'>Menu Title 1</text>
         <action>
            <item type='drawer_toggle' target='body_1' />
            <item type='drawer_close' target='body_2' />
            <item type='drawer_close' target='body_3' />
         </action>
         
          <!-- the mask to hide body_1 when retracted -->
         <object id='mask_1'>
            <rect  x='0' y='20' width='100' height='1000' />
         </object>
   
         <!-- body_1 -->
         <object id='body_1' offset_y='-20'>
            <rect x='0' y='0' width='100' height='40' fill_color='ff4400' />
            <mask target='mask_1' />
            <drawer type='down' depth='40' auto_open='false' auto_close='false' />
   
            <!-- item_1-1 -->
            <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'>Item 1-1</text>
               <action><item type='alert' text='Item 1-1' /></action>
            </object>
            
            <!-- item_1-2 -->
            <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'>Item 1-2</text>
               <action><item type='alert' text='Item 1-2' /></action>
            </object>
            
            
            <!-- menu 2 -->
            <object id='menu_2' offset_y='40'>
               
               <!-- title_2 -->
               <rect  x='0' y='0' width='100' height='19' fill_color='888888' state='hit' />
               <text  x='0' y='0' width='100' height='19' align_h='center'>Menu Title 2</text>
               <action>
                  <item type='drawer_toggle' target='body_2' />
                  <item type='drawer_close' target='body_1' />
                  <item type='drawer_close' target='body_3' />
               </action>
               
               <!-- the mask to hide body_2 when retracted -->
               <object id='mask_2'>
                  <rect  x='0' y='20' width='100' height='1000' />
               </object>
               
               <!-- body_2 -->
               <object id='body_2' offset_y='-40'>
                  <rect x='0' y='0' width='100' height='60' fill_color='88ff00' />
                  <mask target='mask_2' />
                  <drawer type='down' depth='60' auto_open='false' auto_close='false' />
                  
                  <!-- item_2-1 -->
                  <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'>Item 2-1</text>
                     <action><item type='alert' text='Item 2-1' /></action>
                  </object>
                  
                  <!-- item_2-2 -->
                  <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'>Item 2-2</text>
                     <action><item type='alert' text='Item 2-2' /></action>
                  </object>
                  
                  <!-- item_2-3 -->
                  <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'>Item 2-3</text>
                     <action><item type='alert' text='Item 2-3' /></action>
                  </object>
                  
                  
                  <!-- menu 3 -->
                  <object id='menu_3' offset_y='60'>
                     
                     <!-- title_3 -->
                     <rect  x='0' y='0' width='100' height='19' fill_color='888888' state='hit' />
                     <text  x='0' y='0' width='100' height='19' align_h='center'>Menu Title 3</text>
                     <action>
                        <item type='drawer_toggle' target='body_3' />
                        <item type='drawer_close' target='body_1' />
                        <item type='drawer_close' target='body_2' />
                     </action>
                     
                     <!-- the mask to hide body_3 when retracted -->   
                     <object id='mask_3'>
                        <rect  x='0' y='20' width='100' height='1000' />
                     </object>
                     
                     <!-- body_3 -->
                     <object id='body_3' offset_y='-20'>
                        <rect x='0' y='0' width='100' height='40' fill_color='8888ff' />
                        <mask target='mask_3' />
                        <drawer type='down' depth='40' auto_open='false' auto_close='false' />
               
                        <!-- item_3-1 -->
                        <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'>Item 3-1</text>
                          <action><item type='alert' text='Item 3-1' /></action>
                        </object>
                        
                        <!-- item_3-2 -->
                        <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'>Item 3-2</text>
                          <action><item type='alert' text='Item 3-2' /></action>
                        </object>
                        
                     </object>
                  </object>
               </object>
            </object>
         </object>
      </object>
   </object>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us