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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

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

how do I build a multi level menu?


Go to End


2 Posts   2283 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, 5523 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