support menus in navbar

_config.yml

@@ -1,4 +1,4 @@
-# --- Serving options --- #
+# --- General options --- #
 
 # url is the full website URL
 # baseurl is the website's URL without the hostname
@@ -21,16 +21,19 @@ description: A virtual proof that name is awesome!
 
 # --- Navigation bar options --- #
 
+# List of links in the navigation bar
+navbar-links:
+  About Me: "aboutme"
+  Resources:
+    - Beautiful Jekyll: "http://deanattali.com/beautiful-jekyll/"
+	- Learn markdown: "http://www.markdowntutorial.com/"
+	- GitHub Pages: "https://pages.github.com/"
+  Author's home: "http://deanattali.com"
+
 # Image to show in the navigation bar - image must be a square (width = height)
 # Remove this parameter if you don't want an image in the navbar
 avatar: "/img/avatar-icon.png"
 
-# List of links in the navigation bar
-navbar-links:
-  Home: ""
-  About Me: "aboutme"
-  Author's home: "http://deanattali.com"
-  
 # --- Footer options --- #
 
 # Change all these values or delete the ones you don't want.

_includes/nav.html

@@ -13,9 +13,36 @@
     <div class="collapse navbar-collapse" id="main-navbar">
       <ul class="nav navbar-nav navbar-right">
       {% for link in site.navbar-links %}
+        {% 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 %}
+          <li>
             {% 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" %}
@@ -31,6 +58,7 @@
 
             <a href="{{ linkurl }}">{{ link[0] }}</a>
           </li>
+        {% endif %}
         {% endfor %}
       </ul>
     </div>

css/main.css

@@ -182,6 +182,53 @@ img {
   }
 }
 
+/* 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;
+  word-break: break-word;
+}
+.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;
+  font-weight: normal;
+}
+@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;
+	text-align: center;
+  }
+  .navbar-custom .nav .navlinks-container .navlinks-children a {
+    padding-left: 10px;
+    border: 1px solid #eaeaea;
+    border-width: 0 1px 1px;
+  }
+}
+
 /* --- Footer --- */
 
 footer {

js/main.js

@@ -12,9 +12,21 @@ $(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");
+	}
+  });
+});	
 
 // 2fc73a3a967e97599c9763d05e564189