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

Create an account or sign in to comment

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

×
×
  • Create New...