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, Ed, biapar, Willr, Ingo, swaiba

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


Go to End
Reply


3 Posts   168 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;}