我想像本页上的那样制作半相同的手册 - 怎么做？

Question

我想制作一份类似于 THIS 页上的手册。

当我将鼠标悬停在 HOME 上时，HOME 向右移动（如何操作）并且整个子菜单出现 - 通过动画。当我查看 Dev Tools 时，我无法确定此菜单是仅在 CSS 中还是在 javascript 中制作的。有人可以简要解释一下如何制作这样的手册，例如 jquery 或 javascript 在哪里可以找到图书馆。

Answer 1

你甚至可以使用纯 CSS:

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
label, a {text-decoration: none; cursor: pointer; color: #99f;}
li {padding: 5px;}
#menu {display: none;}
.menu-trigger {position: absolute; border: 1px solid #ccc; display: inline-block; padding: 5px; left: 0;}
.menu-bar {position: absolute; width: 75px; border: 1px solid #ccc; padding: 5px; left: -90px;}
#menu:checked + .menu .menu-trigger {left: -90px;}
#menu:checked + .menu .menu-bar {left: 0;}

<input type="checkbox" id="menu" />
<div class="menu">
  <label for="menu" class="menu-trigger">Menu</label>
  <div class="menu-bar">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li>
        <label for="menu">Close</label>
      </li>
    </ul>
  </div>
</div>

Fiddle: http://output.jsbin.com/qeyocodepe

我想像本页上的那样制作半相同的手册 - 怎么做？

I want to make semi-identical manu like the one on this page - how?

javascript

css

navigation

jquery

drop-down-menu