I have attempted numerous methods, but the menu keeps showing up in the same way every time. I've experimented with changing the height from 0 to 20%, width from 0 to 100%, using jQuery, JavaScript, slideUp/Down, hide/Show, adjusting margin-bottom from -50% to 0%, and employing animate, among other things.
$(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>