my $menuitem = $menu->{$item};
my $label = apply { s/.*--// } $item;
my $ml = apply { s/--.*// } $item;
- my $spacer = $nbsp x (($item =~ s/--/--/g) * 2);
+ my $spacer = "spacer" . (0 + $item =~ s/--/--/g);
my $label_icon = $level . "--" . $label . ".png";
next if $level && $item ne "$level--$label";
label => $label,
height => 24,
class => 'menu',
+ spacer => $spacer,
subitems => section_menu($menu, $item)
);
} elsif ($menuitem->{submenu}) {
return {
%params,
- chunks => [ multiline($params{label}) ],
+# chunks => [ multiline($params{label}) ],
};
}
src => $icon_found ? _icon_path($icon, $size) : "image/unterpunkt.png",
alt => $params{label},
width => $icon_found ? $size : 24,
- height => $size,
+ height => $icon_found ? $size : 15,
}
}
/* End of non-anchor hover selectors */
-#html-menu { float:left; white-space: nowrap; }
+#html-menu { float:left; }
#html-menu tr { vertical-align: top; }
-#html-menu div.menuitem { padding: 2px 4px 1px 4px; }
+#html-menu div.menuitem { padding: 2px 0px 2px 0px; white-space: nowrap; }
#html-menu div.submenu { font-weight: bold }
-#html-menu img { vertical-align: middle; visibility:hidden; border: 0; }
-#html-menu div.menuitemchunk:first-child img { visibility:visible }
+#html-menu img { vertical-align: middle; border: 0; }
#html-menu a { vertical-align: top }
#html-menu .item span.menu-spacer { display: inline-block; width: 24px }
-#html-menu .menu span.menu-spacer { display: inline-block; width: 32px }
-#html-menu div.menu div.menuitemchunk { color:blue;}
-#html-menu div.menu div.menuitemchunk:hover { color:blue; background-color: lemonchiffon; cursor: pointer; }
+#html-menu .menu span.menu-spacer { display: inline-block; width: 28px }
+#html-menu div.menu span.menuitemchunk { color:blue; }
+#html-menu div.menu span.menuitemchunk:hover { color:blue; background-color: lemonchiffon; cursor: pointer; }
+#html-menu span.menuitemchunk { white-space: normal; }
+#html-menu .spacer0 { position:relative; left: 2px }
+#html-menu .spacer1 { position:relative; left: 6px }
+#html-menu .spacer2 { position:relative; left: 12px }
+
<body class="menu">
<div id='html-menu'>
- [% INCLUDE sections %]
+ [% PROCESS sections %]
</div>
<script type='text/javascript'>
$(function(){
</html>
[%- BLOCK sections %]
[%- FOREACH item IN sections %]
- <div class='menu-multiline'>
- [% SET menuouterloopcount = loop.count %]
- <div id='menuitem[% menulevel %]_[% menuouterloopcount %]' class='menuitem [% item.class %] hover'>
- [%- FOREACH chunk IN item.chunks %]
- <div class='menuitemchunk hover'>[% PROCESS item %]</div>
- [%- END %]
- </div>
- [%- IF item.subitems.size %]
- <div id='menuitem[% menulevel %]_[% loop.count %]_submenu' class='menu-submenu[% menulevel %]'>
- [% INCLUDE sections sections=item.subitems, menulevel= menulevel _ '_' _ loop.count %]
- </div>
- [%- END %]
- </div>
-[%- END %]
-[%- END %]
-[%- BLOCK item %]
- [% item.spacer %]
+ <div id='menuitem[% menulevel %]_[% loop.count %]' class='menuitem menuitemchunk [% item.spacer %] [% item.class %] hover'>
[%- IF item.href %]
- [% L.link(item.href, L.html_tag('span', L.img_tag(item.img), class='menu-spacer') _ chunk, class='menu-link', target=item.target) %]
+ <a href="[% item.href | html %]" class='menu-link' target='[% item.target %]'><span class="menuitemicon menu-spacer">[% L.img_tag(item.img) %]</span><span class='menuitemchunk hover'>[% item.label %]</span></a>
[%- ELSE %]
- [% L.html_tag('span', L.img_tag(item.img), class='menu-spacer') _ chunk %]
+ <span class="menuitemicon menu-spacer">[% L.img_tag(item.img) %]</span><span class='menuitemchunk hover'>[% item.label %]</span>
[%- END %]
+ </div>
+ [%- IF item.subitems.size %]
+ <div id='menuitem[% menulevel %]_[% loop.count %]_submenu' class='menu-submenu[% menulevel %]'>
+ [% INCLUDE sections sections=item.subitems, menulevel= menulevel _ '_' _ loop.count %]
+ </div>
+ [%- END %]
[%- END %]
+[%- END %]