-[%- USE L %]
-<style type='text/css'>
- #html-menu { float:left; white-space: nowrap; }
- #html-menu tr { vertical-align: top; }
- #html-menu div.menuitem { padding: 2px 4px 1px 4px; }
- #html-menu div.submenu { font-weight: bold }
- #html-menu img { vertical-align: middle; visibility:hidden; border: 0; }
- #html-menu div.menuitem:first-child img { visibility:visible }
- #html-menu a { vertical-align: top }
-</style>
-<body class="menu">
-
-<div id='html-menu'>
-
-[%- FOREACH item IN sections %]
- <div class='menu-multiline'>
- [%- FOREACH chunk IN item.chunks %]
- <div class='menuitem [% item.class %] hover'>[% item.spacer %]
- [%- IF item.href %]
- [% L.link(item.href, L.html_tag('img', undef, item.img) _ chunk, target=item.target) %]
- [%- ELSE %]
- [% L.html_tag('img', undef, item.img) _ chunk %]
- [%- END %]
- </div>
- [%- END %]
- </div>
-[%- END %]
- </div>
-</body>
-</html>
+[%- USE JSON %]
+<div id='html-menu'></div>
+<script type='text/javascript'>$(function(){$([% JSON.json(sections) %]).each(function(i,b){var a=$('<a class="ml">').append($('<span class="mii ms">').append($('<div>').addClass(b.i)),$('<span class="mic">').append(b.l));if(b.h)a.attr('href', b.h);if(b.t)a.attr('target', b.t);$('#html-menu').append($('<div class="mi">').addClass(b.c).addClass(b.s).attr('id','mi'+b.id).append(a))});$('#html-menu div.i, #html-menu div.sm').not('[id^='+$.cookie('html-menu-selection')+'_]').hide();$('#html-menu div.m').each(function(){$(this).click(function(){$.cookie('html-menu-selection',$(this).attr('id'));$('#html-menu div.mi').not('div.m').not('[id^='+$(this).attr('id')+'_]').hide();$('#html-menu div.mi[id^='+$(this).attr('id')+'_]').toggle()})})})</script>