怎么做这个垂直导航栏？

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文件。

但很少你应该直接将SCSS输入浏览器。在这种情况下，它必须首先转换为常规CSS（请注意，CodePen示例在顶部专门说“CSS（SCSS）”，因此CodePen会自动执行此编译; JSFiddle不会）。

例如，JSFiddle中的这个SCSS行：

  background-color: $black;

它使用变量$ 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/