templates/webpages/menu/menu.html

   1 [%- USE L %]
   2 <style type='text/css'>
   3   #html-menu { float:left; white-space: nowrap; }
   4   #html-menu tr { vertical-align: top; }
   5   #html-menu div.menuitem { padding: 2px 4px 1px 4px; }
   6   #html-menu div.submenu { font-weight: bold }
   7   #html-menu img { vertical-align: middle; visibility:hidden; border: 0; }
   8   #html-menu div.menuitem:first-child img { visibility:visible }
   9   #html-menu a { vertical-align: top }
  10   #html-menu .item span.menu-spacer { display: inline-block; width: 24px }
  11   #html-menu .menu span.menu-spacer { display: inline-block; width: 32px }
  12 </style>
  13 <body class="menu">
  14
  15 <div id='html-menu'>
  16   [% INCLUDE sections %]
  17 </div>
  18 </body>
  19 </html>
  20 [%- BLOCK sections %]
  21 [%- FOREACH item IN sections %]
  22    <div class='menu-multiline'>
  23    [% SET menuouterloopcount = loop.count %]
  24  [%- FOREACH chunk IN item.chunks %]
  25      <div id='menuitem[% menulevel %]_[% menuouterloopcount %]' class='menuitem [% item.class %] hover'>[% PROCESS item %]</div>
  26  [%- END %]
  27      [%- IF item.subitems.size %]
  28        <div id='menuitem[% menulevel %]_[% loop.count %]_submenu'>
  29        [% INCLUDE sections sections=item.subitems, menulevel='_'+loop.count %]
  30        </div>
  31      [%- END %]
  32    </div>
  33 [%- END %]
  34 [%- END  %]
  35 [%- BLOCK item %]
  36   [% item.spacer %]
  37   [%- IF item.href %]
  38     [% L.link(item.href, L.html_tag('span', L.html_tag('img', undef, item.img), class='menu-spacer') _ chunk, target=item.target) %]
  39   [%- ELSE %]
  40     [% L.html_tag('img', undef, item.img) _ chunk %]
  41   [%- END %]
  42 [%- END %]
  43
  44 </body>
  45
  46 <script type='text/javascript'>
  47   $(function(){
  48     $('#html-menu div[id$=submenu]').hide();
  49     $('#html-menu div.menu').each(function() {
  50       $(this).click(function(){
  51         $('#' + $(this).attr('id') + '_submenu').toggle();
  52       });
  53     });
  54   });
  55 </script>