使用 CSS3 的过渡菜单 "on click"

Question

我想做的是类似这样的事情：http://tympanus.net/Development/SelectInspiration/index2.html。我希望我的代码中选项的不透明度立即开始，因此看起来它们似乎从同一垂直线开始（如上例）。另外，我需要 div BOTON 像按钮一样工作，而不是我的代码中的工作方式。感谢您的帮助。

a {
 font-size: 24px;
 font-family: "helvetica" sans-serif;
 font-weight: 900;
 color: black;
 text-decoration: none;
} 

.lista {
 font-size: 18px;
 font-family: "helvetica" sans-serif;
 font-weight: 600
} 

ul {
 list-style: none;
}

li.option {
 position: relative;
 height: 30px;
 width: 300px;
 border-bottom: 3px black solid;
 line-height: 30px;     /*line-height centra el texto verticalmente cuando coincide con el height*/
 opacity: 0;
 left: 150px;
 transition: .3s;
}

li.option:nth-child(1) {
 transition-delay: .0s;
}
li.option:nth-child(2) {
 transition-delay: .05s;
}
li.option:nth-child(3) {
 transition-delay: .1s;
}
li.option:nth-child(4) {
 transition-delay: .15s;
}
li.option:nth-child(5) {
 transition-delay: .2s;
}

.boton:active + .menu .lista .option {
 opacity: 1;
 left: 0px;
}

 <body>
  <div id="navbar">
   <div class="boton">
    BOTON
   </div>
   <div class="menu">
    <ul class="lista">
     <li class="option">OPCION 1</li>
     <li class="option">OPCION 2</li>
     <li class="option">OPCION 3</li>
     <li class="option">OPCION 4</li>
     <li class="option">OPCION 5</li>
    </ul>
   </div>
  </div>
 </body>

代码笔在这里：http://codepen.io/anon/pen/xbMQGR

Answer 1

一个简单的方法是使用 checkbox 和 label（通过 id 和 for 关联在一起）。您可以隐藏复选框，这样用户就不会看到它，然后使用标签允许复选框在单击时被选中和取消选中。

因此将添加以下 CSS 并稍微修改 HTML：

CSS

#activate-menu {
  display:none;
}

#activate-menu + label {
  cursor: pointer;
}

HTML

<div id="navbar">
    <input type="checkbox" name="activate-menu" id="activate-menu" />
    <label for="activate-menu">BOTON</label>
    <div class="menu">
        ....
    </div>
</div>

所以完整的解决方案是：

a {
 font-size: 24px;
 font-family: "helvetica" sans-serif;
 font-weight: 900;
 color: black;
 text-decoration: none;
} 

.lista {
 font-size: 18px;
 font-family: "helvetica" sans-serif;
 font-weight: 600
} 

ul {
 list-style: none;
}

li.option {
 position: relative;
 height: 30px;
 width: 300px;
 border-bottom: 3px black solid;
 line-height: 30px;     /*line-height centra el texto verticalmente cuando coincide con el height*/
 opacity: 0;
 left: 150px;
 transition: .3s;
}

li.option:nth-child(1) {
 transition-delay: .0s;
}
li.option:nth-child(2) {
 transition-delay: .05s;
}
li.option:nth-child(3) {
 transition-delay: .1s;
}
li.option:nth-child(4) {
 transition-delay: .15s;
}
li.option:nth-child(5) {
 transition-delay: .2s;
}

#activate-menu {
  display:none;
}

#activate-menu + label {
  cursor: pointer;
}

#activate-menu:checked ~ .menu .lista .option {
 opacity: 1;
 left: 0px;
}

<div id="navbar">
  <input type="checkbox" name="activate-menu" id="activate-menu" />
  <label for="activate-menu">BOTON</label>
  <div class="menu">
    <ul class="lista">
   <li class="option">OPCION 1</li>
   <li class="option">OPCION 2</li>
   <li class="option">OPCION 3</li>
   <li class="option">OPCION 4</li>
   <li class="option">OPCION 5</li>
    </ul>
  </div>
</div>

使用 CSS3 的过渡菜单 "on click"

Transition menu "on click" using CSS3

css

transition

menu

CSS

HTML