我想知道是否有一种简单的方法可以让我的菜单淡出，因为我已经想出了如何让它淡入。
最好是 CSS。
我正在使用使用 :active 来触发菜单的转换技巧。任何关于代码的建议也将受到欢迎:)
jsfiddle：http: //jsfiddle.net/VFykd/2/
HTML
<label for=checkme class=menu-button>
<div class="responsive-icon">
Trigger
</div>
</label>
<input id=checkme type=checkbox hidden>
<div class="menu">
<div class="container">
<ul>
<li>
<label for=checkme class=close-button>
<strong>X</strong></a>
</label>
<input id=checkme type=checkbox hidden></label>
</li>
<li><a href="#home" >Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#work">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
CSS
.menu {
opacity:0;
position:fixed;
}
.close-button {
position:absolute;
right:20px;
}
.menu strong {
color:#258ace;
font-size:20px;
}
.menu a {
color:#999;
font-weight:300;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.menu a:hover {
color:#258ace;
font-weight:300;
text-decoration:none;
}
input:checked ~ .menu {
opacity:1;
display:inline-block;
position:fixed;
bottom:0;
left:0;
background:#222;
padding:20px 0 20px 0;
margin:0 auto;
width:100%;
z-index:999;
text-transform:uppercase;
text-align:center;
font-size:20px;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
-ms-transition: opacity 0.5s ease-in;
transition: opacity 0.5s ease-in;
}
input:checked ~ .menu a {
opacity:1;
display:inline-block;
}
.menu-button {
position:fixed;
top:20px;
z-index:999;
width:100%;
text-align:center;
}
.menu ul {
list-style:none;
display:inline;
margin:0;
}
.menu li {
list-style:none;
display:inline;
margin:0;
margin: 0 5px 0 5px;
}