纯CSS的面包屑导航特效

一款纯CSS的面包屑导航特效，鼠标悬停在左箭头上的时候，展开对应的导航菜单，鼠标离开时则恢复为初始状态。

分类：导航菜单 > 图标导航难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需远程调用bootstrap样式库，并引入本地样式文件，代码如下：

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css"/>

页面的body部分，设置好展开伸缩的导航内容，代码如下：

<div class="back">
  <a href="#" class="btn-back">
    <div>
      <svg width="16px" height="14px" viewBox="0 0 16 14">
        <path d="M1,7 L15,7"></path>
        <polyline points="7 1 1 7 7 13"></polyline>
      </svg>
    </div>
    <span>Back</span>
  </a>
  <div class="menu-back">
    <ul class="nav-history">
      <li><a href="#">Javascript Basics</a></li>
      <li><a href="#">Introduction to Javascript</a></li>
      <li class="active"><a href="#">Your First Application</a></li>
    </ul>
    <ul class="nav-links">
      <li><a href="#">My Account</a></li>
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Support / Help</a></li>
    </ul>
  </div>
</div>

<a class="credit" href="http://www.sucaihuo.com" target="_blank">dribbble</a>