我制作了一个完整的HTML / css汉堡包菜单，并且尝试在右侧输入。我可以从左侧进行操作，但是从右侧开始会遇到一些麻烦。我知道问题出在元素的最终位置，但是我不知道如何从这一侧进行调整。

这是HTML

    nav {
     position: absolute;
     #menuToggle {
     display: block;
     position: fixed;
     top: 40px;
     right: 50px;
     z-index: 1000000;
     -webkit-user-select: none;
     user-select: none;

     input {
       display: block;
       width: 45px;
       height: 50px;
       position: absolute;
       top: 0;
       right: 0;
       cursor: pointer;
       opacity: 0; /* hide this */
       z-index: 2; /* and place it over the hamburger */
       -webkit-touch-callout: none;
     }

     img {
       display: block;
       width: 45px;
       margin-bottom: 5px;
       position: relative;
       border-radius: 3px;
       z-index: 1;
     }

     .menu {
       position: absolute;
       width: 50vw;
       height: 100vh;
       margin: -100px 0 0 -50px;
       padding: 50px;
       padding-top: 125px;
       background: $mc-color-green;
       list-style-type: none;
       -webkit-font-smoothing: antialiased;
       transform-origin: 100% 100%;
       transform: translate(100%,0);
       transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

       li {
         padding: 10px 0;
         font-size: 22px;

         a {
           text-decoration: none;
           color: #fff;
           transition: 0.3s ease;
         }

         a:hover {
           color: $mc-color-grey;
         }
       }
     }
   }
 }

    #menuToggle input:checked ~ ul {
      transform: none;
    }

这是SCSS

        // Get menu input
        if (cin.get() == '\n') {    // Check if user hot entered,assign value if so
            input = 0; 
        } else {                    // If not,do it normally
            input = cin.get();
        }