How can I use proper CSS for a vertical text menu?

Question

I've made the worst CSS for about a vertical rotated sidebar menu. any help to make this proper CSS please? I've tried to rotate list container DIV too. But again I can't control the position

here is the menu

.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>

What do you mean by "proper CSS" - what you have looks OK to me. — Michael Coker, May 17 '17 at 15:57
@delizade I posted an answer. It seems to work nicely. Have a look. Then visit http://www.stackoverflow/help/accepted-answer to see how you can gain rep if it works for you!! (although seemingly you've been on the site for over 3 years?.. hmm.. hover+click.. not that hard) — Rachel Gallen, May 19 '17 at 05:48

Rachel Gallen · Answer 1 · 2017-05-18T21:43:38.463

There seems to be a huge amount of css here for such a small amount of code. The key to eliminating most of it is to add in transform-origin to your css. Then its just a matter of adjusting padding (?? how did you get those numbers?? ) and fixing the position etc..

Use absolute positioning sparingly.. just a hint.. cos it makes things awkward when it comes to responsive design.

I added in another paragraph to demonstrate how to add other text into the section.

Try the following code:

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>

There's a jsfiddle here. (original try here)

Hope this helps

full-page the snippet, you don't get the effect from the snippet window — Rachel Gallen, May 18 '17 at 21:07

How can I use proper CSS for a vertical text menu?

1 Answers1