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.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Adding custom sidebar navigation to each page selectively?


Go to End


4 Posts   1586 Views

Avatar
Panupat

Community Member, 2 Posts

18 May 2013 at 5:12am

Just started testing out SilverStripe and I'm liking how I can add sub page very much. I'm curious if SS will be able to do this?

My website is a Final Fantasy website and there are tons in the franchise as you can imagined. Now my site structure is something like this

ff1
- characters
- weapons
- etc

ff2
- characters
- magics
- etc

What I want is a navigational sidebar that displays links only in their same category.
So for pages in blue, the sidebar would only show links to blue pages. For pages in green, the sidebar would only show links to green pages. And etc.

Is it possible to do in SS?

I wouldn't mind at all if the sidebar needs to be created manually. As long as there's a way to selectively add them to the pages I want.

Thanks!

Avatar
copernican

Community Member, 189 Posts

18 May 2013 at 6:41am

Edited: 18/05/2013 6:43am

Hello Panupat!

This would be very easy to achieve in SilverStripe! You could take advantage of the Menu() and Children() function in your template to achieve what you want. You would most likely put this in your Sidebar.ss template. Here is some example code to get you started.

<% if Menu(1) %>
<ul>
<% loop Menu(1) %>
<li><a href="$Link" class="$LinkingMode">$Title.XML</a>
<% if Children %>
<ul>
<% loop Children %>
<li><a href="$Link" class="$LinkingMode">$Title.XML</a></li>
<% end_loop %>
</ul>
<% end_if %>
</li>
<% end_loop %>
</ul>
<% end_if %>

This is generally how you would create a "nested" menu in SS. So if you created a top level "Ff1" page and it had the sub pages "characters" and another one "weapons" they would only appear below your "Ff1" page. You'll have to create the CSS yourself to style the menu though.

Are you using a custom theme or the default Simple theme?

Avatar
Panupat

Community Member, 2 Posts

18 May 2013 at 1:38pm

Edited: 18/05/2013 1:39pm

Thanks IOTI. But if I do a loop, I would get links to all pages. There are going to be a lot of pages in my site. For ex.

FF1
- sub pages
FF2
- sub pages
FF3
- sub pages
..
..
..
FF14
- subpages

Let's say I'm viewing a page in FF2, I only want the navigator to show

FF2
- sub pages

Without any other FF. Would this be possible?

Thanks again :)

Avatar
copernican

Community Member, 189 Posts

18 May 2013 at 10:19pm

Hey Panupat,

Take a look at the <li> element in the code i provided.

<li><a href="$Link" class="$LinkingMode">$Title.XML</a>

the $LinkingMode template variable will return either "current", "section" or "link". You can use this feature with CSS to hide/show the pages you want displayed in the menu e.g, only show the menu item with the class "current" for example. For a better explanation check out the tutorial page here http://doc.silverstripe.org/framework/en/tutorials/1-building-a-basic-site and do a search for $LinkingMode.

If you haven't gone through the basic tutorial you really should. It will help get you started with developing websites in SilverStripe.