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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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