Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Confused with Side Navigation Menu Structure

Our old forums are still available as a read-only archive.

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

Page: 1
Go to End
Author Topic: 2776 Views
  • AndyWiltshireNZ
    Avatar
    Community Member
    35 Posts

    Confused with Side Navigation Menu Structure Link to this post

    Hi,

    I am trying to create a side navigation menu similar to the following:

    index
    company
    - info1
    - info2
    products
    - product1
    - product2
    contact


    I have tried several coding methods and controllers for the last 3 hours, but cant get it to display the way I want, as follows:
    1. While on the 'index' page, I only want the menu to show 'index, company, products, contact'
    2. When on the 'company' page, I want it to display 'index, company (info1, info2), products, contact'
    3. When on the 'products' page, I want it to display 'index, company, products (product1, product2), contact'

    These must all display as shown above with each subpage listed under its parent page, ONLY IF on that parent page. The latest code I have been trying is as follows, but it displays all the sub-pages no matter what page parent I am on...

       <% control Menu(1) %>
       <li><a href="$Link" title="Go to the $Title.XML page" <% if LinkingMode %>class="$LinkingMode"><% end_if %>$MenuTitle</a>
             <% if Children %>
             <% control Children %>
                <li class="sub"><a href="$Link" title="Go to the $Title.XML page" class="$LinkOrSection">$MenuTitle</a></li>
             <% end_control %>
             <% end_if %>
          </li>
       <% end_control %>

    If someone could show me the correct code to use, it would be much appreciated, thanks in advance guys!

    Andy

  • spenniec
    Avatar
    Community Member
    37 Posts

    Re: Confused with Side Navigation Menu Structure Link to this post

    Hi Andy,

    You need to test if the menu item you are currently on in the Menu(1) loop is the current page by adding the page control
    <% if LinkOrCurrent = current %>
    around the <% if Children %>
    You may also want to enclose the children list in a ul so you can have greater control when styling and then class the ul.

    <% control Menu(1) %>
    <li><a href="$Link" title="Go to the $Title.XML page" <% if LinkingMode %>class="$LinkingMode"><% end_if %>$MenuTitle</a>
    <% if LinkOrCurrent = current %>
    <% if Children %>
    <ul class="sub">
    <% control Children %>
    <li><a href="$Link" title="Go to the $Title.XML page" class="$LinkOrSection">$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% end_if %>
    <% end_if %>
    </li>
    <% end_control %>

  • AndyWiltshireNZ
    Avatar
    Community Member
    35 Posts

    Re: Confused with Side Navigation Menu Structure Link to this post

    Ahh perfect, that worked exactly how I wanted it, thanks spenniec! I am a graphic designer by trade, so this coding is only a secondary skill for me

    I do actually have one other question: I want to display all the level 1 and 2 pages within the content section of my home page along with the latest pages. I have a widget that does just latest pages in the sidebar section, but thats just for the sidebar. Looking through the tutorial I think I will have to create a new homepage type, so that this information is only displayed on that front page. Basically I want to be able to show an outline of the site content and latest content within the main homepage content section. Hope that makes sense. Thanks again!

  • saimo
    Avatar
    Community Member
    67 Posts

    Re: Confused with Side Navigation Menu Structure Link to this post

    This is the menu that I use at simonlindgren.pcriot.com:

    Menu1.ss:

    <% if Menu(1) %>
       <h3>Menu</h3>
       <ul id="Menu1">
          <% control Menu(1) %>
             <% if LinkOrSection = section %>
                <% if Children %>
                   <li class="$LinkingMode"><a href="$Link" title="GÃ¥ till sidan &quot;$Title&quot;">$MenuTitle</a>
                      <% if ClassName = BlogHolder %>
                      <% else %>
                         <% include Menu1_Level2 %>
                      <% end_if %>
                   </li>
                <% else %>
                   <li class="$LinkingMode"><a href="$Link" title="GÃ¥ till sidan &quot;$Title&quot;">$MenuTitle</a></li>
                <% end_if %>
             <% else %>
                <li class="$LinkingMode"><a href="$Link" title="GÃ¥ till sidan &quot;$Title&quot;">$MenuTitle</a></li>
             <% end_if %>
          <% end_control %>
       </ul>
    <% end_if %>

    Menu1_Level2.ss:

    <% if Children %>
       <ul>
          <% control Children %>
             <li class="$LinkingMode"><a href="$Link" title="GÃ¥ till sidan &quot;$Title&quot;">$MenuTitle</a></li>
             <% if LinkOrSection = section %>
                <% if Children %>
                <% end_if %>
             <% end_if %>
          <% end_control %>
       </ul>
    <% end_if %>

    This system can be expanded to support more levels, though Menu1_Level2.ss will need some editing for that. It is not really as good as it can be, but it works fine for my so far only two levels.

  • AndyWiltshireNZ
    Avatar
    Community Member
    35 Posts

    Re: Confused with Side Navigation Menu Structure Link to this post

    Thanks saimo. After implementing spenniec's code, theres actually one little problem with it, when I navigate to the subpage, that page disappears from the menu too.

    company (level1) - when on the company page, the info1 subpage is displayed correctly.

    company
    - info1

    info1 (level2) - when on the info1 subpage, the info1 subpage disappears from the menu, when it should remain to highlight the current page.

    company

    Thanks in advance,

  • AntonyJ
    Avatar
    Community Member
    1 Post

    Re: Confused with Side Navigation Menu Structure Link to this post

    If you want to keep the 'parent' menu displayed when you navigate to the final 'child' pages, use;

    <% if LinkOrSection = section %>

    rather than <% if LinkOrCurrent = current %>.

    This should give you the desired results??!

    2776 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.