如何让菜单从底部按钮向上滑动而不是仅仅出现？ HTML/CSS/JS

Question

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>

Answer 1

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>

Answer 2

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