21286 Posts in 5733 Topics by 2602 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 1727 Views |
-
multi level dropdown+flyout menu?
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
-
Re: multi level dropdown+flyout menu?
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 http://www.alistapart.com/articles/horizdropdowns/.
Post any follow up questions
-
Re: multi level dropdown+flyout menu?
3 November 2010 at 3:21pm
Excellent, thank you! That looks like it makes sense to me, I'll give it a go!
-
Re: multi level dropdown+flyout menu?
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!)
-
Re: multi level dropdown+flyout menu?
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
| 1727 Views | ||
|
Page:
1
|
Go to Top |
