Fade out when div appears from Transition :active Hack?

Question

I was wondering if there was a simple way of making my menu fade out as I've already figured out how to make it fade in.

Preferably CSS.

I'm using the transition hack that uses :active to trigger the menu. Any suggestions on the code would be welcome too :)

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

There are interesting things about using transitions with the display property in this thread : http://stackoverflow.com/questions/3331353/transitions-on-the-display-property — Romain Braun, Nov 06 '13 at 10:25
It is just a quick guess, but try setting `opacity: 0;` in `.menu` and `opacity: 1;` in `input:checked ~ .menu` — r4vn, Nov 06 '13 at 10:35

score 0 · Answer 1 · answered Nov 06 '13 at 12:07

I figured it out. Updated on Jsfiddle:

http://jsfiddle.net/VFykd/3/

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

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

Fade out when div appears from Transition :active Hack?

1 Answers1