Populate menu items in different

Question

I am trying to populate four menu items in Silverstripe. I have managed to populate the first two menu items with SS using li class="area{$Pos}" in one div. However, the third and fourth menu items are in different div and class from the first two. I've been searching but not sure how to use SS to populate the third and fourth menus items in different div(/second div> and class? Sorry I'm new to it, so any help would be appreciated.

Here is my code.

<div id="top">
<ul class="sf-menu">
     <% control Menu(1) %>
       <li id="area{$Pos}">
        <a href="#a">$MenuTitle</a>
           <% if Children %>
                 <ul><% control Children %>
                        <li>
                           <a href="#aa">$MenuTitle</a>

                         <% if Children %>
                            <ul>
                            <% control Children %>
                                 <li>
                                 <a href="#aa">$MenuImg.SetSize(20,20) $MenuTitle</a>
                                  </li>
                            <% end_control %>
                            </ul>
                        <% end_if %>
                       </li>
                   <% end_control %>

                </ul><% end_if %>

          </li>
         <% end_control %>

</ul>
</div>

<div id="test" >
<ul class="sf-menu sf-vertical">
      <li id="area3">
      <a href="#a">Area 3</a>
      </li>

      <li id="area4">
      <a href="#">Area 4</a>
        <ul class="show_left">
          <li>
           <a href="#">Store one</a>

          </li>
          <li>
           <a href="#">Store Two</a>

          </li>

       </ul>
    </li>
</ul>
</div>

Answer 1

you're already using the $Pos Control (see the docs) in your code, you can also use it inside an 'if' block. this should do the trick (untested):

BEWARE this snippet doesn't work as expected. see the UPDATE below

<% control Menu(1) %>
<% if Pos == 1 || Pos == 2 %>
<div>render items 1 and 2 here</div>
<% end_if %>
<% end_control %>

<% control Menu(1) %>
<% if Pos == 3 || Pos == 4 %>
<div>render items 3 and 4 here</div>
<% end_if %>
<% end_control %>

just note that <% if Pos < 3 %> syntax isn't supported. for a cleaner way to do the same thing, refer to this snippet on ssbits.

UPDATE

unfortunately, silverstripe doesn't seem to support more complex conditions as above either. this one is supported (as in the docs):

<% if MyBoolean || MyOtherBoolean %>

whereas this one isn't:

<% if MyInteger == 1 || MyInteger == 2 %>

so, the best solution seems to be the second one i pointed you too (the snippet on ssbits above). in your case, this could read as follows:

add functions to the 'Page' class you're using to check the current position:

public function InFirstDiv() {
  return ($this->iteratorPos == 1 || $this->iteratorPos == 2);
}
public function InSecondDiv() {
  return ($this->iteratorPos == 3 || $this->iteratorPos == 4);
}

then, call them in your template:

<% control Menu(1) %>
<% if InFirstDiv %>
<div>render items 1 and 2 here</div>
<% end_if %>
<% end_control %>

<% control Menu(1) %>
<% if InSecondDiv %>
<div>render items 3 and 4 here</div>
<% end_if %>
<% end_control %>

doesn't look very smart - but should work this time :)

Answer 2

IMHO you do NOT want to structure this on the position, because if you want to change it to 1-3 pages in the first and 4-5 in the second div, you'd need to change the underlying template.

Instead I would create 2 pages (probably redirect pages - you can select that in the CMS) under which you'd add the pages you want to display in your template. So you would have something like this in the CMS:

• Redirect page /foo
  • Page1
  • Page2
• Redirect page /bar
  • Page3
  • Page4

In your template you could then use <% control ChildrenOf(foo) %> (or bar) to access the pages of your two different regions.

NOTE: If you run into template errors, be sure to put your page into development mode and append ?showtemplate=1 to your URL. This will show you the compiled template file where you can then find the actual error.

PS: Obviously you'll need to change your template if you change the URLs, but that's something I try to avoid on live projects (broken external links,...), while new menu entries are pretty common.