回しナビゲーションバーとCSS

Question

は私のワードプレスのウェブサイトに回転するが、それは中心に、画面の左側に閉じ持つように達成することはできません。

これは私が今得たもののスクリーンショットです：これは、使用してコードCSS Iamはある

が、優れている別のオプションがあり、そのクリーンかどうかを知るドント..

nav.standard { 
position: fixed; 
-webkit-transform: rotate(90deg); 
-ms-transform: rotate(90deg); 
transform: rotate(90deg); 
} 

任意の提案？

ありがとうございます！

Answer 1

は、ここでそれを行うと、それは、ページの横に固執持っているきれいな方法です。関連するビットの

ライン・バイ・ライン内訳（以下フルライブデモ）：

/* fix the bar */ 
position: fixed; 
/* since we're rotating, set its width to the screen height */ 
width: 100vh; 
bottom: 0; 
/* push our bar into the screen by its height (2em) */ 
right: 2em; 
line-height: 2em; 
/* rotate 90deg clockwise */ 
transform: rotate(90deg); 
/* use the bottom-right as rotation point */ 
transform-origin: 100% 100%; 

.nav { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    white-space: nowrap; 
 

 
    position: fixed; 
 
    width: 100vh; 
 
    bottom: 0; 
 
    right: 2em; 
 
    line-height: 2em; 
 
    transform: rotate(90deg); 
 
    transform-origin: 100% 100%; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    margin: 0 1em; 
 
}

<ul class="nav"> 
 
    <li>Page 1</li> 
 
    <li>Page 2</li> 
 
    <li>Page 3</li> 
 
    <li>Page 4</li> 
 
</ul>

Answer 2

あなたは​​との組み合わせでwriting-mode: vertical-lr;を使用することができます。

body { 
 
background-color: #eee; 
 
} 
 

 
nav.standard { 
 
position: absolute; 
 
left: 0; 
 
top: 0; 
 
bottom: 0; 
 
text-align: center; 
 
-webkit-writing-mode: vertical-lr; 
 
-moz-writing-mode: vertical-lr; 
 
-ms-writing-mode: vertical-lr; 
 
writing-mode: vertical-lr; 
 
transform: rotate(180deg); 
 
background-color: #FFF; 
 
} 
 

 
nav.standard a { 
 
    color: #333; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 0.8em 0.4em; 
 
    font-size: .75rem; 
 
}

<nav class="standard"> 
 
<a href="#">— Home</a> 
 
<a href="#">— About</a> 
 
<a href="#">— Portfolio</a> 
 
<a href="#">— Contact</a> 
 
</nav>