teelou teelou -4 years ago 94
CSS Question

Foundation - fade out an overlay that was faded in previously?

I manage to fade in an overlay when the button is clicked:



$(".button-toggle-overlay-menu").on("click", function() {
$("#menu").toggleClass("is-open");
});

/*
Overlay menu
http://zurb.com/old-bbs/overlay-navigation-menu
*/

.button-toggle-overlay-menu {
position: relative;
font-size: 4rem;
z-index: 5000;
color: #333;
top: -0.5rem;
left: 1.5rem;
transition: all 0.4s ease-in-out;
}

.button-toggle-overlay-menu:hover {
transition: all 0.4s ease-in-out;
color: gray;
}

.overlay-menu {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 20px;
list-style: none;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, .9);
display: none;
text-align: center;
animation: fadeOut 1s;
}

@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

.overlay-menu li {
display: block;
}

.overlay-menu a {
display: inline-block;
color: #000;
padding: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
text-decoration: none;
}

.overlay-menu a:hover {
color: #808080;
}

.overlay-menu.is-open~.button-toggle-overlay-menu {
display: inline-block;
transition: all 0.4s ease-in-out;
transform: rotate(135deg);
color: #000;
}

.is-open {
display: block;
/*
Fade in the overlay
http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load
*/
-webkit-animation: fadein 1s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s;
/* Firefox < 16 */
-ms-animation: fadein 1s;
/* Internet Explorer */
-o-animation: fadein 1s;
/* Opera < 12.1 */
animation: fadein 1s;
}

@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}


/* Firefox < 16 */

@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}


/* Internet Explorer */

@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}


/* Opera < 12.1 */

@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">

<nav role="navigation">
<ul id="menu" class="overlay-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a class="button-toggle-overlay-menu" href="#menu"><i class="fi-plus"></i></a>
</nav>

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
<a href="#">One</a>
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>

<h1>Hello, world!</h1>





But I want to fade the overlay out when the button is clicked to close. I am not sure how to do it. Any ideas?

Answer Source

The only way you can do it in pure CSS is to transition/animate opacity because you can't transition display. And I would use transition instead of animate - it's easier and shorter.

$(".button-toggle-overlay-menu").on("click", function() {
  $("#menu").toggleClass("is-open");
});
/* 
    Overlay menu
    http://zurb.com/old-bbs/overlay-navigation-menu 
    */

.button-toggle-overlay-menu {
  position: relative;
  font-size: 4rem;
  z-index: 5000;
  color: #333;
  top: -0.5rem;
  left: 1.5rem;
  transition: all 0.4s ease-in-out;
}

.button-toggle-overlay-menu:hover {
  transition: all 0.4s ease-in-out;
  color: gray;
}

.overlay-menu {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px;
  list-style: none;
  opacity: 0;
  transition: opacity 1s;
  background: rgb(255, 255, 255);
  /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255, .9);
  text-align: center;
}

.overlay-menu li {
  display: block;
}

.overlay-menu a {
  display: inline-block;
  color: #000;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

.overlay-menu a:hover {
  color: #808080;
}

.overlay-menu.is-open~.button-toggle-overlay-menu {
  display: inline-block;
  transition: all 0.4s ease-in-out;
  transform: rotate(135deg);
  color: #000;
}

.is-open {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">

<nav role="navigation">
  <ul id="menu" class="overlay-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <a class="button-toggle-overlay-menu" href="#menu"><i class="fi-plus"></i></a>
</nav>

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

<h1>Hello, world!</h1>

To continue to use CSS to do the opacity transition, you can add an event listener on transitionend to set display: none after the element fades to opacity: 0. Then remove that display property before adding the class to change back to opacity: 1

$(".button-toggle-overlay-menu").on("click", function() {
  var $menu = $("#menu");
  if ($menu.hasClass("is-open")) {
    $menu.one("transitionend", function() {
      $(this).addClass('hidden');
    }).removeClass('is-open');
  } else {
    $menu.removeClass('hidden');
    setTimeout(function() {
      $menu.addClass("is-open");
    })
  }
});
/* 
    Overlay menu
    http://zurb.com/old-bbs/overlay-navigation-menu 
    */

.button-toggle-overlay-menu {
  position: relative;
  font-size: 4rem;
  z-index: 5000;
  color: #333;
  top: -0.5rem;
  left: 1.5rem;
  transition: all 0.4s ease-in-out;
}

.button-toggle-overlay-menu:hover {
  transition: all 0.4s ease-in-out;
  color: gray;
}

.overlay-menu {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px;
  list-style: none;
  opacity: 0;
  transition: opacity 1s;
  background: rgb(255, 255, 255);
  /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255, .9);
  text-align: center;
}

.overlay-menu li {
  display: block;
}

.overlay-menu a {
  display: inline-block;
  color: #000;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

.overlay-menu a:hover {
  color: #808080;
}

.overlay-menu.is-open~.button-toggle-overlay-menu {
  display: inline-block;
  transition: all 0.4s ease-in-out;
  transform: rotate(135deg);
  color: #000;
}

.hidden {
  display: none;
}

.is-open {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">

<nav role="navigation">
  <ul id="menu" class="overlay-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <a class="button-toggle-overlay-menu" href="#menu"><i class="fi-plus"></i></a>
</nav>

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

<h1>Hello, world!</h1>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download