Having the mobile menu slide in on the left side of my site.

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;}}

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.

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. 

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.

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

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.

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;
  
  }

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.

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

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!

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?

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!

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

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!

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.

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