|  | 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: [ Headers ][ Links ][ Bars ]
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: <-[ Headers ][ Links ][ Bars ]->
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: [ Headers | Links | Bars ]
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 ]->