From 9313028ad20caec655b1c543125bafcaffeb5bf9 Mon Sep 17 00:00:00 2001 From: Laury GvR Date: Thu, 14 Apr 2016 11:41:59 -0400 Subject: [PATCH] Off-canvas now over top of page and static, nav also static --- css/app.css | 19 +++++++++++++++++++ js/app.js | 32 ++++++++++++++++++++++++++++++++ js/custom/pageSetup.js | 32 ++++++++++++++++++++++++++++++++ scss/_right-off-canvas.scss | 19 +++++++++++++++++++ 4 files changed, 102 insertions(+) diff --git a/css/app.css b/css/app.css index 8b484c5..7ac5b6c 100644 --- 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 --- 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 --- 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 --- 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; -- 2.17.1