基于 CSS3 的滑入式导航

Question

我正在使用基于 CSS3 的滑入式导航。 导航当前从左到右滑入，并以一定角度进行必要的过渡。我想使用相同的效果，但我需要从右向左滑动。

我从 codepen 找到了这个 sn-p，我尝试对其进行更改，但无法实现。

如果有人能帮我解决这个问题，那将有很大帮助。

这是我的代码的快速Fiddle -

.navigation-menu__bars, .navigation-menu__bars::before, .navigation-menu__bars::after {
  cursor: pointer;
  border-radius: 1px;
  height: 2px;
  width: 25px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  transition: all .3s;
}
.navigation-menu {
  background-color: transparent;
  height: 100%;
  position: fixed;
  width: 527px;
  transform: translateX(-100%);
  transition: transform .3s .3s;
}
.navigation-menu::before {
  background: #4E567E;
  content: '';
  height: 400%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%) rotate(40deg);
  width: 100%;
  z-index: 0;
}
.navigation-menu--open {
  transform: translateX(0);
}
.navigation-menu--open .navigation-menu__bars {
  background-color: transparent;
}
.navigation-menu--open .navigation-menu__bars::before, .navigation-menu--open .navigation-menu__bars::after {
  top: 0;
}
.navigation-menu--open .navigation-menu__bars::before {
  transform: rotate(45deg);
}
.navigation-menu--open .navigation-menu__bars::after {
  transform: rotate(-45deg);
}
.navigation-menu--open .menu-list__item {
  opacity: 1;
  transition-delay: 1.25s;
}
.navigation-menu__toggle {
  cursor: pointer;
  height: 30px;
  position: absolute;
  right: -40px;
  top: 5px;
  width: 30px;
}
.navigation-menu__bars::before, .navigation-menu__bars::after {
  content: '';
}
.navigation-menu__bars::before {
  left: 0;
  top: -8px;
}
.navigation-menu__bars::after {
  left: 0;
  top: 8px;
}

.menu-list {
  padding: 60px 20px;
  position: relative;
  z-index: 10;
}
.menu-list__item {
  margin: 40px 0;
  opacity: 0;
  transition: opacity .5s .5s;
}

Answer 1

经过3个半小时的挣扎，我自己解决了。

(function($) {
  $('.js-nav-menu-toggle').on('click', function() {
    $(this).parents('.navigation-menu').toggleClass('navigation-menu--open');
  });
  
  $('html').on('click', function(e) {
    if(!$(e.target).closest('.js-nav-menu').length &&
      ($('.js-nav-menu').hasClass('navigation-menu--open'))) {
        $('.js-nav-menu').removeClass('navigation-menu--open');
    }
  });
})(jQuery);

body {
  background: #000;
  font-size: 1.2em;
  color: #fff;
  height: 100vh;
}

.navigation-menu__bars, .navigation-menu__bars::before, .navigation-menu__bars::after {
  cursor: pointer;
  border-radius: 1px;
  height: 2px;
  width: 25px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  transition: all .3s;
}

.navigation-menu {
  background-color: transparent;
  height: 100%;
  position: fixed;
  width: 554px;
  transform: translateX(-100%);
  transition: transform .3s .3s;

  /*vk*/
  right: 0;
  transform: translateX(92%)
}
.navigation-menu::before {
  background: #4E567E;
  content: '';
  height: 400%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%) rotate(40deg);
  width: 100%;
  z-index: 0;

  /*vk*/
  transform: translate(-43%, -50%) rotate(-40deg);
}
.navigation-menu--open {
  transform: translateX(0);
}
.navigation-menu--open .navigation-menu__bars {
  background-color: transparent;
}
.navigation-menu--open .navigation-menu__bars::before, .navigation-menu--open .navigation-menu__bars::after {
  top: 0;
}
.navigation-menu--open .navigation-menu__bars::before {
  transform: rotate(45deg);
}
.navigation-menu--open .navigation-menu__bars::after {
  transform: rotate(-45deg);
}
.navigation-menu--open .menu-list__item {
  opacity: 1;
  transition-delay: 1s;
}
.navigation-menu__toggle {
  cursor: pointer;
  height: 30px;
  position: absolute;
  /*right: -40px;*/
  top: 5px;
  width: 30px;

  /*vk*/
  z-index: 9999;
}
.navigation-menu__bars::before, .navigation-menu__bars::after {
  content: '';
}
.navigation-menu__bars::before {
  left: 0;
  top: -8px;
}
.navigation-menu__bars::after {
  left: 0;
  top: 8px;
}

.menu-list {
  padding: 60px 20px;
  position: relative;
  z-index: 10;

  /*vk*/
  width: 200px;
  position: absolute;
  right: 0;
}
.menu-list__item {
  margin: 40px 0;
  opacity: 0;
  transition: opacity .5s .5s;
}

@media only screen and (max-width: 700px) {
  .navigation-menu {
    min-width: 240px;
    width: 80%;
  }
  .navigation-menu::before {
    width: 110%;
  }
}
@media only screen and (max-width: 480px) {
  .navigation-menu {
    background-color: #4E567E;
    min-width: 240px;
    width: 80%;
  }
  .navigation-menu::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navigation-menu js-nav-menu">
  <div class="navigation-menu__toggle js-nav-menu-toggle">
    <span class="navigation-menu__bars"></span>
  </div>
  <ul class="menu-list">
    <li class="menu-list__item">Menu Item 1</li>
    <li class="menu-list__item">Menu Item 2</li>
    <li class="menu-list__item">Menu Item 3</li>
    <li class="menu-list__item">Menu Item 4</li>
    <li class="menu-list__item">Menu Item 5</li>
  </ul>
</nav>

Answer 2

您可以在 css 中使用动画。w3school 网站上显示的最佳示例。 这是您可以使用的最佳动画示例

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: myfirst 5s 2; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
  animation: myfirst 0.5s;
  animation-direction: ri;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
  0%   {background: red; left: 200px; top: 0px;}
  50%  {background: yellow; left: 50px; top: 0px;}
  75% {background:red; left:25px;top:0px;}
  100% {background: red; left: 0px; top: 0px;}
}

</style>
</head>
<body>

<h1>The animation-direction Property</h1>

<p>Play the animation forwards first, then backwards:</p>
<div></div>
<p><strong>Note:</strong> The animation-direction property is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>