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.

Bootstrap Navbar mulitilevel menu works on lvl1 and 2 but not 3 [SOLVED] » Themes

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.

Themes /

Discuss SilverStripe Themes.

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

Bootstrap Navbar mulitilevel menu works on lvl1 and 2 but not 3 [SOLVED]

Go to End


3 Posts   1869 Views

Avatar
AD5XJ

Community Member, 35 Posts

22 June 2017 at 4:04am

I have a bootstrap navbar nav menu defined in Navigation.ss that looks like this:

<div class="navbar navbar-inverse"><!-- Begin NavBar Section -->
   <div class="navbar-inner">
    <ul class="nav nabvar-nav multi-level" id="lvl1"><!-- MAIN(1) Menu --><% loop $Menu(1) %><% if Children %>
     <li class="dropdown"><!-- MAIN(1) Item --><% if Children %>
      <a class="dropdown-toggle" data-toggle="dropdown" style="color: white;" href="$Link" title="$Title.XML">$MenuTitle.XML&nbsp;&nbsp;<span class="caret"></span></a>
      <ul class="dropdown-menu" id="lvl2"><!-- MAIN Dropdown has children --><% loop Children %><% if Children %>
       <li class="dropdown"><!-- MAIN Item Dropdown Item -->
        <a class="data-toggle" data-toggle="dropdown" href="$Link" title="$Title.XML">$MenuTitle.XML&nbsp;&nbsp;&#8628;</a>
        <ul class="dropdown-menu" id="lvl3"><!-- MAIN item Dropdown Item Dropdown --><% loop Children %>
         <li><!-- MAIN Dropdown Item Dropdown Item -->
          <a style="color: black;" href="$Link" title="$Title.XML">$MenuTitle.XML&nbsp;</a>
         </li><!-- end lvl2 item --><% end_loop %>
        </ul><% else %><!-- MAIN Item Not Dropdown -->
       <li>
        <a style="color: black;" href="$Link" title="$Title.XML">$MenuTitle.XML&nbsp;</a><% end_if %>
       </li><!-- end lvl 1 dropdown item --><% end_loop %>
      </ul><!-- end main dropdown item list item --><% else %><!-- MAIN Item Dropdown Item has no children -->
     <a href="$Link" title="$Title.XML">$MenuTitle.XML&nbsp;</a><% end_if%>
     </li><!-- end level 1 list item --><% else %><!-- NO MAIN(1) Item Children -->
    <li><a  style="color: white;" href="$Link" title="$Title.XML">$MenuTitle.XML&nbsp;</a></li><!-- end main no dropdown --><% end_if %><% end_loop %> <!-- END MAIN(1) LOOP -->
   </ul><!-- END OF NAVBAR MENU LIST -->
  </div><% if $SearchForm %><span class="search-dropdown-icon">L</span><div class="search-bar">$SearchForm</div><% end_if %>
 </div><!-- navbar ends -->

It looks great for the level 1 and two but when the last menu is displayed, the items are listed vertically under the dropdown item.

Here is the CSS for this item defined in layout.css.

/* Primary navigation */
   /* Main Menu Navbar styles */
.nav { display: block; position: relative; margin-top: 0px; color: #999; }
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus 
{
  margin-top: 0px;
  color: blue;
  height: 2.1em; 
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.nav ul li.dropdown:hover
{
  margin-top: 0px; 
  color: #999; 
  height: 2.1em; 
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.nav ul li.dropdown:open
{
  margin-top: 0px; 
  color: #999; 
  height: 2.4em; 
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.nav ul li.dropdown:active 
{
  margin-top: 0px; 
  color: #999; 
  height: 2.4em; 
  background: #ccccee; 
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.nav ul li a { padding: 8px 10px; }
.navbar 
{
  position: relative;
  width: 100%;
  height: 2.1em; 
  margin-bottom: 6px;
  min-height: 20px; 
  padding-left: 10%;
  border: 1px solid #999;
  background: #5c5e6a;
  background: -webkit-linear-gradient(top, #7c7e8a 0%,#2c2d33 100%);
  background: -moz-linear-gradient(top, #7c7e8a 0%,#2c2d33 100%);
  background: -o-linear-gradient(top, #7c7e8a 0%,#2c2d33 100%);
  background: -ms-linear-gradient(top, #7c7e8a 0%,#2c2d33 100%);
  background: linear-gradient(top, #7c7e8a 0%,#2c2d33 100%);
}
.navbar ul    { list-style-type: none; padding-top: 0px; }
.navbar ul li 
{
  float: left; 
  height: 2em;
  padding-right: 15px; 
  margin-bottom: 0;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.navbar ul li a 
{
  font-family: Cinzel, 'Open Serif', 'Times New Roman', 'DejaVu Serif', 'Liberation Serif', serif;
  font-size: 1.1em; 
  vertical-align: middle;
  text-decoration: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.navbar ul li a:hover
{
  background-color: black; 
  color: #6666ee;
  font-size: 1.4em;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.navbar ul li a:active, 
.navbar ul li a:focus { height: 2.1em; font-size: 1.1em; background: black; color: #6666ee; }
.navbar ul li ul li { text-decoration: none; }
.navbar ul li ul li a:hover { height: 100%; margin: 0; padding-top: 3px; font-size: 1.2em; font-weight: bold; color: #6666ff; background: transparent; }
.navbar ul li ul li a:focus 
{
  height: 2.3em;
  font-size: 1.1em; 
  background: #ddeedd; 
  vertical-align: middle; 
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.navbar-nav { height: 2.3em; }

.navbar-inverse { height: 2.3em; font-family: Cinzel, serif; font-size: 1.4em; color: white; }
.navbar li.dropdown.open  { color: blue; height: 2.1em; }
.navbar li.dropdown.focus { color: blue; height: 2.1em; }
.navbar li.dropdown.active { color: blue; height: 2.1em; }
.navbar ul.dropdown-menu:open 
{
  color: blue;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.navbar .sub-menu:before 
{
  left: -7px;
  top: 10px;
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
}
.navbar .sub-menu:after 
{
  left: 10px;
  top: 11px;
  left: -6px;
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
}


.navbar-nav .dropdown-menu { position: relative; color: #999; } 

.dropdown-menu .sub-menu { visibility: hidden;  margin-top: -1px; }
.dropdown-menu ul li
{
  float: left;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.dropdown-menu ul li a:focus { color: blue; }
.dropdown-menu ul li:hover .sub-menu { visibility: visible; display: block; }
.dropdown-menu ul li ul li a { text-decoration: none; }
.dropdown-menu ul li ul li a:hover
{
  height: 2.3em;
  font-size: 1em; 
  background: #cceecc; 
  color: black; 
  vertical-align: middle; 
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}

This code renders a menu that looks like:
Main Item
->Sub Item
->Sub Item Dropdown
--->Dropdown Item
Dropdown Item Item
Dropdown Item Item
Dropdown Item Item
...instead of ...
Main Item
->Sub Item
->Sub Item Dropdown
--->Dropdown Item
------->Dropdown Item Item
------->Dropdown Item Item
------->Dropdown Item Item

I know it has to be obvious but I am not seeing it.

Avatar
AD5XJ

Community Member, 35 Posts

1 July 2017 at 2:05am

OK, well after no response from this group, I did A LOT of searching on the web, and considerable experimentation, I did manage to get all three levels to appear with this code:

Navigation.ss

<section id="mainmenu0">
  <div class"container-fluid" style="height: 100%; ">
   <nav class="navbar navbar-inverse">
    <div>
     <ul class="nav navbar-nav">
    <% loop MENU(1) %>
    <% if Children %>
      <li class="dropdown">
       <a tabindex="-1" class="primary dropdown-toggle" data-toggle="dropdown" style="color: white;" href="#">$MenuTitle.XML&nbsp;&nbsp;<span class="caret"></span></a>
       <ul class="dropdown-menu">
       <% loop Children %>
       <% if Children %>
        <li class="dropdown">
         <a tabindex="-1" class="dropdown-toggle" data-toggle="dropdown" style="color: black;" href="$Link">$MenuTitle.XML&nbsp;&nbsp;<span class="caret"></span></a>
         <ul class="dropdown-submenu">
         <% loop Children %>
         <% if Children %>
          <li class="dropdown">
           <a tabindex="-1" class="dropdown-toggle" data-toggle="dropdown" href="$Link">$MenuTitle.XML&nbsp;&nbsp;<span class="caret"></span></a>
           <ul class="dropdown-menu">
           <% loop Children %>
           <%if Children %>
            <li><a href="$Link" title="$MenuTitle.XML" >$MenuTitle.XML</a></li>
           <% end_if %>
           <% end_loop %>
           </ul>
          </li>
         <% else %>
          <li><a tabindex="-1" href="$Link">$MenuTitle.XML</a></li>
         <% end_if %>
         <% end_loop%>
         </ul>
        </li>
       <% else %>
        <li><a tabindex="-1" href="$Link">$MenuTitle.XML</a></li>
       <% end_if %>
       <% end_loop %>
       </ul> 
      </li>
     <% else %> 
      <li><a href="$Link" title="$MenuTitle.XML">$MenuTitle.XML</a></li>
     <% end_if %>
     <% end_loop %>
     </ul>
    </div>
    </nav>
    </div>
   </section>

This plugs in nicely to the default bootstrap theme and sort of works. Levels one and two appear as they should, however, level 3 appears inline with the level two list always expanded. How do I get it to show up to the right and starting at the same position as the sub-menu item indicated with an arrow?

Avatar
AD5XJ

Community Member, 35 Posts

1 July 2017 at 3:06am

SUCCESS!!!

I finally hit on the solution by accident.

Change the following in the layout CSS: .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px;}

Go to Top
Go to TopReturn to top