Jump to:

3401 Posts in 979 Topics by 855 members

Template Questions

SilverStripe Forums » Template Questions » how do I build a multi level menu?

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

Page: 1
Go to End
Author Topic: 1131 Views
  • kazuhisa
    Avatar
    Community Member
    3 Posts

    how do I build a multi level menu? Link to this post

    I'm sorry, but I just read 4 hours all I can find about to build a multi level menu. Your search gives out more than thousand entries about that. I think it would be a good idea to do a small example for all people who ask the question?

    I have no background, no CSS and no code.
    Now I'm use a simple code from a sample:

    <ul>
    <% control Menu(1) %>   
    <li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a></li>
    <% end_control %>
    </ul>


    and a simple CSS for it:

    ul {
       position: relative;
       right: 0; top: 0;
       color: #FFF;
       list-style: none;
       margin: 0; padding: 0;   
       font-size: .8em;   
    }
    li {
       display: inline;
       text-align: center;
    }
    li a {
       float: left;
       display: block;
       width: 155px;
       padding: 6px 0;
       color: #FFF;
       background-color: #333;
       text-decoration: none;
       border-right: 1px solid #ddf1f8;
    }
    li a:hover {
       background: #65944A;
       color: #FFF;
    }
    li a.current {
       background: #65944A;
       color: #FFF;
    }

    It does work for the first level, also to highlight the current site.
    What I have to do to get an pulldown-menu of that, so that I can see the other subentries of my menu / site?

    I'm not a programmer and I'm not a designer. I'm a dummy, so please if you answer me, help me like your five yeras old daughter ;)

  • Willr
    Avatar
    Forum Moderator
    5464 Posts

    Re: how do I build a multi level menu? Link to this post

    If you want to use a pull down menu, the hardest part is getting the CSS and HTML setup. I quite like the CSS based dropdowns at http://www.cssplay.co.uk/menus/

    I've posted an example reference from a project I did (https://gist.github.com/861893) both the CSS and the HTML you need are there. Just copy the contents of those to your template and css file. I haven't tested that code fully yet but at the very least you'll need to alter it to suit your colour scheme.

    If I get more time I'll write a blog post explaining it in a bit more detail. Unless someone else wants to

    1131 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.