Implement the dropdown submenus on the navigation bar

zivong · Jun 24, 2020 · d382479 · d382479
1 parent db6725a
commit d382479
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -156,6 +156,23 @@ You can create a file `_data/navigation.yml` to configure links to some pages. F
   url: /tags/
 ```
 
+The navigation bar also supports dropdown submenus:
+
+```yml
+- title: About
+  url: /about/
+- title: Categories
+  url: /categories/
+- title: Tags
+  url: /tags/
+- title: More
+  sublinks:
+    - title: FAQ
+      url: /faq/
+    - title: Docs
+      url: /docs/
+```
+
 ### Social Media
 
 You can create a file `_data/social.yml` to configure links to your social media. For example,

diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -6,3 +6,9 @@
   url: /categories/
 - title: Tags
   url: /tags/
+- title: More
+  sublinks:
+    - title: FAQ
+      url: /faq/
+    - title: Docs
+      url: /docs/
diff --git a/_includes/header.html b/_includes/header.html
@@ -14,13 +14,24 @@
           </span>
         </label>
 
-        <div class="trigger">
-          {% for nav in site.data.navigation %}
-            {% if nav.title %}
-              <a class="page-link {% if page.url == nav.url %}current-page{% endif %}" href="{{ nav.url | relative_url }}">{{ nav.title | escape }}</a>
-            {% endif %}
-          {% endfor %}
-        </div>
+        <ul class="trigger">
+          {%- for nav in site.data.navigation -%}
+            {%- if nav.title -%}
+              {% if nav.sublinks %}
+                <li class="dropdown" href="#">
+                  <a href="javascript:void(0)" class="dropbtn">{{ nav.title | escape }}</a>
+                  <div class="dropdown-content">
+                    {%- for link in nav.sublinks %}
+                      <a class="{% if page.url == link.url %}current-page{% endif %}" href="{{ link.url | relative_url }}">{{ link.title | escape }}</a>
+                    {%- endfor %}
+                  </div>
+                </li>
+              {% else %}
+                <li><a class="{% if page.url == nav.url %}current-page{% endif %}" href="{{ nav.url | relative_url }}">{{ nav.title | escape }}</a></li>
+              {% endif %}
+            {%- endif -%}
+          {%- endfor -%}
+        </ul>
       </nav>
     {% endif %}
   </div>

diff --git a/_sass/hamilton/layout.scss b/_sass/hamilton/layout.scss
@@ -68,16 +68,36 @@
     padding-bottom: 5px;
   }
 
-  .page-link {
-    line-height: $base-line-height * $base-font-size * 1.15;
-    display: block;
-    padding: 5px 5px;
+  ul.trigger {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    li a {
+      line-height: $base-line-height * $base-font-size * 1.15;
+      display: inline;
+      padding: 5px 10px;
+      margin-left: auto;
+    }
+
+    .dropdown-content {
+      display: none;
+      position: absolute;
+      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+      z-index: 1;
+    }
+
+    .dropdown-content a {
+      padding: 5px 10px;
+      display: inline-block;
+      text-align: right;
+      margin-left: auto;
+    }
 
-    // Gaps between nav items, but not on the last one
-    &:not(:last-child) {
-      margin-right: 0;
+    .dropdown:hover .dropdown-content {
+      display: block;
     }
-    margin-left: 10px;
   }
 
   .current-page {
@@ -102,14 +122,29 @@
       display: block;
     }
 
-    .page-link {
-      display: inline;
-      padding: 0;
+    ul.trigger {
+      li {
+        float: left;
+      }
+
+      li a {
+        display: inline-block;
+        text-align: center;
+        padding: 5px 5px;
+
+        // Gaps between nav items, but not on the last one
+        &:not(:last-child) {
+          margin-right: 0;
+        }
+        margin-left: 10px;
+      }
 
-      &:not(:last-child) {
-        margin-right: 10px;
+      .dropdown-content a {
+        display: block;
+        text-align: left;
+        padding: 5px 15px 5px 5px;
+        margin-left: 10px;
       }
-      margin-left: auto;
     }
   }
 }

diff --git a/_sass/hamilton/skin.scss b/_sass/hamilton/skin.scss
@@ -85,9 +85,13 @@ table {
     }
   }
 
-  .page-link {
+  li a {
     color: $text-color;
   }
+
+  .dropdown-content {
+    background-color: $border-color-light;
+  }
 }
 
 .post-list {

diff --git a/docs.md b/docs.md
@@ -0,0 +1,7 @@
+---
+layout: page
+title: Docs
+permalink: /docs/
+---
+
+A documentation page.
diff --git a/faq.md b/faq.md
@@ -0,0 +1,7 @@
+---
+layout: page
+title: FAQ
+permalink: /faq/
+---
+
+An FAQ page.