如何做這個垂直導航欄？

Question

我想從這個codepen http://codepen.io/bronsrobin/pen/GAlfg 做一個垂直導航欄，但我只需要在導航欄上沒有別的 我試圖複製相關的導航欄中的HTML，但什麼都沒有發生 你可以檢查我的小提琴

http://jsfiddle.net/922ug/

html 

    <aside> 
     <a class="current">Home</a> 
     <a>Users</a> 
     <a>Schedule</a> 
     <a>Info</a> 
    </aside> 

外觀上的JS小提琴理解。

任何人可以幫我，請告訴我什麼問題？

Answer 1

沒有與您的jsfiddle代碼的兩個問題。

1：您正在使用SCSS其中正常CSS預計

所有影響顏色的CSS線實際上寫的是在SCSS代碼。

SCSS（野蠻女友CSS）是一種CSS預處理語言，它可以讓你寫CSS與正常情況下不不允許的（如使用的變量和計算）一些額外的功能;當你保存它時，程序將它轉換/編譯成一個標準的CSS文件。

，但很少，你應該進入直SCSS到瀏覽器中。在這種情況下，必須將其轉換爲常規CSS第一（注意CodePen例如特別說「CSS（SCSS）」在頂部，所以CodePen自動做這個編譯;的jsfiddle不是）。

例如，在你的jsfiddle這個SCSS行：

background-color: $black; 

它使用一個變量$黑色。 CSS不會理解這一點。使用CodePen例子的顏色變量在頂部，CSS線通常會被編譯爲：

background-color: #171616; 

這是完全有效的正常CSS。

這裏有您需要完全編譯CSS：

aside { 
    width: 17%; 
    min-width: 150px; 
    max-width: 300px; 
    height: 100%; 
    background-color: #171616; 
    position: fixed; 
    top: 50px; 
    float: left;  
    padding: 25px 0 0 0; 
} 
aside a { 
    display: block; 
    line-height: 40px; 
    border-right: 4px solid transparent; 
    cursor: pointer; 
    transition: background-color .3s linear, 
       border-right-color .3s linear, 
       color .3s linear; 
    color: #808080; 
    padding: 0 0 0 30px; 
    font-weight: 600; 
    text-transform: uppercase; 
    text-decoration: none; 
    letter-spacing: 1px; 
} 
aside a:hover, 
aside a.current { 
    background-color: #1D1B1B; 
    border-right-color: #FDCC1C; 
    color: #FFFFFF; 
} 

2：您正在使用jQuery腳本，但沒有將jQuery庫添加到您的代碼

這樣可以使代碼運行成功。在JSFiddle中，您可以使用最左側的下拉菜單添加庫。

修訂後的菜單解決這兩個問題可以在這裏看到： http://jsfiddle.net/922ug/1/