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.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

multi level dropdown+flyout menu?


Reply


5 Posts   2492 Views

Avatar
Pix

Community Member, 153 Posts

3 November 2010 at 12:16pm

Hi All,

I need to integrate a drop down menu just like this for my main navigation:

http://www.cssplay.co.uk/menus/ul-multi.html

Unfortunately, I do not understand how the menu system works or even where to begin integrating such a menu. Is there a tutorial for the menu system that shows how to integrate such a menu, or a working example of a drop down menu, perhaps on one of the templates? I've been through most of the tutorials, just can;t find anything about building the fancy menu I need.

Thank you

Avatar
Howard

Community Member, 215 Posts

3 November 2010 at 3:06pm

For a menu like that to work you need to have a nested sitemap made out of unordered lists and list items. From that CSS styles can be applied to make the menu look like the one in your example. To use SilverStripe to generate your nested unordered lists you could use this code:

<ul id="nav">    
<% control Menu(1) %>
   <li class="$LinkingMode"><a class="firstlevel" href="$Link" title="$Title">$MenuTitle</a>
      <% if Children %>
      <ul>
      <% control Children %>
      <li class="$LinkingMode"><a class="secondlevel" href="$Link" title="$Title">$MenuTitle</a>
         <% if Children %>
         <ul>
         <% control Children %>
         <li class="$LinkingMode"><a class="thirdlevel" href="$Link" title="$Title">$MenuTitle</a></li>
         <% end_control %>
         </ul>
         <% end_if %>
      </li>
      <% end_control %>
      </ul>
      <% end_if %>
   </li>
<% end_control %>
</ul>

This will give you a list of all pages in your site up to 3 layers deep. Then use the CSS styles from that site (or any other similar ones) to style it with hover effects and all that jazz.

This is quite a good tutorial on how those menus work [url]http://www.alistapart.com/articles/horizdropdowns/[/url].

Post any follow up questions :)

Avatar
Pix

Community Member, 153 Posts

3 November 2010 at 3:21pm

Excellent, thank you! That looks like it makes sense to me, I'll give it a go!

Avatar
CiderJack

Community Member, 1 Post

17 March 2011 at 1:21pm

This looks like exactly the solution I need as well (thanks, Howard)! However, does this go in the Navigation.ss file, or somewhere else? What snippets of code would I stick this between and/or replace? (Heavily modifying the default blackcandy theme, finding SS to be quite flexible so far!)

Avatar
Pix

Community Member, 153 Posts

19 March 2011 at 5:44am

It is best to put your menu in an include file, and then just include it in your menu div, something like:

<div id="menu">
<% if Menu(1) %>
      <% include Menu1 %>
<% end_if %>
</div>

The second tutorial covers the use of include files and is very helpful:
http://doc.silverstripe.org/sapphire/en/tutorials/2-extending-a-basic-site