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

navigation drop down control


Go to End
Reply

15 Posts   5661 Views

Avatar
jkd77

6 January 2009 at 5:48am Community Member, 12 Posts

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!

Avatar
jkd77

6 January 2009 at 6:06am Community Member, 12 Posts

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?

Avatar
jkd77

6 January 2009 at 7:31am Community Member, 12 Posts

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

Avatar
crang

22 January 2009 at 3:15am Community Member, 1 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

Avatar
jkd77

22 January 2009 at 4:54am Community Member, 12 Posts

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

Avatar
AlaVive

4 September 2009 at 7:59am Community Member, 42 Posts

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

Avatar
Web Designer Perth

20 September 2009 at 8:49pm Community Member, 49 Posts

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>

Avatar
AlaVive

21 September 2009 at 5:32am (Last edited: 21 September 2009 5:38am), Community Member, 42 Posts

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.

Go to Top