Can anyone explain the steps to creating a slide out hamburger menu please

vivame
Explorer
73 0 7

Hi, if there are any devs out there feeling charitable I need some help creating a slide out hamburger menu.

I have tried building a menu as a section and hiding it to the left of the view port, and then translating it into view upon pressing the hamburger link. But I can't figure out how to use the hamburger icon to activate the menu or where to actually place the menu section. Does the section go in the header? And how do I move the body to the right when the menu is open?

I am trying to achieve a slide out menu like this: https://thesolarvibe.com/

Any instructions or help on how to do so would be hugely appreciated : )

0 Likes
David_Weru
Trailblazer
129 9 21

Hello @vivame,

 

The menu itself can be an array.

You would go through the array and enter a <div> for each menu item.

All these options would be inside a menu div.

-The sliding out part-

Position and width.

The body would be positioned at 20% from the left and have a width of 80%

The menu would be positioned at 0% from the left and have a width of 20%

When the burger icon is clicked, the body and the menu would assume the above dimensions.

When the menu is closed, the body would be located at 0% and have a width of 100%, and the menu would be marked as hidden.

 

The transition (sliding) is all done by a css option  from one position to the final position

https://www.w3schools.com/css/css3_animations.asp

0 Likes
vivame
Explorer
73 0 7

Hi, thanks for your response, I have watched countless videos and read countless articles on it, but it seems to be beyond my mental bandwidth to figure out where to place the menu and how to change the function of the hamburger - which is currently activating a drop down which looks terrible. I need step by step instructions ideally. I can take care of the CSS it's just the placement of the menu and the activating the transition with the hamburger that is to be honest, beyond me completely. Do you mind giving me more of a step by step guide as to how I can do this?

0 Likes
David_Weru
Trailblazer
129 9 21

Hello, @vivame 

 

Shopify themes do have a lot of code.

 

If you have an ide, this is basically what you have to do.

 

1  Open your store on a browser and open the inspect element window.

2: Select that element on the screen and have a look at the code.

 

3: There are class names which go with that element.  (classname= "bla bla2 bla3 ect")

 

4: go in your ide and look for that phrase (find function)

 

5: There will be multiple files connected to that term.

 

6: There will be js code calling those objects.  In jquery they look something like this $(".bla")...

 

7: you will need to find the js event listeners listening for clicks or if you're lucky, just the css with that classname (has a dot -> .bla) -basically what you searched for.

 

8:  From there you can make appropriate edits.

 

If you don't have one already (ide) look up vs code and on youtube lookup how to use vs code with shopify.

 

There are other ides, but this one's free and will do the above.

0 Likes
vivame
Explorer
73 0 7

I am using turbo theme with a custom mobile header, the problem is that it uses the mobile dropdown nav on desktop which doesn't look great. The other problem is when I try and apply CSS to the dropdown, it also effects the search dropdown as they both use div class .dropdown and I can't seem to find a way to style the dropdown for just the mobile menu. If there is a way I can style the current dropdown to look and function well then ideally I won't have to create a new menu, because to be honest with you, I am ok with a bit of CSS and building a simple section, but everything you just said to me went right over my head! I will PM you my URL if you can kindly take a look for me?

0 Likes
David_Weru
Trailblazer
129 9 21

Hello @vivame 

I'll look into it.

 

0 Likes
vivame
Explorer
73 0 7

Thank you so much, I appreciate it

0 Likes
David_Weru
Trailblazer
129 9 21

{please delete post}

0 Likes
vivame
Explorer
73 0 7

I tried this but it hasn't worked, the menu just disappears, have I placed it correctly?

$(".dropdown_container").each(
   function(index){
   if($(this).attr("data-dropdown")=="mobile_menu")
   {    position: fixed;
    display: block;
    height: 100vh;
    width: 300px;
    top: 0;
    z-index: 1;
  }
0 Likes
David_Weru
Trailblazer
129 9 21
$(".dropdown_container").each(
   function(index){
   if($(this).attr("data-dropdown")=="mobile_menu")
   {
    
     var styles={"position": "fixed",
                  "display": "block",
                  "height": "100vh",
                  "width": "300px",
                  "top": "0",
                  "z-index": "1"};

     //add mobile menu css only here..

     $(this).css(styles);
     
     //ect.

   }

   }

);
0 Likes