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

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 (Sassy CSS) - это язык препроцессора CSS, он позволяет писать CSS с несколькими дополнительными функциями, которые обычно не разрешены (например, использование переменных и вычислений); при его сохранении программа преобразует/компилирует ее в стандартный файл CSS.

Но редко вы должны вводить прямой SCSS в браузер. В этом случае он должен быть сначала преобразован в обычный CSS (обратите внимание, что пример CodePen специально говорит «CSS (SCSS)» вверху, поэтому CodePen автоматически выполняет эту компиляцию, а JSFiddle - нет).

Например, эта линия SCSS в вашем JSFiddle:

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/

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.