0

我为垂直旋转的侧边栏菜单制作了最糟糕的 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>

4

1 回答 1

0

对于这么少的代码，这里似乎有大量的 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。（原来在这里试试）

希望这可以帮助

于 2017-05-18T20:52:02.910 回答