Page 1 of 1
Responsive site with Foundation
Posted: Wed May 29, 2013 1:07 pm
by tdlwebs
http://fylde-coast-epc-centre.co.uk/
Fylde Coast EPC Centre features a responsive design built using the "Foundation" framework.
Pretty much a standard installation with only a few mods.
Modules: News, Formbuilder, Archiver
Disclaimer: I would like to point out that the animated gif on the home page was at the insistence of the customer despite advice against it
Re: Responsive site with Foundation
Posted: Sun Jul 21, 2013 1:37 am
by gocreative
Looks great and works really well. Just a question about your primary nav -- I'm using Foundation as my basis for all CMSMS websites but I've had a few minor issues with generating the responsive menu and having submenus. Any chance you could share your Menu Manager template so I can compare it to mine?
Re: Responsive site with Foundation
Posted: Thu Jul 25, 2013 9:41 am
by tdlwebs
Sorry Gocreative, but the site features only single level navigation so the menu template is pretty basic.
I hope you've solved it by now though and maybe if you have you could share your solution?
T
Re: Responsive site with Foundation
Posted: Thu Jul 25, 2013 10:28 pm
by gocreative
This is what I'm using. It works for multiple levels but there is an issue when the last item in the root menu has a dropdown. This causes the height of the entire menu bar to double for some reason, and I couldn't figure out a way around that.
Code: Select all
{assign var='number_of_levels' value=10000}
{if $number_of_levels}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
{if $count > 0}
{foreach from=$nodelist item=node}
{if $node->depth < $node->prevdepth}
</ul></li>
{/if}
{if $node->children_exist == true or $node->parent == true}
<li class="has-dropdown">
<a href="{if $node->url!=''}{$node->url}{else}#{/if}">{$node->menutext}</a>
<ul class="dropdown">
{else}
{if $node->type == 'sectionheader'}
<li><a href="#">{$node->menutext}</a></li>
{elseif $node->type == 'separator'}
{*<li class="divider"></li>*}
{elseif $node->type == 'pagelink'}
<li class="hide-for-medium-down"><a href="{if $node->url!=''}{$node->url}{else}#{/if}">{$node->menutext}</a></li>
{else}
<li><a href="{if $node->url!=''}{$node->url}{else}#{/if}">{$node->menutext}</a></li>
{/if}
{/if}
{/foreach}
{/if}