Off-canvas now over top of page and static, nav also static

diff --git a/css/app.css b/css/app.css
index 8b484c5..7ac5b6c 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -7704,6 +7704,25 @@ aside.left-off-canvas-menu ul.open {
 
 /* End Mobile Menu */
 /* for the mobile menu */
+aside.right-off-canvas-menu {
+  visibility: hidden;
+  position: fixed;
+  opacity: 0;
+  transition: all 500ms ease 0s; }
+
+aside.right-off-canvas-menu.glm-move-left {
+  transform: translate3d(0%, 0px, 0px);
+  visibility: visible;
+  opacity: 1;
+  transition: translate3d 500ms ease 0s;
+  transition: visibility 500ms, opacity 0.5s linear; }
+
+.inner-wrap {
+  transform: none !important; }
+
+.move-left .exit-off-canvas {
+  transform: translate3d(-250px, 0px, 0px); }
+
 aside.right-off-canvas-menu li.page_item {
   display: block;
   overflow: hidden;

diff --git a/js/app.js b/js/app.js
index 5a0311f..30739bf 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -50,4 +50,36 @@ $(document).ready(function () {
     $(".photoTitle").each(function() {
         $(this).find(">:first-child").remove();
     });
+    
+    
+    $('nav').on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
+      e.preventDefault();
+      $(this).closest('.off-canvas-wrap').toggleClass('move-1');
+    });
+    $('nav').on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
+      e.preventDefault();
+      $(".off-canvas-wrap").removeClass("move-2");
+    });
+    $('nav').on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
+      e.preventDefault();
+      $(this).closest(".off-canvas-wrap").toggleClass("move-3");
+    });
+    $('nav').on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
+      e.preventDefault();
+      $(".off-canvas-wrap").removeClass("move-4");
+    });
+    
+    $('.exit-off-canvas').click(function(e) {
+      $('.right-off-canvas-menu').toggleClass('glm-move-left');    
+    });
+    $('.right-off-canvas-toggle').click(function(e) {
+//        alert("Handler called");
+//      e.preventDefault();
+//      $('.off-canvas-wrap').off( "click", "**" );
+//      $('.off-canvas-wrap').off( "click.fndtn.offcanvas", "**" );
+//      $('.off-canvas-wrap').removeClass("move-left");
+//      $('.off-canvas-wrap').toggleClass('move-1');
+      $('.right-off-canvas-menu').toggleClass('glm-move-left');
+      
+    });
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index d0fb75e..c1382ec 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -41,4 +41,36 @@ $(document).ready(function () {
     $(".photoTitle").each(function() {
         $(this).find(">:first-child").remove();
     });
+    
+    
+    $('nav').on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
+      e.preventDefault();
+      $(this).closest('.off-canvas-wrap').toggleClass('move-1');
+    });
+    $('nav').on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
+      e.preventDefault();
+      $(".off-canvas-wrap").removeClass("move-2");
+    });
+    $('nav').on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
+      e.preventDefault();
+      $(this).closest(".off-canvas-wrap").toggleClass("move-3");
+    });
+    $('nav').on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
+      e.preventDefault();
+      $(".off-canvas-wrap").removeClass("move-4");
+    });
+    
+    $('.exit-off-canvas').click(function(e) {
+      $('.right-off-canvas-menu').toggleClass('glm-move-left');    
+    });
+    $('.right-off-canvas-toggle').click(function(e) {
+//        alert("Handler called");
+//      e.preventDefault();
+//      $('.off-canvas-wrap').off( "click", "**" );
+//      $('.off-canvas-wrap').off( "click.fndtn.offcanvas", "**" );
+//      $('.off-canvas-wrap').removeClass("move-left");
+//      $('.off-canvas-wrap').toggleClass('move-1');
+      $('.right-off-canvas-menu').toggleClass('glm-move-left');
+      
+    });
 });

diff --git a/scss/_right-off-canvas.scss b/scss/_right-off-canvas.scss
index 1771154..47880d5 100644 (file)
--- a/scss/_right-off-canvas.scss
+++ b/scss/_right-off-canvas.scss
@@ -3,6 +3,25 @@ aside.right-off-canvas-menu {
 //  background-color: $primary-color;
 //  color: white;
 }
+aside.right-off-canvas-menu {
+    visibility: hidden;
+    position: fixed;
+    opacity: 0;
+    transition: all 500ms ease 0s;
+}
+aside.right-off-canvas-menu.glm-move-left {
+    transform:  translate3d(0%, 0px, 0px);
+    visibility: visible;
+    opacity: 1;
+    transition: translate3d 500ms ease 0s;
+    transition: visibility 500ms, opacity 0.5s linear;
+}
+.inner-wrap {
+    transform: none !important;
+}
+.move-left .exit-off-canvas {
+    transform:  translate3d(-250px, 0px, 0px);
+}
 aside.right-off-canvas-menu li.page_item {
   display: block;
   overflow: hidden;