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, simon_w

3rd level menu


Reply

5 Posts   2747 Views

Avatar
Webdoc

28 November 2009 at 1:14am Community Member, 332 Posts

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

7 July 2010 at 1:05am Community Member, 4 Posts

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
Pigeon

7 July 2010 at 11:22am Community Member, 243 Posts

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

21 July 2010 at 11:41am Community Member, 52 Posts

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

20 October 2010 at 10:00am Community Member, 3 Posts

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>