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.

General Questions /

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

SilverStripe Navigation Menu and Controllers


Reply


3 Posts   3020 Views

Avatar
Silverfox5545

Community Member, 1 Post

15 August 2011 at 9:42am

Edited: 15/08/2011 9:43am

I am new to SS and have searched long and hard for the answers to my questions before bothering others with them. I have learned a bit in my quest, and have gone through the Tutorials on SS.org and ssbits, however I am still not understanding some of the basics when working with SS and its control codes. Currently, I am trying to get started by using a pre-built theme and modifying it to my particular application. Working on the navigation menu, several questions have come up. Let me preface this by saying I do understand that SS uses variables for pulling data and also has several different folders containing different aspects of the page's layout and behavior. That being said, I have a navigation bar on the left side of the page with five main headings underneath the site root (the one with the globe in the WYSIWYG). When one of the five main headings is clicked I would like to display all of the sub-levels below that heading. Then, when one of the sub-levels is clicked I would like to display a list of the Article Titles that exist underneath the first sub-level as links in the Content area to the right of the navigation menu.
Then when one of the Article Title links is clicked the full article will replace and display in the same Content area.

My code so far from the template in the Includes folder:

<h3>Navigate</h3>
<ul id="Navigation">
   <% control Menu(1) %>
      <li>
         <a class="$LinkingMode" href="$Link" title="Go to the $Title.XML page">$MenuTitle<span></span></a>
         <% if Children %>
            <% if LinkingMode = section %>
               <ul id="Sub-Menu">
                  <% control Children %>
                  <li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
                     <% if LinkingMode = current %>
                        <a class="items" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
                     <% else %>
                        <a class="item" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
                     <% end_if %>
                  </li>
                  <% end_control %>
               </ul>
            <% end_if %>
            <% if LinkingMode = current %>
               <ul id="Sub-Menu">
                  <% control Children %>
                  <li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
                     <% if LinkingMode = current %>
                        <a class="items" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
                     <% else %>
                        <a class="item" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
                     <% end_if %>
                  </li>
                  <% end_control %>
               </ul>
            <% end_if %>
         <% end_if %>
      </li>
   <% end_control %>
</ul>

I have taken some programming languages and understand basic HTML and CSS. What I cannot figure out is this:

1. <% control Children %> returns the children of the current page, but doesn't seem to work when I use it underneath the first sub-level.

2. When I do finally get the third sub-levels to display, how will I tell it to display Sub-pages of itself as the Article Titles and point it to the Content Area, instead of itself?

3. Will I need to use a loop of some sort to keep checking if their children when using levels and/or for displaying the article titles?

4. When I use the variable $Title and $LinkingMode how does it know which title, or which link? I don't understand the syntax used in the line: <a class="items" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>

I have worded my questions to the best of my ability and hope I have made it as easy as possible for anyone out there to help me.

Thank you for your time and patience.

Avatar
DesignerX.com.au

Community Member, 107 Posts

15 August 2011 at 10:15pm

Edited: 15/08/2011 10:16pm

Hi, i also kind of stuck on the same thing here, Hope someone can help with his Questions .

Also, where can i find a "List" of variables used with this cms, so it will have "most common" variables & what they function.. If the list is NOT available, is there anyone willing to help me create such a list.. it will be handy :)

Avatar
martimiz

Forum Moderator, 1132 Posts

18 August 2011 at 12:02am

Hi Silverfox5545, welcome to the forums

First of all: you'll find lots of info in the new SilverStripe docs. For working with templates, this is a nice one (this goes for DesignerX as well):
http://doc.silverstripe.org/sapphire/en/reference/built-in-page-controls

As for you question: if I understand you correctly, you have a three-level SiteTree in your CMS, you want the first two levels to be represented in the left menu, and if a page in the second level is clicked, you want to show it's children in the content area of the page.

The way SilverStripe's templates work, the left menubar and the list in the content area are two separate items. First the sidebar. That would be something like you have already done, sort of simplified, like this:

<h3>Navigate</h3>
<ul id="Navigation">
   <% control Menu(1) %>
      <li>
         <a class="$LinkingMode" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
         <% if Children %>
            <% if LinkOrSection = section %>
               <% if Children %>
                  <ul id="Sub-Menu">
                  <% control Children %>
                     <li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
                        <a class="items LinkingMode" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
                     </li>
                  <% end_control %>
                  </ul>
               <% end_if %>
            <% end_if %>
         <% end_if %>
      </li>
   <% end_control %>
</ul>

The second bit would be placed somewhere in the content part of your page. Since you don't want to show this list of child-pages on root pages, you can filter them out by checking on the ParentID (that's 0 for root pages ). Something like this (typo's not included):

<% if ParentID %>
   <% if Children %>
      <ul id="ContentMenu">
      <% control Children %>
         <li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
            <a class="items LinkingMode" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
         </li>
      <% end_control %>
      </ul>
   <% end_if %>
<% end_if %>

This should do the trick. This will try to show the list on third level pages as well - but if they have no children, there's no problem. In fact you can throw as many menu's and other stuff on a Page.ss template as you like - the point is how to filter them out for pages you don't want them on. If the filtering gets a bit too complex, then you can think of creating new pagetype, that can have their own template(s).

Hope this helps some...