Elise__ Posted July 16, 2021 Share Posted July 16, 2021 17 hours ago, creedon said: @Elise__ I have updated my September 16th code post again. Added a menu items reveal effect. The example from SS got the old brain juices flowing. Let us know how it goes. It works! Thanks! 🙂 I would only like to 'soften' the effect a bit. I have tried doing this by including a 'fade' animation. I have inserted this under the 'reveal menu items' section. However, now the fade animation is applied to all the navigation links as a whole, whereas I would like the navigation titles to fade-in one by one as they appear. Do you have a suggestion where I should include the animation to address the navigation titles individually? // reveal menu items .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) { @iterations : 32; .header-menu-nav-item { visibility : hidden; } .header--menu-open .header-menu-nav-item { visibility : visible; animation: fadeIn ease 5s; -webkit-animation: fadeIn ease 5s; .fade-in { animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 10s; -moz-animation: fadeIn ease 10s; -o-animation: fadeIn ease 10s; -ms-animation: fadeIn ease 10s; } @keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}} @-moz-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}} @-webkit-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}} @-o-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}} @-ms-keyframes fadeIn {0% { opacity:0;}100% {opacity:1;}}  Link to comment
creedon Posted July 16, 2021 Share Posted July 16, 2021 3 hours ago, Elise__ said: I would only like to 'soften' the effect a bit. I have tried doing this by including a 'fade' animation. I think you can do this without the animation code. Add the following after my code. .header-menu-nav-item { opacity : 0; -webkit-transition-property : opacity; -o-transition-property : opacity; transition-property : opacity; visibility : initial; will-change : opacity; } .header--menu-open .header-menu-nav-item { opacity : 1; -webkit-transition-duration : 3s; -o-transition-duration : 3s; transition-duration : 3s; -webkit-transition-timing-function : ease-out; -o-transition-timing-function : ease-out; transition-timing-function : ease-out; visibility : initial; } Basically this overrides my visibility reveal code and uses an opacity change instead. Let us know how it goes. Elise__ 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Elise__ Posted July 16, 2021 Share Posted July 16, 2021 1 hour ago, creedon said: I think you can do this without the animation code. Add the following after my code. .header-menu-nav-item { opacity : 0; -webkit-transition-property : opacity; -o-transition-property : opacity; transition-property : opacity; visibility : initial; will-change : opacity; } .header--menu-open .header-menu-nav-item { opacity : 1; -webkit-transition-duration : 3s; -o-transition-duration : 3s; transition-duration : 3s; -webkit-transition-timing-function : ease-out; -o-transition-timing-function : ease-out; transition-timing-function : ease-out; visibility : initial; } Basically this overrides my visibility reveal code and uses an opacity change instead. Let us know how it goes. Dear Creedon, Thank you for this addition. I am very happy with the result, thank you for your help.  Link to comment
creedon Posted July 17, 2021 Share Posted July 17, 2021 I have updated my September 16th code post yet again. I reworked the code to hopefully be more performant on mobile. I also changed the code so that the reveal menu items code can be run without applying a visible effect. That provides a way for others to add their own custom effects for reveal menu items, as Elise_ needed. I changed the default built-in reveal menu items effect to have the menu items flyout as well as the whole menu. Leesh 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Leesh Posted March 6, 2022 Share Posted March 6, 2022 Quote  Hi creedon, May I ask if my menu is on the right side how do I change your code for the closing(slide back) effect? Thank you, Leesh Link to comment
creedon Posted March 6, 2022 Share Posted March 6, 2022 3 hours ago, Leesh said: May I ask if my menu is on the right side how do I change your code for the closing(slide back) effect? Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Leesh Posted March 7, 2022 Share Posted March 7, 2022 Quote  Hi creedon, My website URL: on7studio.squarespace.com My website PW: 1500Broadway Thanks for the reply, I copy pasted your previous code in to my site but it seems only the reveal/slide out effect works fine for the hamburger menu which on the right, the close effect has some error which now I change it as "false" to disabled. Please check the code below. Thank you /* Hamburger transition */ @flyout-transition-duration : 0.6s; /* should the menu close with the same effect or blink; it's gone? use false or true */ @close-effect : false; // make close effect a little shorter than open @close-duration-shorten-by : 0.2s; /* reveal menu item by itself shows no visible effect. you have to use either a built-in reveal menu item effect or write a custom CSS effect */ @reveal-menu-items : false; // begin ignored if @reveal-menu-items is false @reveal-menu-items-delay-step : 0.03s; @reveal-menu-items-effect-flyout : false; // end ignored if @reveal-menu-items is false // do not change anything below, there be the borg here // begin unset SS built-in menu effect @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { .header-menu { opacity : unset; -webkit-transition : unset; -o-transition : unset; transition : unset; visibility : unset; } } .header--menu-open .header-menu .header-menu-cta, .header-menu, .header-menu-cta, .header-menu-nav-item a, .header-menu-nav-list { opacity : unset; -webkit-transform : unset; -ms-transform : unset; transform : unset; -webkit-transition : unset; -o-transition : unset; transition : unset; visibility : unset; will-change : unset; } /* end unset SS built-in menu effect */ // begin move menu off screen .header-menu { transition-property : transform; transform : translateX( 100% ); will-change : transform; .close-effect ( @flyout-transition-duration, @close-duration-shorten-by ); } .header-menu-nav-folder { transform : translateX( 1 ); } // end move menu off screen // begin move menu on screen .header--menu-open .header-menu { @duration : @flyout-transition-duration; -webkit-transition-duration : @duration; -o-transition-duration : @duration; transition-duration : @duration; transition-timing-function : ease-out; transform : translateX( 0 ); } .header-menu-nav-folder--active { transform : unset; } // end move menu on screen // close menu effect, optional .close-effect ( @duration, @offset ) when ( @close-effect = true ) { @d : round( @duration - @offset, 10% ); -webkit-transition-duration : @d; -o-transition-duration : @d; transition-duration : @d; transition-timing-function : ease-in; } .reveal-menu-items ( @flyout-transition-duration, @reveal-menu-items-delay-step ); // reveal menu items .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) { .reveal-menu-items-effect-flyout ( @flyout-transition-duration ); // reveal menu items effect flyout .reveal-menu-items-effect-flyout ( @duration ) when ( @reveal-menu-items-effect-flyout = true ) { // @reveal-menu-items = true, .header-menu-nav-item { transform : translateX( 30% ); transition-duration : @duration; } .header--menu-open .header-menu-nav-item { transform : translateX( 0 ); } } @iterations : 32; .transition-delays ( @i ) when ( @i > 0 ) { .header-menu-nav-item:nth-child( @{i} ) { @d : round( @i * @step + ( @start / 2 ), 3 ); transition-delay : @d; } .transition-delays ( @i - 3 ); } .transition-delays ( @iterations ); } // end mobile menu left flyout /* soften reveal effect in hamburger */ .header-menu-nav-item { opacity : 0; -webkit-transition-property : opacity; -o-transition-property : opacity; transition-property : opacity; visibility : initial; will-change : opacity; } .header--menu-open .header-menu-nav-item { opacity : 1; -webkit-transition-duration : 0.5s; -o-transition-duration : 0.5s; transition-duration : 0.6s; -webkit-transition-timing-function : ease-out; -o-transition-timing-function : ease-out; transition-timing-function : ease-out; visibility : initial; }  Link to comment
creedon Posted March 7, 2022 Share Posted March 7, 2022 2 hours ago, Leesh said: the close effect has some error Is it showing visual oddities because it wasn't designed to flyout from the right. Part of the visual issue you were seeing was because you manipulated the left margin of a container in the menu open state but didn't also do the same for the closed state. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted March 7, 2022 Share Posted March 7, 2022 I have updated my cited code in my September 16th post. From the changes log. converted a bunch of repeated value/property pairs into mixin utilities for easier maintenance added some vendor prefixes added support for flyout from right Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Valisco Posted April 30, 2023 Share Posted April 30, 2023 On 9/19/2020 at 10:31 PM, creedon said: As a starting point add the following to your CSS. .header-menu.header-menu--folder-list { width: 85%; } .header-menu-nav-folder { overflow-y: hidden; } .header-menu-nav-folder:not( .header-menu-nav-folder--active ) { -webkit-transform: translatex( 75% ); -ms-transform: translatex( 75% ); transform: translatex( 75% ); visibility: hidden; } @media screen and (max-width: 767px ) { .header-menu.header-menu--folder-list { width: 75%; } .header-menu-nav-folder:not( .header-menu-nav-folder--active ) { -webkit-transform: translatex( 65% ); -ms-transform: translatex( 65% ); transform: translatex( 65% ); visibility: hidden; } } This is for a 7.1 site. Let us know how it goes. Jumping in here! https://www.valiscosupply.com How can this code be changed to have the menu be on the right side instead of the left? (In the picture added, positioned where the blue box is.) Thank you! Link to comment
tuanphan Posted May 1, 2023 Share Posted May 1, 2023 On 4/30/2023 at 10:30 AM, Valisco said: Jumping in here! https://www.valiscosupply.com How can this code be changed to have the menu be on the right side instead of the left? (In the picture added, positioned where the blue box is.) Thank you! I see you figured it out? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Valisco Posted May 1, 2023 Share Posted May 1, 2023 11 hours ago, tuanphan said: I see you figured it out? Maybe. I went a little different direction with the menu (having the folders open down instead of sliding across the screen), which made this work better. Not sure if it's the best solution though? Let me know if there's a better way! I used the following: .header-menu.header-menu--folder-list { Â Â width: 13.5em; Â Â margin-left: auto;Â Â Â } A follow up question that might impact the above - the only way to close the menu now is by clicking the "x". Is there a way to allow it to close if the user clicks in the blank space to the left (area in pink)? Not essential, but would like to include this function if possible! Thank you! Link to comment
tuanphan Posted May 4, 2023 Share Posted May 4, 2023 (edited) On 5/2/2023 at 2:34 AM, Valisco said: Maybe. I went a little different direction with the menu (having the folders open down instead of sliding across the screen), which made this work better. Not sure if it's the best solution though? Let me know if there's a better way! I used the following: .header-menu.header-menu--folder-list {   width: 13.5em;   margin-left: auto;   } A follow up question that might impact the above - the only way to close the menu now is by clicking the "x". Is there a way to allow it to close if the user clicks in the blank space to the left (area in pink)? Not essential, but would like to include this function if possible! Thank you! You can also use this code .header-menu { left: unset !important; width: 75% !important; } With close menu, use this code https://github.com/tomsWebConsulting/twcscb/blob/main/v7.1/close forced mobile menu on desktop when clicking outside of menu.html Edited May 5, 2023 by tuanphan Valisco 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Valisco Posted May 4, 2023 Share Posted May 4, 2023 11 hours ago, tuanphan said: You can also use this code .header-menu { left: unset !important; width: 75% !important; } With close menu, add this code to Last Line in Code Injection > Footer <script> $( ( ) => { /* begin close forced mobile menu on desktop when clicking outside of menu Version : 0.3d0 SS Version : 7.1 Dependancies : jQuery By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ // do not change anything below, there be the borg here // bail if no mutation observer available if ( ! ( 'MutationObserver' in window ) ) return; const $burgerButton = $( '.header-burger-btn:first' ); const $btn = $( '<div id="twc-burger-close-button" style="' + 'bottom : 0; display : none; left : 0; right : 0; top : 0; ' + 'position : fixed; z-index : 9">' ) .click ( function ( ) { $burgerButton.click ( ); } ) .appendTo ( 'body' ); let isHeaderMenuOpen = false; $( window ).resize ( function ( ) { let display = 'none'; if ( isHeaderMenuOpen ) { const left = $( '.header-menu' ) .offset ( ) .left; const width = $( '.header-menu' ).width ( ); const side = left ? 'right' : 'left'; $btn.css ( side, width ); display = 'block'; } $btn.css ( 'display', display ); } ); const observer = new MutationObserver ( function ( mutations ) { $.each ( mutations, function ( ) { // bail if not class attribute if ( this.attributeName != 'class' ) return; const $e = $( this.target ); isHeaderMenuOpen = $e.hasClass ( 'header--menu-open' ); $( window ).resize ( ); } ); } ); // start listening for changes in specified element observer.observe ( $( 'body' ).get ( 0 ), { attributes : true } ); } ); </script> Â This worked perfectly!! Thank you! Link to comment
tuanphan Posted May 5, 2023 Share Posted May 5, 2023 3 hours ago, Valisco said: This worked perfectly!! Thank you! Just update a bit in the code. If you have problem in the future, you can read my comment again. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
robfeltrin Posted November 11, 2023 Share Posted November 11, 2023 On 9/17/2020 at 4:55 AM, creedon said: Please see Mobile Menu Flyout. Let us know how it goes. I have used this and it works great! The only thing is: I'm trying to make the menu items to appear side-by-side in a row instead of a column, and to fly out from behind the burger icon (which I have replaced for the word Menu - would be great if I could have both Menu and the burger icon side by side at the same time...) https://violin-halibut-2csa.squarespace.com/ mmmarchitects  Any way I can achieve this? I have tried everything but nothing works  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