Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


inunzi

Question

Hello. I was wondering if it is possible to have a mobile menu slide in on the left side of my site when someone clicks/taps on the hamburger menu button. I have a video down below to show a better example of what I have in mind. If anyone knows how to do this please reply to my message and let me know how to do it. Thanks!

Link to comment

Recommended Posts

  • 0
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
  • 0
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
  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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 best , and see my profile. Thanks for your support!

Link to comment
  • 0
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
  • 0
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 best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...