|  | 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 ]->