CODEWITHSUNDEEP
javascripthtmljquerycssanimation
Cecilia
Cecilia

Reputation: 25

How do I get the menu to slide up from bottom button instead of just appearing? HTML/CSS/JS

I have tried many different ways to do it but the menu appears the exact same way each time. Things I´ve tried: height 0->20%, width 0->100%, jQuery, JavaScript, slideUp/Down, hide/Show, margin-bottom: -50%->0%, animate etc.

$(document).ready(function(){

  $("#settings-menu-btn").click(function(){
    $("#nav").slideDown(500);
  }); 

  //Hiding the menu
  $("#close-menu-btn").click(function(){
      $("#nav").slideUp("slow");
  }); 
});
.nav{
  display: none;
}

.menu {
  padding: 0 10% 10%;
  background-image: linear-gradient(to left, $accent-color, $dark-primary-color);
  background-image: -webkit-linear-gradient(to left, $accent-color, $dark-primary-color);
  border-radius: 5px 5px 0 0;  
  list-style-type: none;
  width: 100%;
  max-width: $max-width-menu;
  max-height: $max-height-menu;
  position: fixed;
  bottom: 0;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav" id="nav">
   <ul class="menu" id="menu">
      <li>menu item</li>
   </ul>
</div>

<div class="settings-menu-link">
  <img id="settings-menu-btn" src="settings-icon.png">
</div>

Upvotes: 0

Views: 2258

Answers (2)

Just Alex
Just Alex

Reputation: 457

I solved your issue, but let me just help you like this first.

You should almost never put your script tag before your HTML code, but always at the very bottom, before the body tag closes.

There are very few situations where you will have to load your script before the page has been fully loaded first. So try to avoid that.

Also, there is no reason to use a translate property on an element that has been positioned absolute/fixed. You can already move it with top, right, bottom, left.

Simply just give your navigation a negative value for top property, and then make a new class that will have top property equal to 0.

Then, on the click of your button, just toggle that class to navigation each time the button is clicked ! :)

Here is my solution to this, it will fix your issue :

https://codepen.io/Juka99/pen/WNGjNPG

Upvotes: 0

shotgun02
shotgun02

Reputation: 784

removed position and translate styling for menu and its working.

$(document).ready(function(){

  $("#settings-menu-btn").click(function(){
    $("#nav").slideDown(500);
  }); 

  //Hiding the menu
  $("#close-menu-btn").click(function(){
      $("#nav").slideUp("slow");
  }); 
});
.nav{
  display: none;
}

.menu {
  padding: 0 10% 10%;
  background-image: linear-gradient(to left, $accent-color, $dark-primary-color);
  background-image: -webkit-linear-gradient(to left, $accent-color, $dark-primary-color);
  border-radius: 5px 5px 0 0;  
  list-style-type: none;
  width: 100%;
  max-width: $max-width-menu;
  max-height: $max-height-menu;
 /* position: fixed;*/
  bottom: 0;
  z-index: 10;
  left: 50%;
  background: #ff8a009e;
/*  transform: translateX(-50%);*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="settings-menu-link">
  <img id="settings-menu-btn" src="https://img.icons8.com/ios/452/settings.png" style="width:20px;">
</div>

<div class="nav" id="nav">
   <ul class="menu" id="menu">
      <li>menu item</li>
   </ul>
   <button id="close-menu-btn">close</button>
</div>

Upvotes: 1

Related Questions