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're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Template Questions /

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

how do I build a multi level menu?


Go to End


2 Posts   1849 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