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}