[英]How can i put this SVG ‘Sidebar Menu’ in the right side?
In the following link, 在以下链接中,
Link: SVG Sidebar Menu 链接: SVG侧边栏菜单
there is some SVG nav
example. 有一些SVG nav
示例。 The first one (with Sidebar Menu title) is ideal for me. 第一个(带有补充工具栏菜单标题)对我来说很理想。 But I need put it in the right side instead left. 但是我需要将其放在右侧而不是左侧。
How can I do that? 我怎样才能做到这一点?
I put HTML and CSS that source code. 我把HTML和CSS当作源代码。 but if you see that link, it's easier than to help me... . 但是,如果您看到该链接,那比给我帮助要容易得多。
HTML 的HTML
<nav id="menu" class="menu">
<button class="menu__handle"><span>Menu</span></button>
<div class="menu__inner">
<ul>
<li><a href="#"><i class="fa fa-fw fa-home"></i><span>Home<span></a></li>
<li><a href="#"><i class="fa fa-fw fa-heart"></i><span>Favs<span></a></li>
<li><a href="#"><i class="fa fa-fw fa-folder"></i><span>Files<span></a></li>
<li><a href="#"><i class="fa fa-fw fa-tachometer"></i><span>Stats<span></a></li>
</ul>
</div>
<div class="morph-shape" data-morph-open="M300-10c0,0,295,164,295,410c0,232-295,410-295,410" data-morph-close="M300-10C300-10,5,154,5,400c0,232,295,410,295,410">
<svg width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none">
<path fill="none" d="M300-10c0,0,0,164,0,410c0,232,0,410,0,410"/>
</svg>
</div>
</nav>
CSS: CSS:
.menu {
position: fixed;
width: 300px;
top: 3em;
bottom: 3em;
left: 0;
z-index: 100;
overflow: hidden;
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.menu.menu--open {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.main {
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.menu.menu--open + .main {
opacity: 0.3;
pointer-events: none;
}
.menu__inner {
width: calc(100% + 25px);
padding: 0 140px 2em 0;
overflow-y: auto;
height: 100%;
position: relative;
z-index: 100;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
margin: 0 0 2em 0;
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.menu.menu--anim ul li {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.menu ul li:first-child {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.menu ul li:nth-child(2) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.menu ul li:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.menu ul li a {
display: block;
outline: none;
}
.menu ul li .fa {
font-size: 2.5em;
display: block;
margin: 0 auto;
color: #5f656f;
}
.menu ul li span {
font-weight: bold;
font-size: 0.75em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.menu__handle {
background: #2f3238;
border: none;
width: 30px;
height: 24px;
padding: 0;
outline: none;
position: absolute;
top: 3px;
right: 70px;
z-index: 2000;
}
.menu__handle::before,
.menu__handle::after,
.menu__handle span {
background: #5f656f;
}
.menu__handle::before,
.menu__handle::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
left: 0;
top: 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
}
.menu__handle span {
position: absolute;
width: 100%;
height: 2px;
left: 0;
overflow: hidden;
text-indent: 200%;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.menu__handle::before {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
.menu__handle::after {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
.menu--open .menu__handle span {
opacity: 0;
}
.menu--open .menu__handle::before {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
}
.menu--open .menu__handle::after {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
}
.morph-shape {
position: absolute;
width: 240px;
height: 100%;
top: 0;
right: 0;
}
.morph-shape svg path {
stroke: #5f656f;
stroke-width: 5px;
}
@media screen and (max-width: 63em) {
.main {
padding: 0 2em;
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.menu {
-webkit-transform: translate3d(-170px, 0, 0);
transform: translate3d(-170px, 0, 0);
}
.menu.menu--open + .main {
opacity: 0.05;
}
}
There is a couple of things you have to change in order to mirror navigation to the right: 您必须更改以下几点才能向右镜像导航:
.menu {
position: fixed;
width: 300px;
top: 3em;
bottom: 3em;
right: 0; // left: 0
z-index: 100;
overflow: hidden;
-webkit-transform: translate3d(150px, 0, 0); // -webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(150px, 0, 0); // transform: translate3d(-150px, 0, 0);
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.menu__inner {
width: 100%; // width: calc(100% + 25px);
padding: 0 0 2em 120px; // padding: 0 140px 2em 0;
overflow: hidden; // overflow-y: auto;
height: 100%;
position: relative;
z-index: 100;
}
.menu ul li {
margin: 0 0 2em 0;
-webkit-transform: translate3d(150px, 0, 0); // -webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(150px, 0, 0); // transform: translate3d(-150px, 0, 0);
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.morph-shape {
position: absolute;
width: 240px;
height: 100%;
top: 0;
left: 0; // right: 0;
// add this to change morphing direction
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.