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.

Themes /

Discuss SilverStripe Themes.

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

3rd level menu


Go to End
Reply


5 Posts   3041 Views

Avatar
Webdoc

Community Member, 341 Posts

28 November 2009 at 1:14am

How to crteate 3rd level menu in blackcandy theme.

The menu code is:

<div id="Sidebar" class="typography">
	<div class="sidebarBox">
 		<h3>
			<% control Level(1) %>
				$Title
			<% end_control %>
  		</h3>
  		
  		<ul id="Menu2">
		  	<% control Menu(2) %>
  	    		<% if Children %>
			  	    <li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levela"><span><em>$MenuTitle.XML</em></span></a>
	  	    	<% else %>
		  			<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levela"><span><em>$MenuTitle.XML</em></span></a>
				<% end_if %>	  
	  		
	  			<% if LinkOrSection = section %>
	  				<% if Children %>
						<ul class="sub">
							<li>
								<ul class="roundWhite">
									<% control Children %>
										<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levelb"><span><em>$MenuTitle.XML</em></span></a></li>
									<% end_control %>
								</ul>
							</li>
						</ul>
			 		 <% end_if %>
				<% end_if %> 
			</li> 
  			<% end_control %>
  		</ul>
		<div class="clear"></div>
	</div>
	<div class="sidebarBottom"></div>
</div>

Avatar
Savy

Community Member, 4 Posts

7 July 2010 at 1:05am

Have you tested this? I'm trying to use a 3rd level menu for over a week now, still no luck. I did managed to make it appear, but not to apear on click (it opens when I click on the 2nd level menu items).

Avatar
dhensby

Community Member, 247 Posts

7 July 2010 at 11:22am

What's the issue with just using:

<% control Menu(3) %>
...
<% end_control %>

I'm using this on a current project right now...

Avatar
Shauna G

Community Member, 52 Posts

21 July 2010 at 11:41am

Savy - The second level menus open on mouseover because of CSS. Simply apply styling to the second level's "li:hover"/"a:hover" section in the CSS like it is for the first level menus (to display second level), and your 3rd level should work the same as the second. It might take a little playing with the CSS to get it lined up right.

Avatar
Sylar2010

Community Member, 3 Posts

20 October 2010 at 10:00am

Here's a code to display a 3rd level menu on the same page. Obviously, you would need to style the <ul> and <li> within you CSS, but the general idea is there:

<div id="Sidebar" class="typography">
<div class="sidebarBox">
<h3>
<% control Level(1) %>
$Title
<% end_control %>
</h3>

<ul id="Menu2">
<% control Menu(2) %>
<% if Children %>
<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levela"><span><em>$MenuTitle</em></span></a>
<% else %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levela"><span><em>$MenuTitle</em></span></a>
<% end_if %>
<ul class="sub">
<span class="roundWhite">
<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levelb"><span><em>$MenuTitle</em></span></a></li>
<% if LinkOrSection = section %>
<% if Children %>
<ul class="sub">
<li>
<ul>
<span class="roundWhite">
<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levelb"><span><em>$MenuTitle</em></span></a></li>
<% end_control %>
</span>
</ul>
<% end_control %>
</span>
</ul>
</li>
</ul>
<% end_if %>
<% end_if %>
<% end_control %>
<div class="clear"></div>
</div>
<div class="sidebarBottom"></div>
</div>