Jump to:

3435 Posts in 1026 Topics by 866 members

Template Questions

SilverStripe Forums » Template Questions » navigation drop down control

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

Page: 1 2
Go to End
Author Topic: 5558 Views
  • jkd77
    Avatar
    Community Member
    12 Posts

    navigation drop down control Link to this post

    I have successfully installed a top nav menu with drop down sub menus with the following code:

    <ul id="topNav">
       <% control Menu(1) %>   
          <li><a class="$LinkingMode" href="$Link" title="Go to the {$Title} page">$MenuTitle</a>
             <% if Children %>
                <ul>
                <% control Children %>
                   <li><a class="$LinkingMode" href="$Link" title="Go to the {$Title} page">$MenuTitle</a></li>
                <% end_control %>
                </ul>
             <% end_if %>
          </li>
       <% end_control %>
    </ul>

    However for certain links in the top nav, especially 'Blog' which uses the blog module, i don't want all the blog entries populating the drop down list as it could get quite long. I experimented with unchecking 'show in menus' for each blog entry in the cms, but that also removed the blog entry from the blog holder page entirely. Is there a way to use <% if ChildrenOf(blog) %> or something similar to either not show the blog entries in the top navigation drop down menu, or maybe show only the 5 most recent entries in the drop down?

    Thanks for any help in advance!

  • jkd77
    Avatar
    Community Member
    12 Posts

    Re: navigation drop down control Link to this post

    Just figured out how to NOT show sub menu links under blog, though i think this method is tied to the blog's title in the CMS, which may not be the best method:

    <ul id="topNav">
       <% control Menu(1) %>   
          <li><a class="$LinkingMode" href="$Link" title="Go to the {$Title} page">$MenuTitle</a>
             <% if Children %>
       <% if Title != Blog %>
    <ul>
    <% control Children %>
    <li><a class="$LinkingMode" href="$Link" title="Go to the {$Title} page">$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% end_if %>
    <% end_if %>
          </li>
       <% end_control %>
    </ul>

    Anyone know how to control the number of li's displayed in the submenu in the above example?

  • jkd77
    Avatar
    Community Member
    12 Posts

    Re: navigation drop down control Link to this post

    Figured out how to show the 5 most recent blog entries (used the show latest news on the homepage part of the tutorial basically):

    Inside Page.php I have:

    class Page extends SiteTree
    {
       ...
       
       function LatestBlogEntries($num=5)
       {
          //have if test first to see if blog exists
          $blogEntries = DataObject::get_one("BlogHolder");
          return ($blogEntries) ? DataObject::get("BlogEntry", "ParentID = $blogEntries->ID", "Date DESC", "", $num) : false;
       }
    }

    and inside my Navigation.ss include I have:

    <ul id="topNav">
       <% control Menu(1) %>   
          <li><a class="$LinkingMode" href="$Link" title="Go to the {$Title} page">$MenuTitle</a>
             <% if Children %>
       <% if Title == Blog %>
       <ul>
    <% control LatestBlogEntries %>
    <li><a class="$LinkingMode" href="$Link" title="Go to the {$Title} page">$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% else_if Title == News %>
       <ul>
    <% control LatestNews %>
    <li><a class="$LinkingMode" href="$Link" title="Go to the {$Title} page">$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% else %>
    <ul>
    <% control Children %>
    <li><a class="$LinkingMode" href="$Link" title="Go to the {$Title} page">$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% end_if %>
    <% end_if %>
          </li>
       <% end_control %>
    </ul>

    Hopefully this will prove useful to others...

  • crang
    Avatar
    Community Member
    1 Post

    Re: navigation drop down control Link to this post

    Hi jkd77, i am strating with SilverStripe now and trying to use a dropdown menu in my website.

    I am customizing the blackcandy theme, and copied the content of your post to the Navigation.ss , but instead of drop down menu i got a menu full of options listed.

    I have to change anything for the dropdown work or should i put this code somewhere else?

    tnx

  • jkd77
    Avatar
    Community Member
    12 Posts

    Re: navigation drop down control Link to this post

    Crang,

    You will also need some css (and js for IE6) to display the drop downs. As far as css is concerned, I would look here: http://htmldog.com/articles/suckerfish/dropdowns/

    That should get you started...

  • AlaVive
    Avatar
    Community Member
    42 Posts

    Re: navigation drop down control Link to this post

    Thank you so much for posting your code, jkd77. You've been a tremendous help!

  • Web Designer Perth
    Avatar
    Community Member
    49 Posts

    Re: navigation drop down control Link to this post

    I have this working so many thanks!

    _However_ I cannot for the life of me work out how to get a third-level -- the children of first children. Grand-children

    Can anyone help me out with what is, I'm sure, a noobish question? I am using the css direct from suckerfish (three-level).

    Here is my Navigation.ss

    <ul id="nav">
    <% control Menu(1) %>
    <li><a class="$LinkingMode" href="$Link" title="Go to the {$Title} page">$MenuTitle</a>
    <% if Children %>
    <ul>
    <% control Children %>
    <li><a class="$LinkingMode" href="$Link" title="Go to the {$Title} page">$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% end_if %>
    </li>
    <% end_control %>
    </ul>

  • AlaVive
    Avatar
    Community Member
    42 Posts

    Re: navigation drop down control Link to this post

    I'm thinking you need another <% control Children %> nestled in there.

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

    Willr does a better job explaining it in a post he addressed some time ago: http://silverstripe.org/archive/show/107582#post107582

    I hope this helps.

    5558 Views
Page: 1 2
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.