Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Jquery One Page scrolling site


Go to End


2 Posts   3217 Views

Avatar
tee 1977

Community Member, 6 Posts

28 March 2012 at 10:40pm

Hi

i'm trying to implement a jquery powered one page website into silverstripe, i have a static website that uses this but would really like to get this working as a cms editable site.

Basically im stumped with getting the menu to work because it's made up of anchor links that animate up the relevent section. i've looked at using redirector urls and this works but really want to show the relevent link as active when on a section.

below is how the menu would be set up if on a static html website:

<ul id="navigation">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

I really hope someone can help me with this, it would be great to get this type of site working within silverstripe.

Thanks

Tamara

Avatar
monk

Community Member, 4 Posts

3 April 2012 at 11:51pm

Edited: 03/04/2012 11:52pm

Assuming you create your page sections as separate pages in the backend, one way you could build your navigation is

<ul id="navigation">
<% control Menu(1) %>
    <li><a href="#{$URLSegment}">$Title</a></li> 
<% end_control %>
</ul>

and then display your page content by looping again through all pages and outputting them sequentially like this:

<div id="content">
     <% control Menu(1) %>
        <div id="$URLSegment">
               $Content
        </div>
     <% end_control %>
</div>