将blivesta animsition菜单转到canvas（推动体）菜单

菜单工作正常，但菜单覆盖我的内容，我希望看到它正在推动我的内容向右，就像一个非canvas菜单。

编辑：这里解决了内部锚点问题（感谢@polamoros）： 点击后滚动到顶部

我的问题是，这可以通过几个简单的步骤实现吗？

我试图制作一个JSFiddle，但遗憾的是无法完成它。

HTML

            
 
 My content 
 
       $(document).ready(function() { $('.drawer').drawer(); });    

CSS

 /*!------------------------------------*\ Base \*!------------------------------------*/ .drawer-nav { position: fixed; z-index: 101; top: 0; overflow: hidden; max-width: 400px; width: 85%; height: 100%; font-family: 'Roboto', Arial; font-weight: 300; font-size: 12pt; color: #fff; background-color: #d7f8fd; } .drawer-brand { font-size: 1.5rem; font-weight: bold; line-height: 3.75rem; display: block; padding-right: .75rem; padding-left: .75rem; text-decoration: none; color: #222; } .drawer-menu { margin: 0; padding: 0; list-style: none; } .drawer-list-item { padding: 0; } .drawer-menu-header{ background-color: #d7f8fd; font-size: 16px; display: block; padding: .75rem .75rem .75rem 0; text-decoration: none; text-align: center; border-bottom: 1px solid #c9ebf0; color: #999; } .drawer-menu-item { background-color: #d7f8fd; font-size: 14px; display: block; padding: .75rem .75rem .75rem 1.5rem; text-decoration: none; border-bottom: 1px solid #c9ebf0; color: #222; } .drawer-menu-item:hover { text-decoration: underline; background-color: #e6fbfe; color: #555; } /*! overlay */ .drawer-overlay { position: fixed; z-index: 100; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); } .drawer-open .drawer-overlay { display: block; } /*!------------------------------------*\ Top \*!------------------------------------*/ .drawer--top .drawer-nav { top: -100%; left: 0; width: 100%; height: auto; max-height: 100%; -webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); } .drawer--top.drawer-open .drawer-nav { top: 0; } .drawer--top .drawer-hamburger, .drawer--top.drawer-open .drawer-hamburger { right: 0; } /*!------------------------------------*\ Left \*!------------------------------------*/ .drawer--left .drawer-nav { left: -400px; -webkit-transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); } .drawer--left.drawer-open .drawer-nav, .drawer--left .drawer-hamburger, .drawer--left.drawer-open .drawer-navbar .drawer-hamburger { left: 0; } /* Close button */ .drawer--left.drawer-open .drawer-hamburger{ left: 400px; position: fixed; background: inherit; } .drawer--left.drawer-open .drawer-hamburger-icon::before, .drawer--left.drawer-open .drawer-hamburger-icon::after { color: #d7f8fd; background: #d7f8fd; } /* MEDIA QUERIES */ @media screen and (max-width: 480px) { .drawer--left.drawer-open .drawer-hamburger{ left: 85%; } } /*!------------------------------------*\ Right \*!------------------------------------*/ .drawer--right .drawer-nav { right: -16.25rem; -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); } .drawer--right.drawer-open .drawer-nav, .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger { right: 0; } .drawer--right.drawer-open .drawer-hamburger { right: 16.25rem; } /*!------------------------------------*\ Hamburger \*!------------------------------------*/ .drawer-hamburger { position: absolute; z-index: 104; top: 0; display: block; box-sizing: content-box; width: 2rem; padding: 0; padding-top: 18px; padding-right: .75rem; padding-bottom: 30px; padding-left: .75rem; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); border: 0; outline: 0; background-color: transparent; } .drawer-hamburger:hover { cursor: pointer; background-color: transparent; } .drawer-hamburger-icon { position: relative; display: block; margin-top: 10px; } .drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { width: 100%; height: 2px; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); background-color: #222; } .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { position: absolute; top: -10px; left: 0; content: ' '; } .drawer-hamburger-icon:after { top: 10px; } .drawer-open .drawer-hamburger-icon { background-color: transparent; } .drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after { top: 0; } .drawer-open .drawer-hamburger-icon:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .drawer-open .drawer-hamburger-icon:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /*!------------------------------------*\ accessibility \*!------------------------------------*/ /*! * Only display content to screen readers * See: http://a11yproject.com/posts/how-to-hide-content */ .sr-only { position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; } /*! * Use in conjunction with .sr-only to only display content when it's focused. * Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 * Credit: HTML5 Boilerplate */ .sr-only-focusable:active, .sr-only-focusable:focus { position: static; overflow: visible; clip: auto; width: auto; height: auto; margin: 0; } /*!------------------------------------*\ Sidebar \*!------------------------------------*/ .drawer--sidebar { background-color: #fff; } .drawer--sidebar .drawer-contents { background-color: #fff; } @media (min-width: 64em) { .drawer--sidebar .drawer-hamburger { display: none; visibility: hidden; } .drawer--sidebar .drawer-nav { display: block; -webkit-transform: none; -ms-transform: none; transform: none; position: fixed; height: 100%; } /*! Left */ .drawer--sidebar.drawer--left .drawer-nav { left: 0; border-right: 1px solid #ddd; } .drawer--sidebar.drawer--left .drawer-contents { margin-left: 12.5rem; } /*! Right */ .drawer--sidebar.drawer--right .drawer-nav { right: 0; border-left: 1px solid #ddd; } .drawer--sidebar.drawer--right .drawer-contents { margin-right: 12.5rem; } /*! container */ .drawer--sidebar .drawer-container { max-width: 48rem; } } @media (min-width: 75em) { .drawer--sidebar .drawer-nav { width: 16.25rem; } .drawer--sidebar.drawer--left .drawer-contents { margin-left: 16.25rem; } .drawer--sidebar.drawer--right .drawer-contents { margin-right: 16.25rem; } /*! container */ .drawer--sidebar .drawer-container { max-width: 60rem; } } /*!------------------------------------*\ Navbar \*!------------------------------------*/ .drawer--navbarTopGutter { padding-top: 3.75rem; } .drawer-navbar .drawer-navbar-header { border-bottom: 1px solid #ddd; background-color: #fff; } .drawer-navbar { z-index: 102; top: 0; } /*! .drawer-navbar modifier */ .drawer-navbar--fixed { position: fixed; } .drawer-navbar-header { position: relative; z-index: 102; box-sizing: border-box; width: 100%; padding: 0 .75rem; text-align: center; } .drawer-navbar .drawer-brand { line-height: 3.75rem; display: inline-block; padding-top: 0; padding-bottom: 0; text-decoration: none; } .drawer-navbar .drawer-brand:hover { background-color: transparent; } .drawer-navbar .drawer-nav { padding-top: 3.75rem; } .drawer-navbar .drawer-menu { padding-bottom: 7.5rem; } @media (min-width: 64em) { .drawer-navbar { height: 3.75rem; border-bottom: 1px solid #ddd; background-color: #fff; } .drawer-navbar .drawer-navbar-header { position: relative; display: block; float: left; width: auto; padding: 0; border: 0; } .drawer-navbar .drawer-menu--right { float: right; } .drawer-navbar .drawer-menu li { float: left; } .drawer-navbar .drawer-menu-item { line-height: 3.75rem; padding-top: 0; padding-bottom: 0; } .drawer-navbar .drawer-hamburger { display: none; } .drawer-navbar .drawer-nav { position: relative; left: 0; overflow: visible; width: auto; height: 3.75rem; padding-top: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .drawer-navbar .drawer-menu { padding: 0; } /*! dropdown */ .drawer-navbar .drawer-dropdown-menu { position: absolute; width: 16.25rem; border: 1px solid #ddd; } .drawer-navbar .drawer-dropdown-menu-item { padding-left: .75rem; } } /*!------------------------------------*\ Dropdown \*!------------------------------------*/ .drawer-dropdown-menu { display: none; box-sizing: border-box; width: 100%; margin: 0; padding: 0; background-color: #fff; } .drawer-dropdown-menu > li { width: 100%; list-style: none; } .drawer-dropdown-menu-item { line-height: 3.75rem; display: block; padding: 0; padding-right: .75rem; padding-left: 1.5rem; text-decoration: none; color: #222; } .drawer-dropdown-menu-item:hover { text-decoration: underline; color: #555; background-color: transparent; } /*! open */ .drawer-dropdown.open > .drawer-dropdown-menu { display: block; } li.drawer-dropdown { padding: 0; } /*! drawer-caret */ .drawer-dropdown .drawer-caret { display: inline-block; width: 0; height: 0; margin-left: 4px; -webkit-transition: opacity .2s ease, -webkit-transform .2s ease; transition: opacity .2s ease, -webkit-transform .2s ease; transition: transform .2s ease, opacity .2s ease; transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } /*! open */ .drawer-dropdown.open .drawer-caret { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } /*!------------------------------------*\ Container \*!------------------------------------*/ .drawer-container { margin-right: auto; margin-left: auto; } @media (min-width: 64em) { .drawer-container { max-width: 60rem; } } @media (min-width: 75em) { .drawer-container { max-width: 70rem; } } 

JS

 !function (e) { "use strict"; "function" == typeof define && define.amd ? define(["jquery"], e) : "object" == typeof exports ? module.exports = e(require("jquery")) : e(jQuery) } (function (e) { "use strict"; var t = "drawer", n = "undefined" != typeof document.ontouchstart, s = { init : function (n) { return n = e.extend({ iscroll : { mouseWheel : !0, preventDefault : !1 }, showOverlay : !0 }, n), s.settings = { state : !1, events : { opened : "drawer.opened", closed : "drawer.closed" }, dropdownEvents : { opened : "shown.bs.dropdown", closed : "hidden.bs.dropdown" } }, s.settings["class"] = e.extend({ nav : "drawer-nav", toggle : "drawer-toggle", overlay : "drawer-overlay", open : "drawer-open", close : "drawer-close", dropdown : "drawer-dropdown" }, n["class"]), this.each(function () { var o = this, r = e(this), a = r.data(t); a || (n = e.extend({}, n), r.data(t, { options : n }), s.refresh.call(o), n.showOverlay && s.addOverlay.call(o), e("." + s.settings["class"].toggle).on("click." + t, function () { return s.toggle.call(o), o.iScroll.refresh() }), e(window).resize(function () { return s.close.call(o), o.iScroll.refresh() }), e("." + s.settings["class"].dropdown).on(s.settings.dropdownEvents.opened + " " + s.settings.dropdownEvents.closed, function () { return o.iScroll.refresh() })) }) }, refresh : function () { this.iScroll = new IScroll("." + s.settings["class"].nav, e(this).data(t).options.iscroll) }, addOverlay : function () { var t = e(this), n = e("
").addClass(s.settings["class"].overlay + " " + s.settings["class"].toggle); return t.append(n) }, toggle : function () { var e = this; return s.settings.state ? s.close.call(e) : s.open.call(e) }, open : function () { var o = e(this); return n && o.on("touchmove." + t, function (e) { e.preventDefault() }), o.removeClass(s.settings["class"].close).addClass(s.settings["class"].open).css({ overflow : "hidden" }).drawerCallback(function () { s.settings.state = !0, o.trigger(s.settings.events.opened) }) }, close : function () { var o = e(this); return n && o.off("touchmove." + t), o.removeClass(s.settings["class"].open).addClass(s.settings["class"].close).css({ overflow : "auto" }).drawerCallback(function () { s.settings.state = !1, o.trigger(s.settings.events.closed) }) }, destroy : function () { return this.each(function () { var n = e(this); e(window).off("." + t), n.removeData(t) }) } }; e.fn.drawerCallback = function (t) { var n = "transitionend webkitTransitionEnd"; return this.each(function () { var s = e(this); s.on(n, function () { return s.off(n), t.call(this) }) }) }, e.fn.drawer = function (n) { return s[n] ? s[n].apply(this, Array.prototype.slice.call(arguments, 1)) : "object" != typeof n && n ? void e.error("Method " + n + " does not exist on jQuery." + t) : s.init.apply(this, arguments) } }); 

要观看现场演示： http ： //git.blivesta.com/drawer/left/