Help wanted for creating a standard menu css template

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
bterkuile
Forum Members
Forum Members
Posts: 97
Joined: Sun Jul 22, 2007 11:48 am

Help wanted for creating a standard menu css template

Post by bterkuile »

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:

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}
Benjamin
Post Reply

Return to “Layout and Design (CSS & HTML)”