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

  • 1

Lets give this a try. Put the following in Design > Custom CSS.

/*

  begin mobile menu left flyout
  
  Version       : 0.3d1
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Notes         : uses LESS syntax
                  
                  the reveal menu items code supports up to 32 menu items in a
                  menu
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @flyout-transition-duration : 0.6s;
  
  /*
  
    should the menu close with the same effect or blink; it's gone?
    
    use false or true
    
    */
    
  @close-effect : true;
  
  // 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( 200% );
      
      }
      
    // 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, 3 );
    
    -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( -100% );
        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 - 1 );
      
      }
      
    .transition-delays ( @iterations );
    
    }
    
  // end mobile menu left flyout

Let us know how it goes.

Edited by creedon
version 0.3d1

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

Link to comment
  • 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.

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

Link to comment
  • 0

If I understand what you want correctly, you want the font size to be much smaller on the mobile menu?

On the spacing. You want there to be space at the right so that the menu does not cover up the page below? If I have that right, doing that might be difficult. The issue is that on the right side of your site there is a border of white. So making the mobile not take up the whole screen would just reveal white for the most part. Lets work on one issue at a time. Font size first!

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

Link to comment
  • 0

Here is a crack at the fonts. Add the following to Design > Custom CSS.

.header-menu .user-accounts-text-link {

  font-size: 16px;
  
  }

.header-menu-nav-folder-content {

  justify-content: unset;
  
  }

.header-menu-nav-item a {

  font-size: 14px;
  font-weight: 600;
  padding: 6px;
  
  }

You can play with the numbers.

Let us know how it goes.

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

Link to comment
  • 0
2 hours ago, inunzi said:

I’m very excited for the next step!

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.

Edited by creedon
version 2 of CSS

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

Link to comment
  • 0
On 9/25/2020 at 10:15 PM, inunzi said:

@creedon Do you know a fix to this?

If anyone found a fix for this I would be eternally grateful. My site is www.nuligoods.com. And thank you very much for the earlier code, working like a charm!

Link to comment
  • 0
On 3/2/2021 at 1:45 PM, Leah007 said:

If anyone found a fix for this I would be eternally grateful. My site is www.nuligoods.com. And thank you very much for the earlier code, working like a charm!

This will require a lot of code.

you can post on some FB groups
+ Squarespace Customization Resource Groups
+ Squarespace Community
+ Squarespace Entrepreneur
+ Squarespace Rockstars

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

I joined them all thank you for the recommendation!

And if anyone who is facing the same issue reads this, I ended up doing a workaround kind of cheat where I just reduced the width of the slide out menu so that it didn't get as far as my logo. Since my menu nav items are short titles anyways so they don't take up much vertical space it achieved the look I was going for without any further coding 🙂

image.thumb.png.aae627623a8099f9c273eb871ee8e133.png

Link to comment
  • 0
On 9/20/2020 at 4:31 AM, 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.

Hi! 

I really like the code. I was wondering how I can adjust it so it also slides back? It slides open when I click on the menu, but it does not slide back. 

Thanks!

Link to comment
  • 0
10 minutes ago, EliseSob said:

I was wondering how I can adjust it so it also slides back?

Please post the URL for the page on your site where you want this effect.

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 is not a security breach. Please read the documentation at the link provided to understand how it works.

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
14 minutes ago, creedon said:

Please post the URL for the page on your site where you want this effect.

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 is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Hi Creedon, 

Thank you for your quick response.

https://mandarin-violin-mjw7.squarespace.com/config/

password: elise

I also noted that the 'contact' button seems to slide from the left corner, whereas the text slides from the left. Is it possible to make the button also slide from the left?

Is it also possible to make the navigation titles on the mobile menu appear from top to bottom when the menu slides at the same time? 

Thanks in advance, 

Elise 

Link to comment
  • 0
4 hours ago, EliseSob said:

I was wondering how I can adjust it so it also slides back? It slides open when I click on the menu, but it does not slide back.

I have updated my September 16th code post.

You'll want to set @sweep-out to true.

3 hours ago, EliseSob said:

Is it also possible to make the navigation titles on the mobile menu appear from top to bottom when the menu slides at the same time?

Are you thinking some kind of progressive reveal effect where New Page would be seen first, then About and so on? I don't have an immediate thought on that one. If someone has that effect in their bag of tricks feel free to chime in!

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

Link to comment
  • 0
14 hours ago, creedon said:

I have updated my September 16th code post.

You'll want to set @sweep-out to true.

Are you thinking some kind of progressive reveal effect where New Page would be seen first, then About and so on? I don't have an immediate thought on that one. If someone has that effect in their bag of tricks feel free to chime in!

Dear Creedon, 

Thanks a lot! Exactly what I had in mind.

Is it maybe also possible to have the whole plane slide in? For example on squarespace.com when you click on the burger the menu slides in from the right like a square. Here you also see the reveal effect of the navigation titles that I had in mind.

Maybe @tuanphan has an idea in how to do make the mobile navigation titles reveal from top to bottom? 🙂 

 

Edited by Elise__
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...