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.

Template Questions

Unwanted <ul></ul> in Navigation


Reply

2 Posts   448 Views

Avatar
DrGreenThumb

17 December 2012 at 10:30am (Last edited: 17 December 2012 11:32am), Community Member, 1 Post

Hi there,

I'm creating a 3-level-navigation at the moment. For designing it afterwards with CSS, I need to put some <ul> and <li> tags around the navigation points. However, Silverstripe 3 creates too many <ul></ul>s.

Here is my Silverstripe code:

<div id="navi">
   <% if Menu(1) %>
      <ul><% loop Menu(1) %>     
         <li><a href="$Link" title="go to $Title">$MenuTitle</a></li>
   <% if ClassName = Page %>
            <ul><% loop Children %>
               <li><a href="$Link" title="go to $Title">$MenuTitle</a></li>
                  <ul><% loop Children %>
                     <li><a href="$Link" title="go to $Title">$MenuTitle</a></li>
                  <% end_loop %></ul>
            <% end_loop %></ul>
   <% end_if %>
   <% end_loop %></ul>
   <% end_if %>
   <% if LinkOrSection = section %>
   <% end_if %>
</div>

And here is the result on the final page:

<div id="navi">
   <ul>
      <li><a href="/~silverstripe/" title="go to Page 1">Page 1</a></li>
            
                         <ul></ul>
                     
      <li><a href="/~silverstripe/page-2/" title="go to Page 2">Page 2</a></li>
          <ul>
             <li><a href="/~silverstripe/page-2/page-2.1/" title="go to Page 2.1">Page 2.1</a></li>
                <ul>
                   <li><a href="/~silverstripe/page-2/page-2.1/page-2.1.1/" title="go to Page 2.1.1">Page 2.1.1</a></li>
                   <li><a href="/~silverstripe/page-2/page-2.1/page-2.1.2/" title="go to Page 2.1.2">Page 2.1.2</a></li>
                </ul>
             <li><a href="/~silverstripe/page-2/page-2.2/" title="go to Page 2.2">Page 2.2</a></li>
      
                         <ul></ul>

          </ul>
      <li><a href="/~silverstripe/page-3/" title="go to Page 3">Page 3</a></li>
                     
                         <ul></ul>
                     
      <li><a href="/~silverstripe/page-4/" title="go to Page 4">Page 4</a></li>
                     
                         <ul></ul>
                     
   </ul>
</div>

For better readabilty, I have renamed the pages. As you can see, there are a lot of unneccessary <ul></ul>s after each loop that found no subpoints. Do you have any idea how I can get them out?

Thank you very much in advance!

Avatar
kaanuni

20 December 2012 at 3:36am Community Member, 22 Posts

This is because the tags are outside of the loop block. However moving them inside the loop would not solve your problem. You need to do something like this:

<% if Children %>
<ul>
<% loop Children %>
<li>....</li>
<% end_loop>
</ul>
<% end_if %>