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

Question

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

216 Views Asked by delizade At 09 April 2025 at 04:30

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>

Original Q&A

There are 1 best solutions below

**Rachel Gallen** · Answer 1

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

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

There are 1 best solutions below

Related Questions in CSS

Related Questions in MENU

Related Questions in VERTICAL-TEXT

Trending Questions

Popular # Hahtags

Popular Questions