Alexander Edwards Alexander Edwards - 10 months ago 47
CSS Question

Getting overlay to expand upwards

In this simple W3Schools example the overlay starts from the top of the page and expands to the bottom. How could I achieve the result of getting it to expand starting from the bottom of the page and then expanding to the top?

CSS

/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 0;
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


JAVASCRIPT

/* Open */
function openNav() {
document.getElementById("myNav").style.height = "100%";
}

/* Close */
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}


HTML

<body>
<!-- The overlay -->
<div id="myNav" class="overlay">

<!-- Button to close the overlay navigation -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<!-- Overlay content -->
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

</div>

<!-- Use any element to open/show the overlay navigation menu -->
<span onclick="openNav()">open</span>
</body>

Answer Source

replace bottom:0 with top:0

<html><head>
  <style type="text/css">
    
/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) 

*/    
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    bottom: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down 

the overlay (height or width, depending on reveal) */
}
  </style>

  <title></title>

  
    




<script type="text/javascript">

/* Open */
function openNav() {
    document.getElementById("myNav").style.height = "100%";
}

/* Close */
function closeNav() {
    document.getElementById("myNav").style.height = "0%";
}
</script>

  
</head>

<body>
  
  




</body>
<body>
<!-- The overlay -->
<div id="myNav" class="overlay">

  <!-- Button to close the overlay navigation -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>

</div>

<!-- Use any element to open/show the overlay navigation menu -->
<span onclick="openNav()">open</span>
</body>
</html>