Question

我尝试做的事情与此类似：http://tympanus.net/Development/SelectInspiration/index2.html。我希望我的代码中的选项的不透明度能够毫无延迟地开始，因此它们似乎从相同的垂直行开始（如上例所示）。此外，我需要div BOTON像buttom一样工作，而不是在我的代码中工作的方式。谢谢你的帮助。

＆＃13;

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;
}

＆＃13;

	<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>

＆＃13;

此处的代码：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>

所以完整的解决方案是：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

过渡菜单＆＃34;点击＆＃34;使用CSS3

1 个答案:

CSS

HTML