5
私はOffCanvasMenuEffectsと一緒に作業しています。私はwaveメニューエフェクトを使用しています。次に、このメニューを見ることができます：オフキャンバスメニューでアニメーションの位置を変更する方法
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 {
\t overflow: hidden;
\t width: 100%;
\t height: 100%;
}
.container {
\t background: #373a47;
}
.menu-wrap a {
\t color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
\t color: #c94e50;
}
.content-wrap {
\t overflow-y: scroll;
\t -webkit-overflow-scrolling: touch;
}
.content {
\t position: relative;
\t background: #b4bad2;
}
.content::before {
\t position: absolute;
\t top: 0;
\t left: 0;
\t z-index: 10;
\t width: 100%;
\t height: 100%;
\t background: rgba(0,0,0,0.3);
\t content: '';
\t opacity: 0;
\t -webkit-transform: translate3d(100%,0,0);
\t transform: translate3d(100%,0,0);
\t -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
\t transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
\t position: fixed;
\t bottom: 0;
\t z-index: 1000;
\t margin: 1em;
\t padding: 0;
\t width: 2.5em;
\t height: 2.25em;
\t border: none;
\t text-indent: 2.5em;
\t font-size: 1.5em;
\t color: transparent;
\t background: transparent;
}
.menu-button::before {
\t position: absolute;
\t top: 0.5em;
\t right: 0.5em;
\t bottom: 0.5em;
\t left: 0.5em;
\t background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
\t content: '';
}
.menu-button:hover {
\t opacity: 0.6;
}
/* Close Button */
.close-button {
\t width: 16px;
\t height: 16px;
\t position: absolute;
\t right: 1em;
\t top: 1em;
\t overflow: hidden;
\t text-indent: 16px;
\t border: none;
\t z-index: 1001;
\t background: transparent;
\t color: transparent;
}
.close-button::before,
.close-button::after {
\t content: '';
\t position: absolute;
\t width: 2px;
\t height: 100%;
\t top: 0;
\t left: 50%;
\t background: #888;
}
.close-button::before {
\t -webkit-transform: rotate(45deg);
\t transform: rotate(45deg);
}
.close-button::after {
\t -webkit-transform: rotate(-45deg);
\t transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
\t position: absolute;
\t bottom: 0;
\t left: 0;
\t z-index: 1001;
\t width: 100%;
\t height: 160px;
\t font-size: 1.15em;
\t -webkit-transform: translate3d(0,160px,0);
\t transform: translate3d(0,160px,0);
\t -webkit-transition: -webkit-transform 0.4s;
\t transition: transform 0.4s;
}
.menu {
\t position: absolute;
\t width: 100%;
\t z-index: 1000;
\t text-align: center; \t
\t top: 50%;
\t padding: 0 1.5em;
\t -webkit-transform: translate3d(0,-50%,0);
\t transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
\t opacity: 0;
\t -webkit-transform: translate3d(0,200px,0);
\t transform: translate3d(0,200px,0);
\t -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
\t transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
\t display: inline-block;
\t padding: 0.8em;
}
.icon-list a i {
\t vertical-align: middle;
}
.icon-list a span {
\t display: inline-block;
\t margin-left: 10px;
\t font-size: 0.75em;
\t vertical-align: middle;
\t font-weight: 700;
\t letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
\t position: absolute;
\t width: 100%;
\t width: calc(100% + 400px);
\t height: 100%;
\t top: 0;
\t left: 0;
\t fill: #373a47;
\t -webkit-transition: -webkit-transform 0.4s;
\t transition: transform 0.4s;
\t -webkit-transform: translate3d(-400px,0,0);
\t 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 {
\t -webkit-transform: translate3d(0,0,0);
\t transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
\t -webkit-transition-delay: 0s;
\t transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
\t opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
\t -webkit-transition-delay: 0.05s;
\t transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
\t -webkit-transition-delay: 0.1s;
\t transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
\t -webkit-transition-delay: 0.15s;
\t transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
\t -webkit-transition-delay: 0.2s;
\t transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
\t -webkit-transition-delay: 0.25s;
\t transition-delay: 0.25s;
}
.show-menu .close-button {
\t -webkit-transition-delay: 0.3s;
\t transition-delay: 0.3s;
}
.show-menu .content::before {
\t -webkit-transition: opacity 0.4s;
\t 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>現在のメニューは、下から上へ開きます。
私の質問それはどのようにオフキャンバスメニュー負荷の位置を変更することが可能である方法で、デフォルトは波の影響で下から上では、このウェブサイトのように、上から下へに変換：https://afriendofmine.nl
どのようにこれをすることができ実現しましたか？
私はメニューを編集しようとしましたが、結果は良くありませんでした！ クラスを編集します。私は、次のようtop: 0;とbottom: 0;を置き換える：すべての後
.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;
}
を、どのように私はにメニューを作ることができます上から下に開きますか？このウェブサイトのように：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 {
\t overflow: hidden;
\t width: 100%;
\t height: 100%;
}
.container {
\t background: #373a47;
}
.menu-wrap a {
\t color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
\t color: #c94e50;
}
.content-wrap {
\t overflow-y: scroll;
\t -webkit-overflow-scrolling: touch;
}
.content {
\t position: relative;
\t background: #b4bad2;
}
.content::before {
\t position: absolute;
\t top: 0;
\t left: 0;
\t z-index: 10;
\t width: 100%;
\t height: 100%;
\t background: rgba(0,0,0,0.3);
\t content: '';
\t opacity: 0;
\t -webkit-transform: translate3d(100%,0,0);
\t transform: translate3d(100%,0,0);
\t -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
\t transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
\t position: fixed;
\t bottom: 0;
\t z-index: 1000;
\t margin: 1em;
\t padding: 0;
\t width: 2.5em;
\t height: 2.25em;
\t border: none;
\t text-indent: 2.5em;
\t font-size: 1.5em;
\t color: transparent;
\t background: transparent;
}
.menu-button::before {
\t position: absolute;
\t top: 0.5em;
\t right: 0.5em;
\t bottom: 0.5em;
\t left: 0.5em;
\t background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
\t content: '';
}
.menu-button:hover {
\t opacity: 0.6;
}
/* Close Button */
.close-button {
\t width: 16px;
\t height: 16px;
\t position: absolute;
\t right: 1em;
\t top: 1em;
\t overflow: hidden;
\t text-indent: 16px;
\t border: none;
\t z-index: 1001;
\t background: transparent;
\t color: transparent;
}
.close-button::before,
.close-button::after {
\t content: '';
\t position: absolute;
\t width: 2px;
\t height: 100%;
\t top: 0;
\t left: 50%;
\t background: #888;
}
.close-button::before {
\t -webkit-transform: rotate(45deg);
\t transform: rotate(45deg);
}
.close-button::after {
\t -webkit-transform: rotate(-45deg);
\t transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
\t position: absolute;
\t top: 0; //edited
\t left: 0;
\t z-index: 1001;
\t width: 100%;
\t height: 160px;
\t font-size: 1.15em;
\t -webkit-transform: translate3d(0,160px,0);
\t transform: translate3d(0,160px,0);
\t -webkit-transition: -webkit-transform 0.4s;
\t transition: transform 0.4s;
}
.menu {
\t position: absolute;
\t width: 100%;
\t z-index: 1000;
\t text-align: center; \t
\t top: 50%;
\t padding: 0 1.5em;
\t -webkit-transform: translate3d(0,-50%,0);
\t transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
\t opacity: 0;
\t -webkit-transform: translate3d(0,200px,0);
\t transform: translate3d(0,200px,0);
\t -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
\t transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
\t display: inline-block;
\t padding: 0.8em;
}
.icon-list a i {
\t vertical-align: middle;
}
.icon-list a span {
\t display: inline-block;
\t margin-left: 10px;
\t font-size: 0.75em;
\t vertical-align: middle;
\t font-weight: 700;
\t letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
\t position: absolute;
\t width: 100%;
\t width: calc(100% + 400px);
\t height: 100%;
\t top: 0;
\t left: 0;
\t fill: #373a47;
\t -webkit-transition: -webkit-transform 0.4s;
\t transition: transform 0.4s;
\t -webkit-transform: translate3d(-400px,0,0);
\t 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 {
\t -webkit-transform: translate3d(0,0,0);
\t transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
\t -webkit-transition-delay: 0s;
\t transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
\t opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
\t -webkit-transition-delay: 0.05s;
\t transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
\t -webkit-transition-delay: 0.1s;
\t transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
\t -webkit-transition-delay: 0.15s;
\t transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
\t -webkit-transition-delay: 0.2s;
\t transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
\t -webkit-transition-delay: 0.25s;
\t transition-delay: 0.25s;
}
.show-menu .close-button {
\t -webkit-transition-delay: 0.3s;
\t transition-delay: 0.3s;
}
.show-menu .content::before {
\t -webkit-transition: opacity 0.4s;
\t 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>
あなたがどんな解決策を試してみましたか？もしそうなら、あなたが試みたことを私たちに教えてください。 – ItamarG3
@ ItamarG3私はメニューを編集しようとしましたが、結果は良くありません！私はこのリンクのCSSを編集しました：https://jsfiddle.net/hz7hfdk9/1/ –
これはあなたが何かを試してみました（本当に：Dですが）あなたの質問に含めるべきです。 – ItamarG3