我想做一份半相同的手册，就像这页上的一样

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

本文关键字：一样 一份      更新时间：2023-09-26

我想做一个类似于本页的菜单。

当我将鼠标悬停在HOME上时，HOME向右移动(如何做到这一点)并且整个子菜单通过动画显示。当我看开发工具，我不能确定是否这个菜单是在CSS或javascript只。有人能简单解释一下如何制作这样的手册，例如，如果它是jquery或javascript在哪里找到库。

你甚至可以使用纯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>

小提琴:http://output.jsbin.com/qeyocodepe

相关文章：