Creating a Sliding Menu in React with React Motion

#8

One approach is to intercept a click event on the body element and hide the menu if it is displayed. You can use preventDefault to overrule the intended behavior of the click. My preferred approach would be to have a transparent overlay that intercepts all clicks instead :grinning:

#9

Another thing I notice about your DEMO
is when you resize the screen you can see the off canvas menu popping in or out of the viewport depending on which way you resize the screen.

I believe it has to do with #flyoutMenu.hide and #flyoutMenu.show. Here are two solutions that fixed this issue of me.
1.
.hide : transform: translate3d(100%, 0, 0) scale3d(1, 1, 1);
.show : transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
2.
.hide: transform: translate(-100%) ;
.show: transform: translate(0%) ;

Not sure why these worked over the original, maybe somebody mite have some thoughts on this. FYI, I did change the direction of the sliding menu in my solutions. Also this happens in the current version of Chrome and Firefox.

1 Like
#10

That is a good suggestion! I will dig into it tomorrow and see what is happening there to cause the menu to have that weird behavior when resized.

#11

I am confused why when you click on the menu links they donā€™t go anywhere but close the menu?

#12

It is just for demo purposes. You can see that each link has its href attribute set to just #. You can change the # to any URL that you would rather go to instead.

#13

Hello !

I tried out the sliding menu with the react , the menu displays perfectly but my links doesnt redirect. i tried ā€˜Linkā€™ instead of <a> tag, its still not redirecting. i am unable to figure out the reason?. i am using this with media query, where the button gets displayed on max width 480px.

Thanks ,
RM

#14

Can you post a link to your code? Iā€™d like to take a look at it to see what is going on.

#15

Here is the link : https://github.com/roshmani/Portfolio , i am still in the learning phase of React , so unable to figure out.

thanks in advance,
RM

#16

I want to combine this with your React Router lesson to make a sidebar with 4 buttons, where each button will activate its own sliding menu. Do you think this is the best solution for what I want Kirupa? Thnx for your courses btw!

#17

What exactly are you trying to do? Technically it will work. Whether it is the proper UI or not, I am not sure :slight_smile:

#18

Something like this:

#19

Love it, awesome tutorial!

Everything works perfectly fine, and you did it simple enough (yet detailed) that I could jump into making my own changes right away.

Iā€™m just having one problem, similarly to other people who have described that the links in the menu donā€™t redirect anywhere; on my mobile it works, however on Chrome and Firefox, clicking the links just closes the menu, but redirects nowhere. I donā€™t get any error messages or anything, and the console prints ā€œclickedā€ as expected. Any leads?

#20

That will totally work, and would be a good approach as well! :slight_smile:

#21

Hmm. If you remove the line containing the stopPropagation call, do the links magically start to work?

#22

Hi, was wondering if you had any advice- my code is very similar to yours, but my menu is just appearing, not sliding in at all. Any advice into common possible reasons?

#23

Hi Amanda! Welcome to the forums :slight_smile:

It could be due to a variety of subtle reasons. Can you share your code? If you have a running example that you have a link for, that might be a good starting point as well.

Thanks,
Kirupa

#24

Having issue with adding MenuButton onto MenuContainer component. ```

Error:ā€œMenuButton is not defined.ā€

Lines from my MenuContainer.js file:

Blockquote - top lines. Menubutton is in same folder as MenuContainer.js
import React, { Component } from ā€œreactā€;
import ā€˜./MenuButton.jsā€™;

#25

Hi @J_Jean - welcome to the forums :partying_face:

Can you share your full code for us to look at? That will help in seeing what is going on.

Alternatively, you can compare your code with what is posted on Github to see where the discrepancies may lie: https://github.com/kirupa/kirupa/tree/master/reactjs/slidingmenu_css/src

Cheers,
Kirupa :koala:

#26

I tried this demo, it is working good but sliding is not working fine.Menu is not sliding as shown in demo. it looks like it appear and another click it will disappear.

Can you please tell me how to slide the menu to left and it should be visible to our eye.

Thanks

#27

Do you have a link to your example (and possibly the code)? It is tricky to figure out what is wrong from what you have described :stuck_out_tongue: