HTML
Splash!
PostScript
  
Template Toolkit Examples: HTML Library: Menus and Menu Bars

index
rgb
headers
lists
links
tables
bars
menus

Menus and Menu Bars

These elements can be used to create menus and menu bars.

Source #1:
    [% buttons = [
         { link => 'headers.html', text => 'Headers' }
         { link => 'links.html',   text => 'Links'   }
         { link => 'bars.html',    text => 'Bars'    }
       ]
    %]
    
    [% INCLUDE html/menu %]
    
HTML Output #1:
    [&nbsp;<a href="headers.html">Headers</a>&nbsp;][&nbsp;<a
    href="links.html">Links</a>&nbsp;][&nbsp;<a href="bars.html">Bars</a>&nbsp;]
    
Output #1:

Source #2:
    <div align="center">
    [% INCLUDE html/menu select=2 left=1 right=1 %]
    </div>
    
HTML Output #2:
    <div align="center">
    &lt;-[&nbsp;<a href="headers.html">Headers</a>&nbsp;][<b>&nbsp;<a
    href="links.html">Links</a>&nbsp;</b>][&nbsp;<a
    href="bars.html">Bars</a>&nbsp;]-&gt;
    </div>
    
Output #2:

Source #3:
    <div align="right">
    [% INCLUDE html/menu select=2 %]
    </div>
    
    [% BLOCK html/button    # define alternate button -%]
    [% loop.first ? '[' : '' %]
    [% IF link %]<a href="[% link %]">[% END -%]
    [% select ? "<b>$text</b>" : text -%]
    [% IF link %]</a>[% END %]
    [% loop.last ? ']' : '|' %]
    [% END %]
    
    
HTML Output #3:
    <div align="right">
    [
    <a href="headers.html">Headers</a>
    |
    <a href="links.html"><b>Links</b></a>
    |
    <a href="bars.html">Bars</a>
    ]
    </div>
    
Output #3:

Source #4:
    [% PROCESS html/rgb %]
    
    [% INCLUDE html/menubar
         width   = "100%"
         content = "Menu Bar"
         border  = 1
         pad     = 6
         fill    = rgb.grey75
         edge    = rgb.blue.mid
    %]
    
HTML Output #4:
    <table border="0" bgcolor="#000000" width="100%" cellpadding="1"
    cellspacing="0"><tr><td><table border="0" bgcolor="#c0c0c0" width="100%"
    cellpadding="6" cellspacing="0"><tr bgcolor="#c0c0c0">
    <td>
    Menu Bar
    </td>
    <td align="right">
    &nbsp;[&nbsp;<a href="headers.html">Headers</a>&nbsp;][&nbsp;<a
    href="links.html">Links</a>&nbsp;][&nbsp;<a
    href="bars.html">Bars</a>&nbsp;]</td>
    </tr>
    </table></td>
    </tr>
    </table>
    
Output #4:

Menu Bar  [ Headers ][ Links ][ Bars ]


Source #5:
    [% buttons = [
        { link => 'headers.html', text => 'Headers' }
        { link => 'links.html',   text => 'Links'   }
        { link => 'bars.html',    text => 'Bars'    }
        { link => 'tables.html',  text => 'Tables'  }
        { link => 'menus.html',   text => 'Menus'   }
       ]
    %]
    
    [% INCLUDE html/menubar
        content = "Another Menu Bar"
        select  = 5
        width   = '100%'
        border  = 1
        fill    = rgb.red.light
        edge    = rgb.red.dark
    %]
    
Output #5:

Another Menu Bar  [ Headers ][ Links ][ Bars ][ Tables ][ Menus ]


Source #6:
    [% buttons = [
         { link => 'tables.html',  text => 'Prev' },
         { link => 'index.html',   text => 'Index'  },
         { link => '',             text => 'Menus'  },
         { link => 'headers.html', text => 'Next'   },
       ]
    %]
    
    <font size="-1">
    [% INCLUDE html/menubar
         content = "Current Menu Items"
         left    = 1
         right   = 1
         select  = 3
         width   = '100%'
         border  = 2
         pad     = 4
         fill    = rgb.green.light
         edge    = rgb.green.dark
    %]
    </font>
    
Output #6:

Current Menu Items  <-[ Prev ][ Index ][ Menus ][ Next ]->