Changed CSS hover menu to JS menu

3 files changed, 94 insertions, 46 deletions

diff --git a/layouts/partials/bookMenu.html b/layouts/partials/bookMenu.html
index 4c30cab..7b57e43 100644
--- a/layouts/partials/bookMenu.html
+++ b/layouts/partials/bookMenu.html
@@ -1,13 +1,32 @@
-<b>

-  Books

-</b>

-<ul class="list-unstyled ml-1">

-  {{ range .Site.Sections }}

-  <li class="hanging">

-    <a href="{{ .Permalink }}">

-      {{ .Title |markdownify }}

-    </a>

-    by {{ .Params.author }}

-  </li>

-  {{ end }}

-</ul>

+<div class="position-relative">

+  <i

+    class="nav-menu hover-menu ml-2 mr-2 mt-1 fas fa-book"

+    onclick="expandMenu(this)"

+    title="Show all books"

+  ></i>

+  <div

+    class="show bg-light shadow mt-2"

+    style="position: absolute;

+      min-width: 280px;

+      max-width: 75%;

+      z-index: 1;

+      max-height: 0px;

+      overflow: hidden;"

+  >

+    <div class="p-2">

+      <b>

+        Books

+      </b>

+      <ul class="list-unstyled ml-1">

+        {{ range .Site.Sections }}

+        <li class="hanging">

+          <a href="{{ .Permalink }}">

+            {{ .Title | markdownify }}

+          </a>

+          by {{ .Params.author }}

+        </li>

+        {{ end }}

+      </ul>

+    </div>

+  </div>

+</div>

diff --git a/layouts/partials/chapterMenu.html b/layouts/partials/chapterMenu.html
index 4520f3a..ffd1c01 100644
--- a/layouts/partials/chapterMenu.html
+++ b/layouts/partials/chapterMenu.html
@@ -1,21 +1,34 @@
-<div class="dropdown">

-  <p class="mb-1 mt-1 dropbtn text-left">

-    <i class="navMenu fas fa-bars"></i>

-  </p>

-  <div class="dropdown-content bg-light shadow">

-    <b class="mt-3">

-      {{ $thisSection := .Site.GetPage "section" .Section }}

-      {{ with $thisSection }}

-      {{ .Title | markdownify }}

-      {{ end }}

-    </b>

-    <ul class="list-unstyled ml-1">

-      {{ $mypages := intersect (where .Site.Pages "Section" .Section) (where .Site.Pages "Kind" "page") }}

-      {{ range $mypages }}

-      <li class="hanging">

-        <a href="{{ .Permalink }}">{{ .Title | markdownify}}</a>

-      </li>

-      {{ end }}

-    </ul>

+<div class="position-relative">

+  <i

+    class="nav-menu hover-menu ml-2 mr-2 mt-1 fas fa-bars"

+    onclick="expandMenu(this)"

+    title = "Show Chapters"

+  ></i>

+  <div

+    class="show bg-light shadow"

+    style="

+      position: absolute;

+      min-width: 280px;

+      max-width: 75%;

+      z-index: 1;

+      max-height: 0px;

+      overflow: hidden;"

+  >

+    <div class="p-2 rounded">

+      <b class="mt-3">

+        {{ $thisSection := .Site.GetPage "section" .Section }}

+        {{ with $thisSection }}

+        {{ .Title | markdownify }}

+        {{ end }}

+      </b>

+      <ul class="list-unstyled ml-1">

+        {{ $mypages := intersect (where .Site.Pages "Section" .Section) (where .Site.Pages "Kind" "page") }}

+        {{ range $mypages }}

+        <li class="hanging">

+          <a href="{{ .Permalink }}">{{ .Title | markdownify}}</a>

+        </li>

+        {{ end }}

+      </ul>

+    </div>

   </div>

 </div>

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2290bd7..7e76126 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,20 +1,36 @@
 <nav>

-  <div class="d-flex flex-row mt-2 border-bottom">

-    <div class="navMenu mr-2">

-      <a href="{{ `/` | relURL }}"><i title="Home" class="fas fa-home"></i></a>

-    </div>

-

-    <div class="dropdown">

-      <p class="navMenu ml-2 mr-2 dropbtn">

-        <i class="fas fa-book"></i>

-      </p>

-      <div class="dropdown-content p-2 bg-light shadow">

-        {{ partial "bookMenu" . }}

-      </div>

-    </div>

-

+  <div class="d-flex flex-row mt-2 border-bottom position-relative">

+    <a href="{{ `/` | relURL }}"

+      ><i title="Home" class="nav-menu mr-2 mt-1 fas fa-home"></i

+    ></a>

+    {{ partial "bookMenu" . }}

+    {{ if eq .Kind "page" }}

+    {{ partial "chapterMenu" . }}

+    {{ end }}

     <div class="w-100 text-right">

       {{ partial "footer" . }}

     </div>

   </div>

 </nav>

+<script>

+  let expandMenu = function(x) {

+    Array.from(document.querySelectorAll(".hover-menu")).forEach(hovermenu => {

+      hovermenu.nextElementSibling.style.maxHeight = "0px";

+    });

+    let thisMenu = x.nextElementSibling;

+    thisMenu.style.maxHeight = thisMenu.scrollHeight + "px";

+  };

+  window.onclick = function(event) {

+    let insideMenu = false;

+    Array.from(document.querySelectorAll(".show")).forEach(menu => {

+      insideMenu = insideMenu || menu.contains(event.target);

+    });

+    if (!insideMenu && !event.target.matches(".hover-menu")) {

+      Array.from(document.querySelectorAll(".hover-menu")).forEach(

+        hovermenu => {

+          hovermenu.nextElementSibling.style.maxHeight = "0px";

+        }

+      );

+    }

+  };

+</script>