support navbar menus

daattali · daattali · commit b2809cdf8102 · 2016-03-17T20:46:26.000-07:00
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -13,25 +13,53 @@
     <div class="collapse navbar-collapse" id="main-navbar">
       <ul class="nav navbar-nav navbar-right">
       {% for link in site.navbar-links %}
-	{% capture before %}{{ link[1] | split: "://" | first }}{% endcapture %}
-        {% capture after %}{{ link[1] | split: "://" | last }}{% endcapture %}
-        <li>
-          {% assign internal = true %}
-          {% if before != after %}
-            {% if before == "http" or before == "https" %}
-              {% assign internal = false %}
-            {% endif %}
-          {% endif %}
-        	
-        {% if internal %}
-          {% capture linkurl %}{{ site.baseurl }}/{{ link[1] }}{% endcapture %}
+        {% if link[1].first %}
+          <li class="navlinks-container">
+            <a class="navlinks-parent" href="javascript:void(0)">{{ link[0] }}</a>
+            <div class="navlinks-children">
+              {% for childlink in link[1] %}
+                {% for linkparts in childlink %}
+                  {% capture before %}{{ linkparts[1] | split: "://" | first }}{% endcapture %}
+                  {% capture after %}{{ linkparts[1] | split: "://" | last }}{% endcapture %}            
+                  {% assign internal = true %}
+                  {% if before != after %}
+                    {% if before == "http" or before == "https" %}
+                      {% assign internal = false %}
+                    {% endif %}  
+                  {% endif %}
+      
+                  {% if internal %}
+                    {% capture linkurl %}{{ site.baseurl }}/{{ linkparts[1] }}{% endcapture %}
+                  {% else %}
+                    {% capture linkurl %}{{ linkparts[1] }}{% endcapture %}
+                  {% endif %}
+      
+                  <a href="{{ linkurl }}">{{ linkparts[0] }}</a>
+                {% endfor %}
+              {% endfor %}
+            </div>
+          </li>
         {% else %}
-          {% capture linkurl %}{{ link[1] }}{% endcapture %}
-        {% endif %}
+          <li>
+            {% capture before %}{{ link[1] | split: "://" | first }}{% endcapture %}
+            {% capture after %}{{ link[1] | split: "://" | last }}{% endcapture %}            
+            {% assign internal = true %}
+            {% if before != after %}
+              {% if before == "http" or before == "https" %}
+                {% assign internal = false %}
+              {% endif %}  
+            {% endif %}
 
-	      <a href="{{ linkurl }}">{{ link[0] }}</a>
-	      </li>
-      {% endfor %}
+            {% if internal %}
+              {% capture linkurl %}{{ site.baseurl }}/{{ link[1] }}{% endcapture %}
+            {% else %}
+              {% capture linkurl %}{{ link[1] }}{% endcapture %}
+            {% endif %}
+
+            <a href="{{ linkurl }}">{{ link[0] }}</a>
+          </li>
+        {% endif %}
+        {% endfor %}
       </ul>
     </div>
 	
diff --git a/css/main.css b/css/main.css
@@ -177,6 +177,50 @@ img::-moz-selection {
   }
 }
 
+/* Multi-level navigation links */
+.navbar-custom .nav .navlinks-container {
+  position: relative;
+}
+.navbar-custom .nav .navlinks-parent:after {
+  content: " \25BC";
+}
+.navbar-custom .nav .navlinks-children {
+  width: 100%;
+  display: none;
+}
+.navbar-custom .nav .navlinks-container .navlinks-children a {
+  display: block;
+  padding: 10px;
+  padding-left: 30px;
+  background: #f5f5f5;
+  text-decoration: none !important;
+  border-width: 0 1px 1px 1px;
+}
+@media only screen and (max-width: 767px) {
+  .navbar-custom .nav .navlinks-container.show-children {
+    background: #eee;
+  }
+  .navbar-custom .nav .navlinks-container.show-children .navlinks-children {
+    display: block;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .navbar-custom .nav .navlinks-container:hover {
+    background: #eee;
+  }
+  .navbar-custom .nav .navlinks-container:hover .navlinks-children {
+    display: block;
+  }
+  .navbar-custom .nav .navlinks-children {
+    position: absolute;
+  }
+  .navbar-custom .nav .navlinks-container .navlinks-children a {
+    padding-left: 10px;
+    border: 1px solid #eaeaea;
+    border-width: 0 1px 1px;
+  }
+}
+
 /* --- Footer --- */
 
 footer {
diff --git a/js/main.js b/js/main.js
@@ -10,7 +10,19 @@ $(window).scroll(function() {
 // On mobile, hide the avatar when expanding the navbar menu
 $('#main-navbar').on('show.bs.collapse', function () {
   $(".navbar").addClass("top-nav-expanded");
-})
+});
 $('#main-navbar').on('hidden.bs.collapse', function () {
   $(".navbar").removeClass("top-nav-expanded");
-})
+});
+
+// On mobile, when clicking on a multi-level navbar menu, show the child links
+$('#main-navbar').on("click", ".navlinks-parent", function(e) {
+  var target = e.target;
+  $.each($(".navlinks-parent"), function(key, value) {
+	if (value == target) {
+	  $(value).parent().toggleClass("show-children");
+	} else {
+	  $(value).parent().removeClass("show-children");
+	}
+  });
+});	
