Help wanted for creating a standard menu css template
Posted: Thu Sep 27, 2007 11:13 am
I created a module, with the name bMenu. It's goal is to ease the creation of (drop down) menus by defining the layout of a menu in some manageable parameters. Creating and maintaining menus should become a lot easier and Firefox IE problems should not occur. (You can guess that this module is the result of much frustrations).
I think the current version 0.3.0 beta works pretty well, but I have a problem with inheritance. In the current stylesheet template classes are attached to the li element. This causes an li.hover a{ in the main menu to be inherited by a ul li a{ default link for the submenus. This can be solved by attaching a default class for default menu items (Should be changed in the menu manager module as well), but I think it is possible to create a better solution. Maybe attaching a class to the link as well (li.hover a.hover)
So if you have some experience with creating menus and can work with stylesheets and are willing to help me improve my module please respond.
Testers for this module are also helpful.
My current menu_verticla.tpl template is:
Benjamin
I think the current version 0.3.0 beta works pretty well, but I have a problem with inheritance. In the current stylesheet template classes are attached to the li element. This causes an li.hover a{ in the main menu to be inherited by a ul li a{ default link for the submenus. This can be solved by attaching a default class for default menu items (Should be changed in the menu manager module as well), but I think it is possible to create a better solution. Maybe attaching a class to the link as well (li.hover a.hover)
So if you have some experience with creating menus and can work with stylesheets and are willing to help me improve my module please respond.
Testers for this module are also helpful.
My current menu_verticla.tpl template is:
Code: Select all
{$main_indicator} {ldelim}
display:block;
margin:0;
padding:0;
list-style:none;
z-index:10001;
{rdelim}
{$sub_indicator} {ldelim}
display:none;
position:absolute;
margin:0;
padding:0;
width:{$sublevel.width};
top:{CssCalc base=0 substract=$mainlevel.border_size_top};
left:{CssCalc base=$mainlevel.width add="`$mainlevel.submenu_distance`" substract=$mainlevel.border_size_left};
{rdelim}
{$sub_indicator} ul{ldelim}
left:{CssCalc base=$sublevel.width add="`$sublevel.submenu_distance`" substract=$sublevel.border_size_left};
{rdelim}
{foreach from=$styleclasses item=style}
{$style.indicator} li{$style.class}{ldelim}
display:block;
position:relative;
width:{CssCalc base=$style.width substract="`$style.padding_left`,`$style.padding_right`,`$style.border_size_left`,`$style.border_size_right`"};
height:{CssCalc base=$style.height substract="`$style.padding_top`,`$style.padding_bottom`,`$style.border_size_top`,`$style.border_size_bottom`"};
padding:{$style.padding};
margin-bottom:{$style.distance};
border:{$style.border_size} {$style.border_type} {$style.border_color};
background-color:{$style.background_color};
background-image:url({$style.background_image_url});
background-position:{$style.background_image_offset_x} {$style.background_image_offset_y};
background-repeat:{$style.background_image_repeat};
text-align:{$style.text_alignment};
{rdelim}
{$style.indicator} li{$style.class} {$style.tag}{ldelim}
background-color:inherit;
color:{$style.font_color};
font-weight:{$style.font_weight};
font-size:{$style.font_size};
text-decoration:{$style.font_decoration};
font-family:{$style.font_family};
{rdelim}
{/foreach}