pro Posted January 4, 2022 Share Posted January 4, 2022 (edited) I have one specific example that I would like to achieve for my website. Take a look at https://apple.com on mobile, and try opening and closing their menu. Notice how it slides down and up smoothly. Is there any way to achieve something similar on 7.1? I've attached a screen recording of Apple's mobile navigation in action: Screen Recording 2022-01-04 at 16.44.06.mov Edited January 4, 2022 by sqsp Beyondspace 1 Link to comment
Beyondspace Posted January 5, 2022 Share Posted January 5, 2022 17 hours ago, sqsp said: I have one specific example that I would like to achieve for my website. Take a look at https://apple.com on mobile, and try opening and closing their menu. Notice how it slides down and up smoothly. Is there any way to achieve something similar on 7.1? I've attached a screen recording of Apple's mobile navigation in action: Screen Recording 2022-01-04 at 16.44.06.mov 2.14 MB · 1 download Try [data-section-id="overlay-nav"] { height: 0px; visibility: unset; -webkit-transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1), height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1); transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1); } .header--menu-open [data-section-id="overlay-nav"] { height: 100%; } Let me know how it works on your site Support me by pressing 👍 if this useful for you pro and CraigN 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
pro Posted January 5, 2022 Author Share Posted January 5, 2022 (edited) 4 hours ago, bangank36 said: Try [data-section-id="overlay-nav"] { height: 0px; visibility: unset; -webkit-transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1), height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1); transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1); } .header--menu-open [data-section-id="overlay-nav"] { height: 100%; } Let me know how it works on your site Support me by pressing 👍 if this useful for you Thank you, BaNgan! This is a great start. I think the animation of menu closing and menu items still needs work. I'll play with your code and see how I can improve it. There is a great website called SquareRefresh.com (built on 7.1), and their mobile menu behaves just like Apple's. I wish Squarespace gave us more options to customize our menu designs and animations. Hopefully in the future. Edited January 5, 2022 by sqsp Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment