Menu animations now working along with anchor links. WIP #807 @3

diff --git a/_index.html b/_index.html
index 5d9919b164057ece35af0f0465548adcd7182e9d..447fdc5a21b7f3bdeee2cdfeecf872f42359ac0a 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -26,7 +26,7 @@
 <div id="main">
        <div id="background"></div>
        <header>
-               <nav id="nav"></nav>
+               <nav id="menu"></nav>
                <div id="search"></div>
                <a id="logo" href="#"></a>
        </header>

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 1d0c5ed7e053b534a6560b9df6a0ebb1cc441707..ae3ec6f79bbb2eb5101eb957fad07f9a597ff0e6 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -2,7 +2,8 @@ function FluidbookNav(fluidbook) {
     this.fluidbook = fluidbook;
     this._dimensions = this.fluidbook.datas.iconsDimensions;
     this._inited = false;
-    this.menu = $("#nav");
+    this.menuIsOpen = false;
+    this.menu = $("#menu"); // Renamed from #nav because mmenu animations weren't working (probably due to some other script interference)
     this.setNav();
 
 }
@@ -26,7 +27,16 @@ FluidbookNav.prototype = {
             });
         }
 
-        $('#nav').mmenu({
+        this.menu.mmenu({
+
+            // Allow #anchor links to trigger correctly and close the menu
+            // Ref: https://github.com/FrDH/jQuery.mmenu/issues/687#issuecomment-279377172
+            onClick: {
+                preventDefault: function() {
+                    $this.menuAPI.close();
+                }
+            },
+
             "extensions": [
                 "pagedim-black"
             ],
@@ -34,10 +44,24 @@ FluidbookNav.prototype = {
                 "position": "right",
                 "zposition": "front"
             },
+            "navbar": {
+                //add: false // Removes main title bars completely
+                title: "" // Hides the default "Menu" text
+            },
             "navbars": navbars
         });
 
-        this.menuAPI = $('#nav').data('mmenu');
+        this.menuAPI = this.menu.data('mmenu');
+
+        // Bind API hooks (see http://mmenu.frebsite.nl/documentation/core/off-canvas.html#h4)
+        this.menuAPI.bind("open:finish", function () {
+            $this.menuIsOpen = true;
+        });
+
+        this.menuAPI.bind("close:finish", function () {
+            $this.menuIsOpen = false;
+        });
+
 
         $(document).on('click', '#menuOpener', function (e) {
             e.preventDefault();
@@ -115,7 +139,7 @@ FluidbookNav.prototype = {
         $('#main header').append(menuOpener);
 
         // Add holder list element for menu items
-        this.menu.append('<ul></ul>');
+        this.menu.append('<ul id="menuList"></ul>');
 
         try {
             var skipHome = (window.localStorage.getItem('home') === '0');

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 941b90d0114709add322e3812f174e34b8bb3727..804c7150641068fd5baace9014921db0e023731c 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -316,7 +316,7 @@ body, html {
 }
 
 /* Nav */
-#nav #locales {
+#menu #locales {
        display: inline-block;
        width: 22px;
        height: 17px;
@@ -526,15 +526,15 @@ header {
        z-index: 12;
 }
 
-.ltr #nav a#submitSearch {
+.ltr #menu a#submitSearch {
        margin: 0 0 0 5px;
 }
 
-.rtl #nav a#submitSearch {
+.rtl #menu a#submitSearch {
        margin: 0 5px 0 0;
 }
 
-#nav {
+#menu {
        //position: relative;
        //white-space: nowrap;
        background-color: @menu-background;

diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 45d012ae838ec395543065ecbe016cf4501ae80e..b080d9392ba940a33cbf7ca0f6a6e59ef54d9528 100644 (file)
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -22,6 +22,7 @@
 // Page overlay opacity
 html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   opacity: 0.5;
+  transition: opacity .4s ease 0s; // No delay before fading in the overlay
 }