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 🙂