Question

关于垂直旋转的侧边栏菜单，我制作了最糟糕的CSS。有什么帮助来制作这个合适的CSS吗？我也试过旋转列表容器DIV。但我又无法控制位置

这是菜单

.slidebar_container {
  position: relative;
  left: 0px;
  top: 0px;
  display: block;
  width: 58px;
  height: 400px;
  margin-bottom: 2px;
  padding-top: 0px;
  float: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 50px;
  background-color: #393e45;
}

.sidebar_list_item {
  display: block;
  margin-right: 10px;
  margin-left: 10px;
  float: right;
  clear: none;
  font-family: Poppins, sans-serif;
  color: #fff;
  line-height: 58px;
  font-size:12px;
  font-weight: 700;
}

.sidebar_menu_list {
  position: absolute;
  right: 0px;
  bottom: 0px;
  display: block;
  width: 440px;
  height: 50px;
  margin: -58px -185px 130px 63px;
  padding-left: 0px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.services_section {
  display: block;
  height: 100%;
  background-color: rgb(0, 152, 255);
}

 <div class="services_section">
      <div class="slidebar_container">
        <ul class="sidebar_menu_list w-clearfix w-list-unstyled">
          <li class="sidebar_list_item">Quality</li>
          <li class="sidebar_list_item">Pricing</li>
          <li class="sidebar_list_item">Turnaround</li>
          <li class="sidebar_list_item">Translation</li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

对于如此少量的代码，这里似乎有大量的CSS。消除大部分内容的关键是将transform-origin添加到您的CSS中。那么它只是调整填充（你怎么得到那些数字??）和修复位置等问题。

谨慎地使用绝对定位......只是一个提示..因为它在响应式设计方面会让事情变得尴尬。

我在另一段中添加了演示如何在该部分中添加其他文字。

请尝试以下代码：

nav {
  position: relative;
  display: inline;
  width: 50px;
  height: 100%;
  margin: 0 auto;
  float: left;
  border-radius: 30px;
  background-color: #393e45;
}

.sidebar_list_item {
  height: 40px;
  text-align: center;
  z-index: 1;
  font-family: Poppins, sans-serif;
  color: #ffffff;
  line-height: 1em;
  font-size: 0.9em;
  font-weight: 700;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: left top 0px;
  vertical-align: middle;
  padding: 34px 0px 30px 0px;
}

#sidebar_menu_list {
  list-style: none;
  position: relative;
  margin-left: -55px;
  margin-top: 22vh;
  margin-bottom: 15vh;
  width: auto;
  height: 100%;
}

#services_section,
body {
  background: #8FBAC8;
  width: 100%;
  height: 100vh;
  background-size: cover;
}

p {
  display: inline-block;
  position: relative;
  padding-left: 0;
  margin-left: 20px;
  width: 80%;
}

.text {
  color: #696969;
}

.end {
  color: #AFAFA4;
}

<body>
  <div id="services_section">
    <nav>
      <ul id="sidebar_menu_list">
        <li class="sidebar_list_item">Quality</li>
        <li class="sidebar_list_item">Pricing</li>
        <li class="sidebar_list_item">Turnaround</li>
        <li class="sidebar_list_item">Translation</li>
      </ul>
    </nav>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam erat turpis, semper vitae tortor tincidunt, venenatis ultrices augue. Praesent dictum at purus id viverra. Integer felis eros, consequat ut malesuada quis, venenatis iaculis dui.</p>
    <p
      class="text">In odio ipsum, hendrerit finibus eleifend non, condimentum quis sem. In posuere, ante ac ullamcorper finibus, tortor leo congue felis, id lacinia dui urna tincidunt erat. Proin eleifend nulla laoreet nunc tincidunt sagittis. Aenean scelerisque iaculis
      enim ac fringilla. Vestibulum vehicula ex sit amet lorem vulputate, in feugiat tortor consectetur. Nullam hendrerit rutrum commodo.</p>
      <p class="end">Integer iaculis metus in nisl tristique, et feugiat ex ornare. Sed id ipsum arcu. Aliquam elit sapien, pulvinar feugiat condimentum et, tempus in neque. Nunc volutpat massa lectus, sed fermentum magna accumsan vitae. Sed vitae lectus a diam rhoncus
        bibendum.</p>
  </div>
</body>

这里有一个jsfiddle。（原始尝试here）

希望这有帮助

如何在垂直文本菜单中使用适当的CSS？

1 个答案: