How can i put this SVG ‘Sidebar Menu’ in the right side?


Tags: javascript,jquery,html,css,snap.svg

Problem :

In the following link,

Link: SVG Sidebar Menu

there is some SVG nav example. 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. but if you see that link, it's easier than to help me... .

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:

   .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;
    }
}


Solution :

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);
}

DEMO


    CSS Howto..

    How to make these jquery pop ups fall back to css when javascript disabled

    How do change CSS Class from Code Behind?

    How to set my Django form on the center of the page

    How to change the size of item-avatar in ionic?

    How can I stop an CSS animation from interfering with a CSS transform transition?

    How to create multiline ListBox in GWT?

    How to keep links and hover effects on my icon-fonts isolated with CSS

    site only shows half screen on mobile? Rest of screen is just body background?

    How do I use existing CSS to style HTML content in textAngular

    How can I have a transparent overlay and center with flex box?

    How to show transition of an element that is expanding over nearby content?

    How to place kartik typeahead above text input

    How to blink a text on button in IE ,chrome etc using JQuery or CSS

    Meeting Calendar | How to take care of the overlapping meetings to show in the calendar?

    How to set a max-width only to text nodes not in a tag?

    how to check css is valid for IE8

    How can I center two images side-by-side with Bootstrap 3?

    How to make a CSS scroll follow div stop follow at a position

    How to add links to tabbing order when they're made visible with CSS?

    How to center my a div in a table using CSS?

    How to quickly create complex web controls for web development? [closed]

    How to show hidden div when javascript is disabled?

    How to properly preload images, js and css files?

    How to set the default font in Google Closure Library rich text editor

    How to remove horizontal space between divs that contain fixed size svg elements?

    How to change the Color of dynamically created divs on click event, who are having same class?

    How to Control Width of Title (H2) with CSS?

    Using CSS, how can I control the line-height for master headline?

    Simple CSS: How to fix display:inline issue

    How can I prevent a flex container from overflowing/underflowing?