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

 < previousnext > 

 

List Menu

 

List menu is similar to the regular menu, but the menu selection changes the menu title. List menus can have just a few menu items or a long list of items managed by the scroll function.

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

The below examples show simple list menus. 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.

 

Example

<slickboard>

   <!-- this is a simple list menu with just a few menu items managed by a drawer -->
   <!-- select a menu item to change the menu title -->


   <!-- 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 id='menu_title' x='0' y='0' width='100' height='100' align_h='center'>One</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' />
            <rect x='0' y='0' width='100' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='90' height='19'>One</text>
            <action>
               <!-- once selected, the menu item changes the menu title -->
               <item type='set_text' target='menu_title' text='one' />
               <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' />
            <rect x='0' y='0' width='100' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='90' height='19'>Two</text>
            <action>
               <!-- once selected, the menu item changes the menu title -->
               <item type='set_text' target='menu_title' text='two' />
               <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' />
            <rect x='0' y='0' width='100' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='90' height='19'>Three</text>
            <action>
               <!-- once selected, the menu item changes the menu title -->
               <item type='set_text' target='menu_title' text='three' />
               <item type='drawer_close' target='menu_body' />
            </action>
         </object>         
      </object>
      
   </object>   
   
</slickboard>

 


<slickboard>
   
   <!-- this is a longer list menu with many, scrolling menu items -->
   <!-- select a menu item to change the menu title -->
   
   
   <!-- 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 shows the menu body -->
      <rect x='0' y='0' width='100' height='20' fill_color='888888' state='hit' />
      <text id='menu_title' x='0' y='0' width='100' height='100' align_h='center'>1</text>
      <action>
      <item type='show' target='menu_body' />
      </action>
      
      
      <!-- a hidden menu body, which includes the menu items and their background -->
      <object id='menu_body' offset_x='5' offset_y='0' hide='true'>
      
         <!-- the scrolling menu body -->   
         <rect x='0' y='0' width='90' height='360' fill_color='aaaaaa' state='hit'/>
         <scroll x='0' y='0' width='90' height='200' mode='out' />
         
         <!-- when the menu body is visible, hide it and reset its location if the escape -->   
         <!-- key is pressed or the board's background is clicked -->   
         <action>
            <item type='move_to' target='menu_body' y='0' duration='0' event='char_27'/>
            <item type='hide' target='menu_body' event='char_27'/>
            <item type='move_to' target='menu_body' y='0' duration='0' event='click_out' />
            <item type='hide' target='menu_body' event='click_out' />
         </action>
            
            
         <!-- the first menu item -->
         <object offset_y='0'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>1</text>
            
            <!-- when the menu item is selected, change the menu title, align the -->
            <!-- selected menu item with the menu title, and then hide the menu body -->   
            <action>
               <item type='set_text' target='menu_title' text='1' />
               <item type='move_to' target='menu_body' y='0' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         
          <!-- the second menu item -->
         <object offset_y='20'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>2</text>
            
            <!-- when the menu item is selected, change the menu title, align the -->
            <!-- selected menu item with the menu title, and then hide the menu body -->   
            <action>
               <item type='set_text' target='menu_title' text='2' />
               <item type='move_to' target='menu_body' y='-20' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         
          <!-- the third menu item -->
         <object offset_y='40'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>3</text>
            
            <!-- when the menu item is selected, change the menu title, align the -->
            <!-- selected menu item with the menu title, and then hide the menu body -->   
            <action>
               <item type='set_text' target='menu_title' text='3' />
               <item type='move_to' target='menu_body' y='-40' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         
         <!-- the remaining menu items -->
         <object offset_y='60'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>4</text>
            <action>
               <item type='set_text' target='menu_title' text='4' />
               <item type='move_to' target='menu_body' y='-60' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='80'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>5</text>
            <action>
               <item type='set_text' target='menu_title' text='5' />
               <item type='move_to' target='menu_body' y='-80' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='100'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>6</text>
            <action>
               <item type='set_text' target='menu_title' text='6' />
               <item type='move_to' target='menu_body' y='-100' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='120'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>7</text>
            <action>
               <item type='set_text' target='menu_title' text='7' />
               <item type='move_to' target='menu_body' y='-120' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='140'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>8</text>
            <action>
               <item type='set_text' target='menu_title' text='8' />
               <item type='move_to' target='menu_body' y='-140' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='160'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>9</text>
            <action>
               <item type='set_text' target='menu_title' text='9' />
               <item type='move_to' target='menu_body' y='-160' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='180'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>10</text>
            <action>
               <item type='set_text' target='menu_title' text='10' />
               <item type='move_to' target='menu_body' y='-180' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='200'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>11</text>
            <action>
               <item type='set_text' target='menu_title' text='11' />
               <item type='move_to' target='menu_body' y='-200' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='220'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>12</text>
            <action>
               <item type='set_text' target='menu_title' text='12' />
               <item type='move_to' target='menu_body' y='-220' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='240'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>13</text>
            <action>
               <item type='set_text' target='menu_title' text='13' />
               <item type='move_to' target='menu_body' y='-240' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='260'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>14</text>
            <action>
               <item type='set_text' target='menu_title' text='14' />
               <item type='move_to' target='menu_body' y='-260' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='280'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>15</text>
            <action>
               <item type='set_text' target='menu_title' text='15' />
               <item type='move_to' target='menu_body' y='-280' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='300'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>16</text>
            <action>
               <item type='set_text' target='menu_title' text='16' />
               <item type='move_to' target='menu_body' y='-300' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='320'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>17</text>
            <action>
               <item type='set_text' target='menu_title' text='17' />
               <item type='move_to' target='menu_body' y='-20' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
         
         <object offset_y='340'>
            <rect x='0' y='0' width='90' height='19' fill_color='cccccc' state='hit' />
            <rect x='0' y='0' width='90' height='19' fill_color='bbbbbb' state='over' />
            <text x='10' y='0' width='80' height='19'>18</text>
            <action>
               <item type='set_text' target='menu_title' text='18' />
               <item type='move_to' target='menu_body' y='-340' duration='0'/>
               <item type='hide' target='menu_body' />
            </action>
         </object>
      
      </object>   
   </object>   
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us