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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Template Questions /

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

navigation drop down control


Go to End


15 Posts   7368 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