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.

Template Questions /

how do I build a multi level menu?


Reply


2 Posts   1354 Views

Avatar
kazuhisa

Community Member, 3 Posts

9 March 2011 at 3:42am

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

Avatar
Willr

Forum Moderator, 5513 Posts

9 March 2011 at 9:41pm

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 :D