How to do this vertical navigation bar? - html

Question

i am trying to do a vertical navigation bar from this codepen
http://codepen.io/bronsrobin/pen/GAlfg
but i only need the navigation bar nothing else
i tried to copy the html related to the navigation bar but nothing happened
you can check my fiddle
http://jsfiddle.net/922ug/
html
<aside>
<a class="current">Home</a>
<a>Users</a>
<a>Schedule</a>
<a>Info</a>
</aside>
look on the js fiddle to understand.
can anybody fix it for me please and tell me whats the problem?

Answer 1

There are two issues with your JSFiddle code.
1: Your are using SCSS where normal CSS is expected
All your CSS lines affecting color are actually written in SCSS code.
SCSS (Sassy CSS) is a CSS preprocessor language, it enables you write CSS with a few extra features that are not normally not allowed (such as the use of variables and calculations); when you save it, a program converts/compiles it into a standard CSS file.
But rarely should you enter straight SCSS into a browser. In this case, it must be converted to regular CSS first (note that the CodePen example specifically says "CSS (SCSS)" at the top, so CodePen is automatically doing this compiling; JSFiddle is not).
For example, this SCSS line in your JSFiddle:
background-color: $black;
It uses a variable, $black. CSS will not understand this. Using the CodePen example's color variables at the top, the CSS line would normally be compiled to:
background-color: #171616;
Which is perfectly valid normal CSS.
Here's the fully-compiled CSS you need:
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: You are using a jQuery script but did not add the jQuery library to your code
This keeps the code from successfully running. In JSFiddle, you can add the library by using the drop-down menus on the far-left.
The revised menu solving both issues can be seen here:
http://jsfiddle.net/922ug/1/