Jump to:

23379 Posts in 18298 Topics by 2867 members

General Questions

SilverStripe Forums » General Questions » Adding custom sidebar navigation to each page selectively?

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

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

Page: 1
Go to End
Author Topic: 534 Views
  • Panupat
    Avatar
    Community Member
    2 Posts

    Adding custom sidebar navigation to each page selectively? Link to this post

    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!

  • IOTI
    Avatar
    Community Member
    189 Posts

    Re: Adding custom sidebar navigation to each page selectively? Link to this post

    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?

  • Panupat
    Avatar
    Community Member
    2 Posts

    Re: Adding custom sidebar navigation to each page selectively? Link to this post

    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

  • IOTI
    Avatar
    Community Member
    189 Posts

    Re: Adding custom sidebar navigation to each page selectively? Link to this post

    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.

    534 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.