Question

我有一个基本的全屏幻灯片菜单。它从左上角向外扩展，以适应全屏。但是，我不希望它向外扩展。相反，我希望它从左侧滑入才能占据整个屏幕。这可能吗？

<div class="top">
    <!-- place brand icon here -->
</div>

<div class="menu-collapsed">
  <div class="bar"></div>
       <nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
</div>


<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis sunt mollitia molestiae maxime, voluptatibus, voluptas placeat minima natus temporibus culpa repudiandae! Nam porro molestiae possimus, laboriosam, vero tenetur consequatur voluptatibus?</p>



html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  height: 100%;
  background-color: #369;
}

body.no-scroll {
    overflow-y:hidden;  
}

.top {
  width:100%;
  height:80px;
  background:#202020;
  position:fixed;
  top:0;
}

.menu-collapsed {
  transition: all .25s;
  position: fixed;
  top: 10px;
  right: 40px;
  height: 36px;
  width: 36px;
  z-index: 1;
  cursor: pointer;
}
.menu-collapsed ul {
  transition: all .05s;
  position: fixed;
  left: -9000px;
  top:0;
  bottom:0;
  display:none;
}

.bar {
  position: fixed;
  right: 36px;
  top: 40px;
  height: 4px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.75);
}
.bar:before {
  transition: all .25s;
  content: "";
  position: absolute;
  left: 0;
  top: -12px;
  height: 4px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.75);
}
.bar:after {
  transition: all .25s;
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  height: 4px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.75);
}

.menu-expanded {
  transition: all 8.25s;
  text-align: center;
  line-height: 200px;
  height: 100%;
  width: 100%;
  border-radius: 0px;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  background-color: rgba(0, 0, 0, 0.85);
  overflow-y:scroll;
}
.menu-expanded ul {
  transition: all .05s;
  position: relative;
  left: 0;
  top:0;
  bottom:0;
  z-index: 8888;
  display:block;
}
.menu-expanded a {
  transition: all .15s;
  text-decoration: none;
  color: white;
  font-size: 2em;
  font-family: 'Quicksand', sans-serif;
  padding: 5px;
}
.menu-expanded a:hover {
  transition: all .15s;
  letter-spacing: 2px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.menu-expanded .bar {
  background-color: transparent;
  transition: all .25s;
  right:50px;
}
.menu-expanded .bar:before {
  transition: all .25s;
  content: "";
  transform: rotate(45deg);
  top: -0px;
}
.menu-expanded .bar:after {
  transition: all .25s;
  content: "";
  transform: rotate(-45deg);
  top: 0px;
}

h1 {
  font-size: 3em;
  color: white;
  font-family: 'Quicksand', sans-serif;
  text-align: center;
  line-height: 250px;
}

p {
  width: 80%;
  margin: 0 auto;
  color: white;
  line-height: 1.8em;
  font-family: 'Quicksand', sans-serif;

}




$(document).ready(function() {
   $('.menu-collapsed').click(function() {
      $(this).toggleClass('menu-expanded');
      $('body').toggleClass('no-scroll');
    });
});

我把它放在codepen上（出于某种原因它在这里根本不起作用）http://codepen.io/anon/pen/Ywypby但是我重新考虑这是因为Codepen不会运行脚本。

Answer 1

你的动画在codepen中不起作用的原因是你没有在JS部分加载JQuery。只需单击小设置图标，即可将其加载到项目中。

要让动画从左侧滑入，您只需要在.menu-collapsed和.menu-expanded ....上定位转换。

而不是

transition: all XXs;

DO

transition: width XXs;

XXs就是您过渡的时间。

http://codepen.io/anon/pen/Ywypby

如何在全角菜单中更改幻灯片的转换

1 个答案: