vertical fixed menu with text rotation

index.html

<ul class="menu">
    <li class="menu_i"><span class="menu_i_tx">текст</span></li>
    <li class="menu_i"><span class="menu_i_tx">Варфаламей Константинопольский</span></li>
  <li class="menu_i"><span class="menu_i_tx">lorem impsum</span></li>
</ul>

style.css

.menu {
  position: fixed;
  top: 10px;
  left: 10px;
  display: block;
  width: auto;
  text-align: left;
}

.menu_i {
  list-style: none outside;
  background: #ccc;
  border: 1px solid #000;
  padding: 10px 0;
  margin: 10px 0 0;
  display: block;
  overflow: hidden;
  width: 25px;
  line-height: 25px;
    
}

.menu_i_tx {
  transform: translate(0,100%) rotate(-90deg);
  transform-origin: 0 0;
  white-space: nowrap;
  display: inline-block;
  vertical-align: top;
}

.menu_i_tx:after {
    content: "";
    float: left;
    margin-top: 100%;
}

vertical-fixed-menu-with-text-rotation.markdown

vertical fixed menu with text rotation

A Pen by Daniel on CodePen.

License.