html - 如何使 URL 事件并可选择？

Question

我在 this CodePen 上使用以下 CSS 代码:

#burgerMenu {
     position: absolute;
     display: block;
     top: 52px;
     left: 0;
     width: 100%;
     max-width: 450px;
     color: #fff;
     background: #2a2e2f;
     z-index: 999;
     transition: transform .5s cubic-bezier(0, 1, 0, 1);

     -webkit-transform: translateY(-100%);
             transform: translateY(-100%);
 }

 #burgerMenu ul {
     margin: 5px;
     padding-left: 0;
     list-style: none;
     text-align: left;
     font-family: "Helvetica", sans-serif;
     font-size: 14px;
     font-weight: 400;
 }

 #burgerMenu > ul > li {
     display: block;
     margin: 0 10px;
     padding: 4px 0;
     border-bottom: 1px solid #444748;
     font-size: 14px;
     line-height: 1.5rem;
     text-transform: uppercase;
 }

如何在选中时激活 URL？

我尝试了几种 :active 的变体，但都没有成功。

URL 在 mouseover 上正确回显。我只是无法触发选择。

Answer 1

问题是您正在使用 :focus 伪类打开菜单。但是，当您单击菜单内的链接时，菜单按钮失去焦点。没有焦点，:focus 规则不适用并且菜单关闭。

所以 :active 对菜单内的链接有效，但是只要用户点击一个链接，菜单本身就会关闭，所以你不会得到看到它的工作。

在我看来，您现在有两个选择:

1. 使用 JavaScript 打开菜单，因此您不依赖于按钮的焦点。

2. 使用 The Checkbox Hack ，这是一种仅使用 CSS 的方法(比 JS 选项稍微复杂一些，也不推荐使用)。

您可以在这两个选项中随意使用 :active。