Template dropdown.html now handles multi-level dropdowns.

Shamelessly lifted with minor modifications from: http://bootply.com/74918
stephenmcd · Nov 5, 2013 · a093a5d · a093a5d
1 parent 4977bed
commit a093a5d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 8 deletions.
diff --git a/mezzanine/core/static/css/mezzanine.css b/mezzanine/core/static/css/mezzanine.css
@@ -63,6 +63,49 @@ img.pull-left {
 .timespan {
   color: #888;
 }
+/*========================================
+          MULTILEVEL DROPDOWN NAV
+==========================================*/
+.dropdown-submenu {
+  position: relative;
+}
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  border-top-left-radius: 0;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+.dropdown-submenu > a:after {
+  display: inline-block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 4px 0 4px 4px;
+  border-left-color: #777;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+.dropdown-submenu > a:hover:after {
+  border-left-color: #333;
+}
+.dropdown-submenu.active > a:after {
+  border-left-color: #fff;
+}
+.dropdown-submenu.pull-left {
+  float: none;
+}
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  border-top-right-radius: 0;
+}
 /*========================================
             MEZZANINE BLOG
 ==========================================*/

diff --git a/mezzanine/pages/templates/pages/menus/dropdown.html b/mezzanine/pages/templates/pages/menus/dropdown.html
@@ -6,17 +6,17 @@
 <ul class="nav navbar-nav">
     {% for page in page_branch %}
     {% if not has_home and page.is_primary and forloop.first %}
-    <li class="{% if on_home %} active{% endif %}" id="dropdown-menu-home">
+    <li{% if on_home %} class="active"{% endif %} id="dropdown-menu-home">
         <a href="{% url "home" %}">{% trans "Home" %}</a>
     </li>
     {% endif %}
     {% if page.in_menu %}
     <li class="{% if page.has_children_in_menu %}dropdown{% endif %}
-               {% if page.is_current_or_ascendant %} active{% endif %}"
-        id="dropdown-menu-{{ page.html_id }}">
+               {% if page.is_current_or_ascendant %}active{% endif %}"
+        id="{{ page.html_id }}">
         <a href="{{ page.get_absolute_url }}"
         {% if page.has_children_in_menu %}
-        class="dropdown-toggle disabled" data-toggle="dropdown"            
+        class="dropdown-toggle disabled" data-toggle="dropdown"
         {% endif %}>
             {{ page.title }}
             {% if page.has_children_in_menu %}<b class="caret"></b>{% endif %}
@@ -26,15 +26,16 @@
     {% endif %}
     {% endfor %}
 </ul>
-{% endif %}
 
-{% if branch_level == 1 %}
+{% else %}
 <ul class="dropdown-menu">
     {% for page in page_branch %}
     {% if page.in_menu %}
-    <li{% if page.is_current_or_ascendant %} class="active"{% endif %}
-        id="dropdown-menu-{{ page.html_id }}">
+    <li class="{% if page.has_children_in_menu %}dropdown-submenu{% endif %}
+               {% if page.is_current_or_ascendant %}active{% endif %}"
+        id="{{ page.html_id }}">
         <a href="{{ page.get_absolute_url }}">{{ page.title }}</a>
+        {% if page.has_children_in_menu %}{% page_menu page %}{% endif %}
     </li>
     {% endif %}
     {% endfor %}