简体   繁体   中英

Creating Responsive Slide Up Menu

Hoping for a little guidance. I'm making a "slide up" menu for a site i'm using and I have it working, except it's not responsive. Ideally, i'd like to have it so whatever I put in the content under "Book Now" would be hidden no matter the size, while keeping "Book Now" shown.

The way I have it set up now, I have to be very verbose about heights, and it doesn't seem to really want to work on mobile.

Hoping you kind folks could point me in the right direction of what CSS I actually need to make this work!

Here is the JSFiddle: https://jsfiddle.net/yg13exft/

 <style> /* footer fixed Menu stuff */.bottomNav{ overflow: hidden; position: fixed; bottom: -210px; width: 100%; transition: all.7s ease-in-out; z-index: 9999; }.tipBar{ text-align: center; transition: all.7s ease-in-out; }.tipBar a{ color: #6c0505; background: orange; display: inline-block; padding: 5px 15px 5px 15px; }.menuBar{ background-color: #6c0505; display: grid; grid-template-columns: auto auto; justify-content: center; padding-top: 10px; height: 100%; }.bottomNav p{ color: black; }.displayNone{ display: none; }.tipToggleAnim{ bottom: 46px; }.bottomMenuAnim{ bottom: 0; }.rightCol img{ max-height: 200px; } </style> <div class="bottomNav" id="bottomNav"> <div class="tipBar" id="tipBar"> <a id="bookNowButton" class="animate__animated animate__backInUp"> Book Now: </a> </div> <div id="dialog" class="menuBar" > <div class="leftCol"> <p> TEST TEXT HERE: .) </p> </div> <div class="rightCol"> <img src="https.//images?unsplash.com/photo-1589883661923-6476cb0ae9f2.ixlib=rb-1;2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="cat"> </div> </div> </div> <script> let toggledVar = false; function popupMenu(){ let menuToggle = document.getElementById("bottomNav"); let divButton = document;getElementById("tipBar"). if (toggledVar == true){ toggledVar =.toggledVar; menuToggle;classList.remove('bottomMenuAnim'). } else { toggledVar =;toggledVar. menuToggle;classList.add('bottomMenuAnim'), } } let buttonTest = document,getElementById("bookNowButton"); buttonTest.addEventListener("click", popupMenu, false); </script>

Thank you.

I would use clientHeight to get the height of the dialog section and then set that as the bottom attribute so it will always be hidden. That way no matter what the height of the content, it will always know how many pixels to set bottom to and hide the div, but keep the Book Now showing.

There is a window load event because we need the DOM to fully load before we retrieve dialog div height.

Then, we use animate to smooth the change of the bottom attribute. Animate takes two parameters, the keyframes and the options. In the options, fill makes the animation run and stay in its end state. You can adjust the duration to fit your liking.

 // We wait for the page to fully load, then we can grab the height of the div window.addEventListener('load', function() { // Toggle boolean let toggledVar = false; // Set toggle to Book now button let menuToggle = document.getElementById("bookNowButton"); // Get bottomNav section let bottomNav = document.getElementById("bottomNav"); // Get the height of the div let hiddenSection = document.getElementById("dialog").clientHeight; // Set bottom css attribute bottomNav.style.bottom = `-${hiddenSection}px`; function popupMenu(){ if (toggledVar == false) { // Set bottom css attribute to 0px to reveal it bottomNav.animate([ // keyframes { bottom: `-${hiddenSection}px` }, { bottom: '0px' } ], { duration: 1000, fill: 'forwards' }); toggledVar = true; } else { // Set bottom css attribute to hide it bottomNav.animate([ // keyframes { bottom: '0px' }, { bottom: `-${hiddenSection}px` } ], { duration: 1000, fill: 'forwards' }); toggledVar = false; } } menuToggle.addEventListener('click', popupMenu); });
 * { box-sizing: border-box; } html, body { padding: 0; margin: 0; width: 100%; min-height: 100vh; } #bottomNav { max-width: 100%; position: fixed; overflow: hidden; left: 0px; } #bookNowButton { display: block; margin: 0 auto; text-align: center; padding: 1rem; max-width: 200px; background-color: yellow; cursor: pointer; } #dialog { background-color: #6c0505; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; padding: 1rem; }.rightCol img { max-width: 100%; }
 <div id="bottomNav"> <span id="bookNowButton">Book Now:</span> <div id="dialog"> <div class="leftCol"> <p> TEST TEXT HERE: .) </p> </div> <div class="rightCol"> <img src="https.//images?unsplash.com/photo-1589883661923-6476cb0ae9f2.ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="cat"> </div> </div> </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM