CSS3 弹出式文章目录栏

点击章节（04），弹出文章目录。

catalog

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1614
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
  background: white;
  -webkit-font-smoothing: antialiased; }

ul {
  left: 0;
  height: 80px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 290px;
  -moz-transition: height 0.3s ease-in-out, background 0.5s ease-in-out;
  -o-transition: height 0.3s ease-in-out, background 0.5s ease-in-out;
  -webkit-transition: height 0.3s ease-in-out, background 0.5s ease-in-out;
  transition: height 0.3s ease-in-out, background 0.5s ease-in-out; }

ul:after {
  bottom: 0px;
  content: '';
  background: #d4dee0;
  height: 1px;
  left: 0;
  position: absolute;
  width: 53%;
  z-index: 1;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out; }

ul:hover {
  height: 100%; }

ul:hover:after {
  background: #34484d;
  height: 100%;
  width: 100%; }

ul:hover li {
  height: 60px;
  opacity: 1; }

ul:hover span {
  opacity: 1; }

ul:hover .selected:after {
  opacity: 0;
  width: 100%; }

ul:hover a {
  font-size: 24px;
  font-weight: 600;
  height: 50px;
  line-height: 51px;
  padding-left: 20px; }

li {
  height: 0;
  list-style: none;
  opacity: 0;
  position: relative;
  z-index: 2;
  -moz-transition: height 0.2s ease-in-out;
  -o-transition: height 0.2s ease-in-out;
  -webkit-transition: height 0.2s ease-in-out;
  transition: height 0.2s ease-in-out; }

li span {
  opacity: 0; }

a {
  color: #eee;
  display: block;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 42px;
  font-weight: 300;
  height: 0;
  letter-spacing: 0.03em;
  line-height: 60px;
  overflow: hidden;
  padding: 5px;
  text-decoration: none;
  text-transform: uppercase;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out; }

a:hover {
  background: rgba(255, 255, 255, 0.1); }

.selected {
  height: 70px;
  opacity: 1;
  position: relative; }

.selected a {
  color: #22c8f2;
  font-size: 60px;
  height: 70px;
  letter-spacing: 0;
  line-height: 74px;
  opacity: 1;
  padding-left: 80px;
  visibility: visible;
  overflow: hidden; }

.content {
  margin: 0 auto;
  width: 50%; }

.content h1 {
  color: #34484d;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 42px;
  font-weight: 800;
  text-transform: uppercase; }

.content p {
  font-family: "adelle", serif;
  font-size: 16px;
  line-height: 26px; }

HTML

<nav role='navigation'>
  <ul>
    <li><a href="#">01<span>. Participation</span></a></li>
    <li><a href="#">02<span>. Distance</span></a></li>
    <li><a href="#">03<span>. Rate</span></a></li>
    <li class="selected"><a href="#">04<span>. Rides</span></a></li>
    <li><a href="#">05<span>. Stats</span></a></li>
    <li><a href="#">06<span>. Cyclists</span></a></li>
  </ul>
</nav>

<div class="content">
  <section>
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue consequat felis vitae volutpat. Cras vestibulum volutpat massa at ultricies. Donec hendrerit lacus vel turpis mollis sit amet volutpat leo pharetra. Cras eu tellus magna, nec sodales turpis. Nulla suscipit turpis ornare purus mollis ultricies. Cras congue cursus magna eu varius. Vivamus eget nulla justo. Ut eget magna diam, lobortis ultrices tortor. Fusce bibendum cursus quam, bibendum eleifend justo accumsan adipiscing. Nam vulputate lacus eu ligula commodo ornare. Morbi viverra, dolor vel lobortis sollicitudin, dolor purus tincidunt quam, ut porttitor arcu nibh sed est. Donec id urna ut elit tincidunt pretium in sed metus. Nulla congue magna nec dui lacinia ut tincidunt quam euismod. Suspendisse a nulla enim, vitae volutpat nisl. Morbi pharetra congue erat a varius. Sed fringilla venenatis nunc eget scelerisque.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue consequat felis vitae volutpat. Cras vestibulum volutpat massa at ultricies. Donec hendrerit lacus vel turpis mollis sit amet volutpat leo pharetra. Cras eu tellus magna, nec sodales turpis. Nulla suscipit turpis ornare purus mollis ultricies. Cras congue cursus magna eu varius. Vivamus eget nulla justo. Ut eget magna diam, lobortis ultrices tortor. Fusce bibendum cursus quam, bibendum eleifend justo accumsan adipiscing. Nam vulputate lacus eu ligula commodo ornare. Morbi viverra, dolor vel lobortis sollicitudin, dolor purus tincidunt quam, ut porttitor arcu nibh sed est. Donec id urna ut elit tincidunt pretium in sed metus. Nulla congue magna nec dui lacinia ut tincidunt quam euismod. Suspendisse a nulla enim, vitae volutpat nisl. Morbi pharetra congue erat a varius. Sed fringilla venenatis nunc eget scelerisque.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue consequat felis vitae volutpat. Cras vestibulum volutpat massa at ultricies. Donec hendrerit lacus vel turpis mollis sit amet volutpat leo pharetra. Cras eu tellus magna, nec sodales turpis. Nulla suscipit turpis ornare purus mollis ultricies. Cras congue cursus magna eu varius. Vivamus eget nulla justo. Ut eget magna diam, lobortis ultrices tortor. Fusce bibendum cursus quam, bibendum eleifend justo accumsan adipiscing. Nam vulputate lacus eu ligula commodo ornare. Morbi viverra, dolor vel lobortis sollicitudin, dolor purus tincidunt quam, ut porttitor arcu nibh sed est. Donec id urna ut elit tincidunt pretium in sed metus. Nulla congue magna nec dui lacinia ut tincidunt quam euismod. Suspendisse a nulla enim, vitae volutpat nisl. Morbi pharetra congue erat a varius. Sed fringilla venenatis nunc eget scelerisque.</p>
  </section>
</div>

点击章节（04），弹出文章目录。

catalog

编辑器支持Emmet

快捷键

点击章节（04），弹出文章目录。

catalog

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：