CMS Made Simple Forums

Posted: **Wed Nov 26, 2014 3:08 pm**

Hello,

I ty replace the default menu template to the Foundation Top Bar Menu template:
http://foundation.zurb.com/docs/components/topbar.html

Code: Select all

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
 
<!-- FROM HERE  -->
<section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

I open and export a default cmsms menu-template (see below), I try to find out how the levels working in the menu-template and then integrate with the Foundation Top Bar.

I spent hours for solve this problem, but with no result

Who can help me solve this problem?

CMSMS menu template:

Code: Select all

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><a class="{$classes}" 
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="menuparent"><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent" 
{else}
  <li>
  <a 
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

Posted: **Wed Nov 26, 2014 4:19 pm**

I don't think this has to be part of your menu template. But, if you wanted, you could add it to the very top, above everything else because these are just static links that do not loop through pages.

Code: Select all

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

BUT, replace

Code: Select all

<h1><a href="#">My Site</a></h1>

with

Code: Select all

<h1><a href="{root_url}">My Site</a></h1>

If this:

Code: Select all

<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

is meant not to open a page but act as a section header of sorts, then you will need some Javascript to prevent the default action of this link. Using a # hash in any CMSMS URL will reload the current page.

If not using Javascript to disable the link, remove the href="#" from the link.

The menu template just needs to be modified to have the same class names and such that you need. For example, this part:

Code: Select all

<section class="top-bar-section">
    <ul class="right">

would simply replace this part of the menu template:

Code: Select all

<div id="menuwrapper">
<ul id="primary-nav">

Posted: **Wed Nov 26, 2014 5:53 pm**

Hello Johnny,

Thank you for the feedback.

I made a custom menu-template:

Code: Select all

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="{root_url}">{sitename}</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
  <!-- Right Nav Section -->
 <ul class="right">
    {foreach from=$nodelist item=node}
    <li><a href="{$node->url}">{$node->menutext}</a></li>
    {/foreach}
    </ul>
  </section>
</nav>
</div>

This works very well, but without menu-levels.

I hope find a solution to make multilevel menu's with Foundation5.

Regards,
Christophe

Posted: **Wed Nov 26, 2014 10:12 pm**

I will follow this topic with interest as I'm currently trying to build a Foundation website too. However, it does not have a multi-level menu yet.

But in the default menu templates multi-level is already built-in and as I see it, it does not really differ from what the Foundation menu expects. So out of curiosity: what is the actual problem left?

In the beginning it might be a little hard to understand the menu template logic (as it starts with checking whether to close some ul/li tags etc). But once you understand it, it should be pretty easy to translate to Foundation.

Posted: **Thu Nov 27, 2014 6:53 pm**

velden wrote:I will follow this topic with interest as I'm currently trying to build a Foundation website too. However, it does not have a multi-level menu yet.

But in the default menu templates multi-level is already built-in and as I see it, it does not really differ from what the Foundation menu expects. So out of curiosity: what is the actual problem left?

In the beginning it might be a little hard to understand the menu template logic (as it starts with checking whether to close some ul/li tags etc). But once you understand it, it should be pretty easy to translate to Foundation.

Next week, i give it a try to make an Foundation menu template.
I find this for make a Bootstrap menu template:
http://berkhamsted-web-design.co.uk/blo ... bootstrap/

I think it's similar for make a Foundation menu template.

Christophe

Posted: **Thu Nov 27, 2014 9:20 pm**

I did this for a Foundation 4 site and it works fine. Shouldn't be too different, if at all for Foundation 5.

Code: Select all

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<div class="contain-to-grid ">
    <nav class="top-bar">
      <ul class="title-area">
        <li class="name"></li>
{if $ie}
        <li class="toggle-topbar menu-icon"><a href="#"><span>
<!--[if lt IE 9]>Menu<![endif]--></span></a></li>
{else}
        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
{/if}      </ul>

      <section class="top-bar-section">
		<ul class="left">      	
{foreach from=$nodelist item=node}

{if $node->depth > $node->prevdepth}
{repeat string='<ul class="dropdown">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='active'}
  {if $node->parent == true}
    {assign var='classes' value='active has-dropdown'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' has-dropdown'}
  {/if}
  <li class="{$classes}"><a href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="has-dropdown"><a href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="active{if $node->depth eq 1} toplevel{/if}"><a>{$node->menutext}</a>

{elseif $node->type == 'sectionheader'}
<li ><label class="section">{$node->menutext}</label>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>

</section>
</nav>
</div>

{/if}

HTH
psy

PS: I used {cge_is_ie assign=ie} in my page template. It checks if the $ie var is set before including the IE rubbish.

Posted: **Sat Nov 29, 2014 9:40 am**

psy wrote:I did this for a Foundation 4 site and it works fine. Shouldn't be too different, if at all for Foundation 5.

Code: Select all

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<div class="contain-to-grid ">
    <nav class="top-bar">
      <ul class="title-area">
        <li class="name"></li>
{if $ie}
        <li class="toggle-topbar menu-icon"><a href="#"><span>
<!--[if lt IE 9]>Menu<![endif]--></span></a></li>
{else}
        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
{/if}      </ul>

      <section class="top-bar-section">
		<ul class="left">      	
{foreach from=$nodelist item=node}

{if $node->depth > $node->prevdepth}
{repeat string='<ul class="dropdown">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='active'}
  {if $node->parent == true}
    {assign var='classes' value='active has-dropdown'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' has-dropdown'}
  {/if}
  <li class="{$classes}"><a href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="has-dropdown"><a href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="active{if $node->depth eq 1} toplevel{/if}"><a>{$node->menutext}</a>

{elseif $node->type == 'sectionheader'}
<li ><label class="section">{$node->menutext}</label>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>

</section>
</nav>
</div>

{/if}

HTH
psy

PS: I used {cge_is_ie assign=ie} in my page template. It checks if the $ie var is set before including the IE rubbish.

Hi,

Thats very helpful.
Thanks.

Regards,
Christophe

Posted: **Sun Nov 30, 2014 5:24 pm**

I actually made a Zurb menu for someone and it worked perfect, no idea what version it was...

Posted: **Thu Dec 25, 2014 7:51 pm**

Interesting. I used bootstrap for the menu but Foundation5 version seems very flexible. Bookmarked.

Posted: **Fri Dec 26, 2014 1:54 pm**

IMHO, Zurb menus are better for CMSMS. They make top level pages with sub pages accessible on smaller devices. Bootstrap menus don't. Instead bootstrap makes them behave like section headers.

Posted: **Sat Dec 27, 2014 9:54 am**

I'm using Bootstrap with superfish menu. To make that mobile I found a nice piece of css and javascript

http://jsfiddle.net/6vp3U/425/

You only have to add two classes to the mimimal menu template and it will work.

Posted: **Sat Dec 27, 2014 6:35 pm**

For menus with more than top level on smaller devices I tell the menu not to do a drop but to stay open but behind a click to show menu bar like a default left menu or a select menu...

http://themes.multiintech.com/3-column2.html select menu on home page...

These are some of the things I don't like about 'frameworks' like pootstrap or fundation, they force you to try and do things their way only when most of it could be done easier and with less code like this menu and the carousel someone was having problems with in another post...

You get a design/look and code to that not the other way around...

CMS Made Simple Forums

Foundation5 Menu template

Foundation5 Menu template

Re: Foundation5 Menu template

Re: Foundation5 Menu template

Re: Foundation5 Menu template

Re: Foundation5 Menu template

Re: Foundation5 Menu template

Re: Foundation5 Menu template

Re: Foundation5 Menu template

Re: Foundation5 Menu template

Re: Foundation5 Menu template

Re: Foundation5 Menu template

Re: Foundation5 Menu template