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   5678 Views

Avatar
jkd77

Community Member, 12 Posts

6 January 2009 at 5:48am

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

Community Member, 12 Posts

6 January 2009 at 6:06am

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

Community Member, 12 Posts

6 January 2009 at 7:31am

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

Community Member, 1 Post

22 January 2009 at 3:15am

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

Community Member, 12 Posts

22 January 2009 at 4:54am

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

Community Member, 42 Posts

4 September 2009 at 7:59am

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

Avatar
Web Designer Perth

Community Member, 49 Posts

20 September 2009 at 8:49pm

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

Community Member, 42 Posts

21 September 2009 at 5:32am

Edited: 21/09/2009 5:38am

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