固定垂直ナビゲーションを作成するには？

Question

例を示します。 http://rsvp-paris.com/ご覧のとおり、配送方法は回転しており、両側の両端にあります。これは私がやったことです：

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

私はファンデーションを使用していますが、私は画面を縮小すると少し不気味になります。私はちょうど1行に単純な縦のテキストがほしい、それは画面の真ん中の右側に固定されています。あなたはそれのためにrotate() + translate()の組み合わせtransform値を使用することができ

Answer 1

。

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>