Question

我正在尝试从左上角移动移动导航并从左侧向右侧滑入。我试图从左到右改变位置设置，但它没有用。我真的很感激任何帮助！

下面的代码，谢谢！

#wrapper {
  position: absolute;
  width: auto;
  min-width: 60px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
}

label {
  cursor: pointer;
}

&:focus {
  outline: none;
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 240px;
  height: 100%;
  transform: translate3d(-240px, 0, 0);
  transition: transform 0.35s;
}

label.menu-toggle {
  position: absolute;
  right: -60px;
  width: 60px;
  height: 60px;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent: -9999px;
  background: transparent url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50% / 25px 25px no-repeat;
}

label.active {
  background: transparent url(menu-cross.png) 50% 50% / 25px 25px no-repeat;
}

ul li>label {
  background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50% / 16px 16px no-repeat;
}

a,
label {
  display: block;
  text-align: left;
  padding: 0 30px;
  line-height: 60px;
  text-decoration: none;
  margin: 0 auto;
  color: #000;
}

&:hover {
  color: #666;
}
   
.menu-checkbox{
    display: none;
}

   
.menu .menu label.menu-toggle {
     background: none;
}    

.menu-checkbox:checked + .menu {
     transform: translate3d(0, 0, 0);
}

<div id="wrapper">
  <input type="checkbox" id="menub" name="menu" class="menu-checkbox">
  <div class="menu">
    <label class="menu-toggle" for="menub"><span>Toggle</span></label>
    <ul>

      <li>
        <a href="">link</a>
      </li>
      <li>
        <a href="">link</a>
      </li>
      <li>
        <a href="">link</a>
      </li>

    </ul>
  </div>
</div>
<!-- #wrapper -->

Answer 1

我相信你的任务过于复杂。您可以在visual studio上打开新项目并从那里开始。这将是最好的选择，因为您想要实现的结果很可能是相同的。

现在，如果你想坚持这一点，你必须仔细检查你的样式代码，以及阻止项目在右侧对齐的原因。

将移动导航从左向右移动

1 个答案: