如何在Off-Canvas菜单效果中更改动画位置

Question

I'm working with OffCanvasMenuEffects and i'm using wave menu effect. You can see this menu in following:

 article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\\201C" "\\201D" "\\2018" "\\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} html, body, .container, .content-wrap { overflow: hidden; width: 100%; height: 100%; } .container { background: #373a47; } .menu-wrap a { color: #b8b7ad; } .menu-wrap a:hover, .menu-wrap a:focus { color: #c94e50; } .content-wrap { overflow-y: scroll; -webkit-overflow-scrolling: touch; } .content { position: relative; background: #b4bad2; } .content::before { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0,0,0,0.3); content: ''; opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s; transition: opacity 0.4s, transform 0s 0.4s; } /* Menu Button */ .menu-button { position: fixed; bottom: 0; z-index: 1000; margin: 1em; padding: 0; width: 2.5em; height: 2.25em; border: none; text-indent: 2.5em; font-size: 1.5em; color: transparent; background: transparent; } .menu-button::before { position: absolute; top: 0.5em; right: 0.5em; bottom: 0.5em; left: 0.5em; background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); content: ''; } .menu-button:hover { opacity: 0.6; } /* Close Button */ .close-button { width: 16px; height: 16px; position: absolute; right: 1em; top: 1em; overflow: hidden; text-indent: 16px; border: none; z-index: 1001; background: transparent; color: transparent; } .close-button::before, .close-button::after { content: ''; position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: #888; } .close-button::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .close-button::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* Menu */ .menu-wrap { position: absolute; bottom: 0; left: 0; z-index: 1001; width: 100%; height: 160px; font-size: 1.15em; -webkit-transform: translate3d(0,160px,0); transform: translate3d(0,160px,0); -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; } .menu { position: absolute; width: 100%; z-index: 1000; text-align: center; top: 50%; padding: 0 1.5em; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .icon-list a, .close-button { opacity: 0; -webkit-transform: translate3d(0,200px,0); transform: translate3d(0,200px,0); -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, transform 0.4s; } .icon-list a { display: inline-block; padding: 0.8em; } .icon-list ai { vertical-align: middle; } .icon-list a span { display: inline-block; margin-left: 10px; font-size: 0.75em; vertical-align: middle; font-weight: 700; letter-spacing: 1px; } /* Morph Shape */ .morph-shape { position: absolute; width: 100%; width: calc(100% + 400px); height: 100%; top: 0; left: 0; fill: #373a47; -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transform: translate3d(-400px,0,0); transform: translate3d(-400px,0,0); } /* Shown menu */ .show-menu .menu-wrap, .show-menu .icon-list a, .show-menu .close-button, .show-menu .morph-shape, .show-menu .content::before { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .show-menu .menu-wrap, .show-menu .content::before { -webkit-transition-delay: 0s; transition-delay: 0s; } .show-menu .icon-list a, .show-menu .close-button, .show-menu .content::before { opacity: 1; } .show-menu .icon-list a:nth-child(2) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .show-menu .icon-list a:nth-child(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .show-menu .icon-list a:nth-child(4) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .show-menu .icon-list a:nth-child(5) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .show-menu .icon-list a:nth-child(6) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .show-menu .close-button { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .show-menu .content::before { -webkit-transition: opacity 0.4s; transition: opacity 0.4s; } 

 <link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" /> <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script> <div class="menu-wrap"> <nav class="menu"> <div class="icon-list"> <a href="#"><i class="fa fa-fw fa-star-o"></i><span>Favorites</span></a> <a href="#"><i class="fa fa-fw fa-bell-o"></i><span>Alerts</span></a> <a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>Messages</span></a> <a href="#"><i class="fa fa-fw fa-comment-o"></i><span>Comments</span></a> <a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span></a> <a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span></a> </div> </nav> <button class="close-button" id="close-button">Close Menu</button> <div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none"> <path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/> </svg> </div> </div> <button class="menu-button" id="open-button">Open Menu</button> <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script> <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script> 

Currently the Menu opens from bottom to top.

My question is how is it possible to change the position of how the off canvas menu loads, default is bottom to top with wave effect convert to top to bottom, like this website: https://afriendofmine.nl

How can this be achieved?

I was tried to edit the menu but the result not good! I edit .menu-wrap class. I replace bottom: 0; with top: 0; as following:

.menu-wrap {
    position: absolute;
    top: 0; //edited
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 160px;
    font-size: 1.15em;
    -webkit-transform: translate3d(0,160px,0);
    transform: translate3d(0,160px,0);
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}

After all, how can I make the menu to opens from top to bottom ? like this website: https://afriendofmine.nl

 article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\\201C" "\\201D" "\\2018" "\\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} html, body, .container, .content-wrap { overflow: hidden; width: 100%; height: 100%; } .container { background: #373a47; } .menu-wrap a { color: #b8b7ad; } .menu-wrap a:hover, .menu-wrap a:focus { color: #c94e50; } .content-wrap { overflow-y: scroll; -webkit-overflow-scrolling: touch; } .content { position: relative; background: #b4bad2; } .content::before { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0,0,0,0.3); content: ''; opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s; transition: opacity 0.4s, transform 0s 0.4s; } /* Menu Button */ .menu-button { position: fixed; bottom: 0; z-index: 1000; margin: 1em; padding: 0; width: 2.5em; height: 2.25em; border: none; text-indent: 2.5em; font-size: 1.5em; color: transparent; background: transparent; } .menu-button::before { position: absolute; top: 0.5em; right: 0.5em; bottom: 0.5em; left: 0.5em; background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); content: ''; } .menu-button:hover { opacity: 0.6; } /* Close Button */ .close-button { width: 16px; height: 16px; position: absolute; right: 1em; top: 1em; overflow: hidden; text-indent: 16px; border: none; z-index: 1001; background: transparent; color: transparent; } .close-button::before, .close-button::after { content: ''; position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: #888; } .close-button::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .close-button::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* Menu */ .menu-wrap { position: absolute; top: 0; //edited left: 0; z-index: 1001; width: 100%; height: 160px; font-size: 1.15em; -webkit-transform: translate3d(0,160px,0); transform: translate3d(0,160px,0); -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; } .menu { position: absolute; width: 100%; z-index: 1000; text-align: center; top: 50%; padding: 0 1.5em; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .icon-list a, .close-button { opacity: 0; -webkit-transform: translate3d(0,200px,0); transform: translate3d(0,200px,0); -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, transform 0.4s; } .icon-list a { display: inline-block; padding: 0.8em; } .icon-list ai { vertical-align: middle; } .icon-list a span { display: inline-block; margin-left: 10px; font-size: 0.75em; vertical-align: middle; font-weight: 700; letter-spacing: 1px; } /* Morph Shape */ .morph-shape { position: absolute; width: 100%; width: calc(100% + 400px); height: 100%; top: 0; left: 0; fill: #373a47; -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transform: translate3d(-400px,0,0); transform: translate3d(-400px,0,0); } /* Shown menu */ .show-menu .menu-wrap, .show-menu .icon-list a, .show-menu .close-button, .show-menu .morph-shape, .show-menu .content::before { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .show-menu .menu-wrap, .show-menu .content::before { -webkit-transition-delay: 0s; transition-delay: 0s; } .show-menu .icon-list a, .show-menu .close-button, .show-menu .content::before { opacity: 1; } .show-menu .icon-list a:nth-child(2) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .show-menu .icon-list a:nth-child(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .show-menu .icon-list a:nth-child(4) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .show-menu .icon-list a:nth-child(5) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .show-menu .icon-list a:nth-child(6) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .show-menu .close-button { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .show-menu .content::before { -webkit-transition: opacity 0.4s; transition: opacity 0.4s; } 

 <link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" /> <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script> <div class="menu-wrap"> <nav class="menu"> <div class="icon-list"> <a href="#"><i class="fa fa-fw fa-star-o"></i><span>Favorites</span></a> <a href="#"><i class="fa fa-fw fa-bell-o"></i><span>Alerts</span></a> <a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>Messages</span></a> <a href="#"><i class="fa fa-fw fa-comment-o"></i><span>Comments</span></a> <a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span></a> <a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span></a> </div> </nav> <button class="close-button" id="close-button">Close Menu</button> <div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none"> <path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/> </svg> </div> </div> <button class="menu-button" id="open-button">Open Menu</button> <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script> <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script> 

Answer 1

This is what you need?

.morph-shape>svg {
  transform:rotate3d(1, 0, 0, 180deg);
}

https://jsfiddle.net/g4pmr6ez/1/