Jump to:

22977 Posts in 11806 Topics by 2826 members

General Questions

SilverStripe Forums » General Questions » multi level dropdown+flyout menu?

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

Page: 1
Go to End
Author Topic: 2135 Views
  • Pix
    Avatar
    Community Member
    120 Posts

    multi level dropdown+flyout menu? Link to this post

    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

  • Howard
    Avatar
    Community Member
    215 Posts

    Re: multi level dropdown+flyout menu? Link to this post

    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

  • Pix
    Avatar
    Community Member
    120 Posts

    Re: multi level dropdown+flyout menu? Link to this post

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

  • CiderJack
    Avatar
    Community Member
    1 Post

    Re: multi level dropdown+flyout menu? Link to this post

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

  • Pix
    Avatar
    Community Member
    120 Posts

    Re: multi level dropdown+flyout menu? Link to this post

    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

    2135 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.