與可滾動旋轉文本垂直對齊

Question

我想獲得一個垂直導航列表，該列表旋轉90度以成爲可垂直滾動（與視口相關）。這個想法是菜單項可以動態地添加，並且一旦添加了完整的視口高度後，添加就可以垂直滾動。

當前的解決方案几乎可以工作，它會使列表水平擴展，如果您有窄的固定寬度導航欄，這並不理想。

這裏是一個來自2年前的previous question的代碼示例，用於說明。

JSBIN

html, body { 
 
    min-height:100%; 
 
    max-height:100%; 
 
    height:100%; 
 
    font-family:Oswald, sans-serif, Arial; 
 
    font-size:14px; 
 
    background:#fff 
 
} 
 
a { 
 
    text-decoration:none 
 
} 
 
li { 
 
    list-style:none 
 
} 
 
ul {  
 
    margin:0 
 
} 
 
.main-nav { 
 
    width:100vh;  
 
    height:45px; 
 
    position:fixed; 
 
    background:#4c4c4c; 
 
    -webkit-transform-origin: left top; 
 
    -webkit-transform:rotate(-90deg) translateX(-100%); 
 
} 
 
ul.nav {  
 
    margin:0 auto; 
 
    height:100%;   
 
} 
 

 
ul.nav li {  
 
    margin-right:20px; 
 
    float:right; 
 
    height:100%; 
 
    line-height:45px; 
 
} 
 
ul.nav li a {   
 
    color:#fff;  
 
}

<div class="main-nav"> 
 
    <ul class="nav"> 
 
    <li><a href="#">HOME</a></li> 
 
    <li><a href="#">METHODOLGY</a></li> 
 
    <li><a href="#">PORTFOLIO</a></li> 
 
    <li><a href="#">SERVICES</a></li> 
 
    <li><a href="#">TEAM</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
</div>

Answer 1

就在ul.nav選擇添加display:flex和.main-nav

這裏設置overflow-y:hidden和overflow-x:auto是JSBIN：http://jsbin.com/qixapariku/1/edit?html,css,output

Answer 2

position:fixed是在路上。，因爲它矗立在窗口區域和完全流動的，當然無法滾動爲是

If you want it to scroll您可以設置fixed到absolute

---

另一種方法absolute，並writing-mode 你可能需要一看寫模式仍然使用變換來反轉方向：

ul { 
 
    white-space:nowrap; 
 
    writing-mode:vertical-lr; 
 
    transform:scale(-1,-1); 
 
    padding: 1em 0; 
 
    position:absolute;/* not fixed !! */ 
 
} 
 
li { 
 
    display:inline; 
 
}

<ul class="nav"> 
 
     <li><a href="#">HOME</a></li> 
 
     <li><a href="#">METHODOLGY</a></li> 
 
     <li><a href="#">PORTFOLIO</a></li> 
 
     <li><a href="#">SERVICES</a></li> 
 
     <li><a href="#">TEAM</a></li> 
 
     <li><a href="#">CONTACT</a></li> 
 
     </ul>

您也可以使用flex和row-reverse：http://codepen.io/gc-nomade/pen/PNKeeq帶回首頁/頂部的鏈接。