How to change animation position in Off-Canvas Menu Effects

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 a i {
	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 a i {
	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>

clm · Accepted Answer

This is what you need?

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

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

How to change animation position in Off-Canvas Menu Effects

Tags:

javascript

jquery

css

svg

Ali Hesari

1 Answers

clm

Recent Activity

Donate For Us

How to change animation position in Off-Canvas Menu Effects

Tags:

javascript

jquery

css

svg

Ali Hesari

1 Answers

clm

Related questions

Recent Activity

Donate For Us