Support menus in navbar

4fe69971e3

layouts/partials/nav.html

@@ -13,10 +13,21 @@
     <div class="collapse navbar-collapse" id="main-navbar">
       <ul class="nav navbar-nav navbar-right">
       {{ range .Site.Menus.main.ByWeight }}
+        {{ if .HasChildren }}
+          <li class="navlinks-container">
+            <a class="navlinks-parent" href="javascript:void(0)">{{ .Name }}</a>
+            <div class="navlinks-children">
+            {{ range .Children }}
+              <a href="{{ .URL }}">{{ .Name }}</a>
+            {{ end }}
+            </div>
+          </li>
+        {{ else }}
           <li>
           <a title="{{ .Name }}" href="{{ .URL }}">{{ .Name }}</a>
   	      </li>
   	    {{ end }}
+      {{ end }}
       </ul>
     </div>
 

static/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 {

static/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

theme.toml

@@ -4,7 +4,7 @@ licenselink = "https://github.com/halogenica/Hugo-BeautifulHugo/blob/master/LICE
 description = "A port of Beautiful Jekyll theme"
 tags = ["blog", "company", "portfolio", "projects", "minimal", "responsive"]
 features = ["blog", "themes", "disqus", "minimal", "responsive"]
-min_version = 0.14
+min_version = 0.15
 
 [author]
     name = "halogenica"