Question

我希望有人可以就视频课程如何实现像汗学院这样的导航（见屏幕截图：左侧导航）。我想我可以做悬停效果（例如，悬停视频标题的背景以棕色突出显示） - 基本上通过使用：hover in css。但是，我不知道如何添加你看到的“游戏”标志，圆圈和线条。如果我可以在你的帮助下解决这个问题，我还会考虑用序列号（1,2,3等）更改“播放”形状。效果很好，因为它显示视频是连接在一起的。我正在使用twitter bootstrap 3.3.5 for css。

谢谢！

Answer 1

可以使用CSS Path和Circle。参考文献：http://www.w3schools.com/svg/svg_path.asp

但是，让我们看看Khan如何编写这个UI功能：

我使用SnappySnippet只提取一个订单项。

SnappySnippet是一个DevTools扩展，允许您提取CSS 来自所选DOM子树的HTML和HTML（最后检查的元素）。然后，只需单击一下，您就可以将选定的代码发送到CodePen，jsFiddle 或JS Bin。

这会生成一个JS Bin，我只是开始清理并重命名通用行话。使用此代码可以了解CSS如何生成这些对象。继续清理代码，然后将此子导航项插入重复列表。

#li-container {
    background-position: 50% 100%;
    color: rgb(255, 255, 255);
    height: 80px;
    position: absolute;
    text-align: left;
    top: 0px;
    width: 40px;
    perspective-origin: 20px 40px;
    transform-origin: 20px 40px;
    background: rgba(0, 0, 0, 0) none repeat scroll 50% 100% / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_1*/

#line-top {
    top: 1px;
    color: rgb(255, 255, 255);
    height: 40px;
    left: 18px;
    position: absolute;
    text-align: left;
    width: 4px;
    z-index: 10;
    perspective-origin: 2px 21px;
    transform-origin: 2px 21px;
    background: rgb(104, 155, 81) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    padding: 2px 0px 0px;
}

#line-bot {
    bottom: -1px;
    color: rgb(255, 255, 255);
    height: 40px;
    left: 18px;
    position: absolute;
    text-align: left;
    width: 4px;
    z-index: 10;
    perspective-origin: 2px 21px;
    transform-origin: 2px 21px;
    background: rgb(104, 155, 81) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    padding: 2px 0px 0px;
}

#circle {
    background-position: 50% 100%;
    color: rgb(255, 255, 255);
    height: 25px;
    left: 8px;
    position: absolute;
    text-align: left;
    top: 40px;
    width: 25px;
    z-index: 20;
    perspective-origin: 12.5px 12.5px;
    transform-origin: 12.5px 12.5px;
    background: rgba(0, 0, 0, 0) url("https://www.khanacademy.org/images/progress-icons/subway-sprites-article-cs.svg") repeat scroll 50% 100% / 25px 75px padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    font: normal normal normal normal 13px / 18px 'Proxima Nova Semibold', sans-serif;
    list-style: none outside none;
    margin: -12px 0px 0px;
    outline: rgb(255, 255, 255) none 0px;
    overflow: hidden;
}

/* if you develop this further, please share your progress with me, stack-user: 'akorn'*/

<div id="li-container">
	
	<div id="line-top"></div>
	<div id="circle"></div>
        <div id="line-bot"></div>
</div>

Answer 2

我使用Akorn的答案作为基线来实现我的需要。对我来说这是一个很好的练习（css新手）。我摆弄了css和html，删除了一堆似乎什么都不做的属性，想出了一种在表中使用它而不是无序列表的方法 - 我需要的方式：open（第一项），行（整个）然后关闭（最后一项）。 Here's the fiddle。我希望这会得到改进或重新设计，如果有人请更新此页面，谢谢！

CSS

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">   

<table class="table table-condensed task-table">
  <tbody>
    <tr class='active'>
      <td class="subway-station">
        <div class="subway-open"></div>
        <div class="circled number">1</div>
      </td>
      <td class="serie">
        <div>
          <h1>
            <a href="">The Alphabet Part 1</a>
          </h1>
          <p>In the beginning, there was A, B, C. Exposing yourself to foreign language can change the way you look at the world and create comprehensive avenues that would otherwise be unavailable.</p>
        </div>
      </td>
    </tr>
    <tr class='active'>
      <td class="subway-station">
        <div class="subway-line"></div>
        <div class="circled number">2</div>
      </td>
      <td class="serie">
        <div>
          <h1>
            <a href="">The Alphabet Part 2</a>
          </h1>
          <p>Domestic confined any but son bachelor advanced remember. How proceed offered her offence shy forming. Returned peculiar pleasant but appetite differed she. Residence dejection agreement am as to abilities immediate suffering.</p>
        </div>
      </td>
    </tr>
    <tr class='active'>

      <td class="subway-station">
        <div class="subway-line"></div>
        <div class="circled number">3</div>
      </td>
      <td class="serie">
        <div>
          <h1>
            <a href="">The Alphabet Part 3</a>
          </h1>
          <p>zzZZZZZZ Agreement distrusts mrs six affection satisfied.</p>
        </div>
      </td>
    </tr>
    <tr class='active'>

      <td class="subway-station">
        <div class="subway-close"></div>
        <div class="circled number">4</div>
      </td>
      <td class="serie">
        <div>
          <h1>
            <a href="">The Alphabet Part 4</a>
          </h1>
          <p>Sigh view am high neat half to what. Sent late held than set why wife our. If an blessing building steepest. Agreement distrusts mrs six affection satisfied. Day blushes visitor end company old prevent chapter.</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

HTML

{{1}}

如何在引导程序中实现像汗学院这样的视频播放导航？

2 个答案: