I want a div element to come from bottom

Question

I want a div to be popup when click on that button. The div should appears from bottom to top and also it should not affect the overall page content. I set the button properties to fixed because it should. Please help to solve this problem. I will be so greatfull! Thank You!

$('#sec-menu').click(function() {
  $('.sec-menu-div').toggleClass("active");
});

.sec-menu {
  position: fixed;
  z-index: 777;
  width: auto;
  height: auto;
  bottom: 0;
  background-color: chartreuse;
  left: 50%;
  transform: translateX(-50%);
}

.sec-menu button {
  padding: 5px 50px;
}

.sec-menu-div {
  display: flex;
  justify-content: center;
  position: absolute;
  align-items: center;
  width: 50%;
  height: auto;
  padding: 20px;
  font-size: 20px;
  z-index: 777;
  color: white;
  background-color: darkgoldenrod;
  border-radius: 5px;
  transition: all 0.4s ease;
  transform: translateX(1000%);
}

.sec-menu-div.active {
  bottom: 29px;
  z-index: 777;
  position: fixed;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sec-menu">
  <button id="sec-menu">Menu</button>
  <div class="sec-menu-div">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente, eligendi.</p>
  </div>
</div>

Answer 1

To make the element appear from the bottom of the page instead of the right side, change translateX to translateY in both classes.

You will also need to amend the left position and width of the element to meet your exact use case - in this example I left it in the centre of the page.

$('#sec-menu').click(function() {
  $('.sec-menu-div').toggleClass("active");
});

.sec-menu {
  position: fixed;
  z-index: 777;
  width: auto;
  height: auto;
  bottom: 0;
  background-color: chartreuse;
  left: 50%;
  transform: translateX(-50%);
}

.sec-menu button {
  padding: 5px 50px;
}

.sec-menu-div {
  display: flex;
  justify-content: center;
  position: absolute;
  align-items: center;
  height: auto;
  padding: 20px;
  font-size: 20px;
  z-index: 777;
  color: white;
  background-color: darkgoldenrod;
  border-radius: 5px;
  transition: all 0.4s ease;
  transform: translateY(1000%);
}

.sec-menu-div.active {
  bottom: 29px;
  z-index: 777;
  position: fixed;
  transform: translateY(0px);
  transition: all 0.4s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sec-menu">
  <button id="sec-menu">Menu</button>
  <div class="sec-menu-div">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente, eligendi.</p>
  </div>
</div>