One page website using Menu Manager templates

I was recently asked to develop a single page scrolling website and have seen several implementations around this theme using CMSMS but none that seemed to be expandable and easily maintained by end users/clients.

With this in mind I decided MenuManager would be my solution, meaning adding pages, removing pages and re-ordering could be done in the usual way and the navigation and page content would reflect these changes.

So to achieve this you will need to create two MenuManger templates, one for the navigation and one for the page content. This solution also requires CGSimpleSmarty to pull page content so make sure that's installed too.

Navigation template - scrollable.tpl

{if $count > 0}
<ul id="nav">
<li class="hidden">.</li>
{foreach from=$nodelist item=node}
{if $node->index > 0}
<li class="divider">|</li>
{/if}
<li class="li-{$node->alias}{if $menuCount ne ''} first{/if}"><a href="#{$node->alias}" title="Link to the {$node->menutext} page" class="nav-{$node->alias}"{if $node->target ne ""} target="{$node->target}" {/if}{if $node->accesskey != ''} accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}" {/if}>{$node->menutext}</a>
{/foreach}
</li>
<li class="hidden">.</li>
</ul>
{/if}

Content template - scroll-content.tpl

Updated: Added the eval as per comments to enable use of smarty tags in content.

{if $count > 0}
{assign var='navCount' value='0'}
{foreach from=$nodelist item=node}
{$navCount++ assign='junk'}
{capture assign='nodeAlias'}{$node->alias}{/capture}
{cgsimple::get_page_content($nodeAlias,'pageHeader','pageHeader')}
{cgsimple::get_page_content($nodeAlias,'','pageContent')}
<div id="{$nodeAlias}" class="row{if $navCount is even} even{/if}"><h1>{if $pageHeader ne ''}{$pageHeader}{else}{$node->menutext}{/if}</h1><div class="intro">{eval var=$pageContent}</div></div>
{assign var='pageHeader' value=''}
{/foreach}
{/if}

We then need to add the calls to our page template.

Page template

<div id="navWrapper">
{menu template='scrollable.tpl'}
</div>
<div id="contentMain">
{menu template='scroll-content.tpl'}
</div>

A little bit of Javascript to make the anchor link transitions a nice smooth scroll, plus nav highlighting. This utilises Jquery so you'll need to reference that in your template.

Javascript

$(function() {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 75
}, 900, 'swing', function () {
window.location.hash = target;
});
});
var sections = $('.row'),
links = $('#nav'),
lis = $('#nav li');
lin = $('#nav li a');

$(window).scroll(function() {
var currentPosition = $(this).scrollTop();
lis.removeClass('active-slide');
lin.removeClass('active');

sections.each(function() {
var top = $(this).offset().top,
bottom = top + $(this).height() - 150;

if (currentPosition >= top - 150 && currentPosition <= bottom) {
var link = $('a[href="#' + this.id + '"]');
link.parent().addClass('active-slide');
link.addClass('active');
}
});
});
});

And last but by no means least, a bit of CSS.

CSS

#nav {
width:968px;
margin:0 auto;
padding:0;
list-style:none;
background:#302F2D;
}
#nav li.divider {
display:none;
visibility:hidden;
}
#nav li {
margin:0;
padding:20px;
float:left;
}
#nav li a {
display:block;
color:#A6A6A6;
padding:10px 0;
border-bottom:2px solid #302F2D;
}
#nav li a:hover, #nav .active-slide a.active, #nav a.active {
color:#FFFFFF;
text-decoration:none;
border-bottom:2px solid #FFFFFF;
}
.active-slide a.active, a.active {
color:#FF0000;
}
.row {
padding:90px 0;
min-height:500px;
text-align:center;
background:#28B8D0;
color:#FFFFFF;
}
.row.even {
background:#FFFFFF;
color:#595959;
}

Using the above examples should get you most of the way to having a working example of a one page scrolling site.

a2 Hosting

Comments