Как создать фиксированную вертикальную навигацию?

Question

Вот пример. http://rsvp-paris.com/ Как вы можете видеть, их методы доставки повернуты и находятся на обоих концах каждой стороны. Это то, что я сделал:

.vertical{ 
    transform: rotate(90deg); 
    transform-origin: left top 0; 
    position: fixed; 
} 

Однако я использую фонд, так что вещи получить немного дурацкий, когда я масштабировать экран вниз. Мне просто нужен простой вертикальный текст в одной строке, который фиксируется в средней правой части экрана.

Answer 1

Вы можете использовать в сочетании transform значения rotate() + translate() для него.

jsFiddle

.vertical { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    transform: rotate(90deg) translate(50%, 0); 
 
    transform-origin: top right; 
 
    position: fixed; 
 
    top: 50%; 
 
    right: 0; 
 
} 
 
.vertical li:first-child { 
 
    border: 1px solid; 
 
}

<ul class="vertical"> 
 
    <li>Item One</li> 
 
    <li>Item Two</li> 
 
    <li>Item Three</li> 
 
</ul>