Automatic equal widths for root level menu items

gocreative · Post by **gocreative** » Fri May 16, 2014 6:49 am

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?

Post by **velden** » Fri May 16, 2014 7:36 am

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.

gocreative · Post by **gocreative** » Fri May 16, 2014 7:52 am

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}

hasanen · Post by **hasanen** » Fri May 16, 2014 8:34 am

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.

CMS Made Simple Forums

Automatic equal widths for root level menu items

Automatic equal widths for root level menu items

Re: Automatic equal widths for root level menu items

Re: Automatic equal widths for root level menu items

Re: Automatic equal widths for root level menu items