Help with making a ''vertical'' dropdown menu

jasa11
Explorer
84 0 9

Hey.

 

Is there any way that I could make my dropdown menu on mobile slide in vertically? Basically as shown in the screenshot. The width would be similar as well, and sliding in from the left side of the screen. I think it would look much better that way.

 

Thanks in advance!

 

URL: jasaoslaj.com

 

dropdown menu.png

 

Replies 3 (3)

ziadify
Shopify Partner
16 2 2

I don't recommend doing both animations.
That being said your solution would be mix of javascript and CSS
Sliding down:

In javascript you toggle active class instead of show/hide (display:none/display:block) styling

ziadify_0-1700158952094.png

then on css you do the following:

ziadify_1-1700158982085.pngziadify_2-1700159003507.png

and that's it

For left to right sliding:
same for the javascript active class toggle, css should be as follows:

ziadify_3-1700159074166.png

 

Hope this helps

jasa11
Explorer
84 0 9

No, down is how its at right now, so im not doing both animations or anything.

 

I just wanna make it from going down as it is right now, to opening up vertically from the left side

ziadify
Shopify Partner
16 2 2

currently it's fading in, in my answer i shared both solutions, sliding down or sliding right