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

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 http://www.alistapart.com/articles/horizdropdowns/.

Post any follow up questions :)

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

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!)

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