Чистый CSS меню гамбургера с правой стороны введите - PullRequest
Новая
       33

Чистый CSS меню гамбургера с правой стороны введите

0 голосов
/ 04 ноября 2019

Я сделал целое меню гамбургеров HTML / CSS, и я пытаюсь заставить правую сторону войти в него. Я могу сделать это слева, но у меня возникают проблемы с правой стороны. Я знаю, что проблема с конечным положением элемента, но я не знаю, как настроить его с этой стороны.

Вот HTML 

    <nav>
        <div id="menuToggle">
          <!--
          A fake / hidden checkbox is used as click reciever,
          so you can use the :checked selector on it.
          -->
          <input type="checkbox" />

          <img src="img/svg/logomc-nav.svg" alt="">
          <!-- img as button to activate -->

          <ul id="menu" class="menu">
            <li><a href="home.html">Home</a></li>
            <li><a href="pages/guarderia.html">Guarderia</a></li>
            <li><a href="pages/adiestramiento.html">Adiestramiento</a></li>
            <li><a href="pages/refugio.html">Refugio</a></li>
            <li><a href="pages/veterinaria.html">Veterinaria</a></li>
          </ul>
        </div>
      </nav>

А Вот SCSS 

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