Page 1 of 1
Automatic equal widths for root level menu items
Posted: Fri May 16, 2014 6:49 am
by gocreative
We're working on a site for a client whereby we want all of the root level menu items to be equal width. The problem is, we don't want the menu to break if the client adds or removes items, and we're using a complicated menu which makes it hard to make this happen with CSS.
Is there a way in menu manager to get the total number of root menu items (only those set to appear in the menu) and return this variable for use in a stylesheet?
Re: Automatic equal widths for root level menu items
Posted: Fri May 16, 2014 7:36 am
by velden
You could use a extra menu call with number_of_levels parameter and a custom template and use that to create some inline css.
Somewhere in the <head> section of your page template(s):
Code: Select all
{menu number_of_levels=1 template="output_css"}
Menu template 'output_css'
Code: Select all
{if $count > 0}
<style type="text/css">
ul#mainmenu > li {
width : {ceil(1024/$count)}px;
}
</style>
{/if}
Obviously '1024' should be replaced with some value that applies to your design.
You could also use one menu call and customize the Menu Manager template to count all 'nodes' with property depth == 0 (or 1, I don't remember). Then you can use that count (stored in Smarty variable) in <head> section of page template.
HOWEVER: I think (not sure) there is a bug in Menu Manager that makes depth property unusable. So take care if you try that approach.
Re: Automatic equal widths for root level menu items
Posted: Fri May 16, 2014 7:52 am
by gocreative
Great idea, and so simple! Thanks so much. Here's what I ended up going with, because the site has a couple of responsive breakpoints:
Code: Select all
{if $count > 0}
<style type="text/css">
.top-bar-section > ul.left > li {
width: {math equation="y / x" x=$count y='100'}%;
}
</style>
{/if}
Re: Automatic equal widths for root level menu items
Posted: Fri May 16, 2014 8:34 am
by hasanen
This is how I did similar menu in one of my sites.
I have UDT (count_root_items) with code :
Code: Select all
foreach($params['list'] as $item){
if($item->depth == 1)
$i++;
}
return $i;
And then in top of menu-template is this:
Code: Select all
{assign "root_items" {count_root_items list=$nodelist}}
{if $root_items == 8 }
{assign "columnwidth" "onehalf"}
{elseif $root_items == 6}
{assign "columnwidth" "two"}
{elseif $root_items == 4}
{assign "columnwidth" "three"}
{elseif $root_items == 3}
{assign "columnwidth" "four"}
{elseif $root_items == 2}
{assign "columnwidth" "six"}
{elseif $root_items == 1}
{assign "columnwidth" "twelve"}
{/if}
That "columnwidth" is a class name which is defined in styles. For example width for elements with class "two" is 50% and with "four" it's 25%. You can also add for example different paddings when there is two or six root level items.