Creating a Sliding Menu in React with React Motion

programming
1

by kirupa | 11 December 2016

In UIs today, sliding menus are all the rage. These menus are basically off-screen elements that slide into view when you click or tap on something that looks like an arrow, a hamburger icon, or something else that indicates a menu will appear.

This is a companion discussion topic for the original entry at http://www.kirupa.com/react/smooth_sliding_menu_react_motion.htm
2

Hello!

Why didn’t you place the ReactDOM.render at the end of MenuContainer?

Thanks

W

3

Need to change ‘onMouseDown’ to ‘onMouseUp’ in both the button component and menu container to get this to work with react-router-dom FYI.

1 Like
4

Hi, it might be a silly question but I would like to add a hyper link to the sliding menu. It does not works and there is no error. Please help.

Menu.js

<h2><a href="#">Home</a></h2>
<h2><a href="#">About</a></h2>
<h2><a href="#">Contact</a></h2>
<h2><a href="#">Search</a></h2>
<h2><a href="http://forum.kirupa.com">link to kirupa.com</a></h2>  <!-- the hyperlink will not work.
5

Strange. In my quick test, it worked. When you bring up the Chrome Dev Tools and inspect the link in your browser, does the URL actually appear? It could be that there is some build-related issue that is preventing your changes from being picked up.

6

It was my mistake. I redo the chapter and everything goes well. The link is clickable and redirect. Thank you.

1 Like
7

Very good documentation, thank you!
I’ve made the menu smaller and not cover the whole screen. Suppose I want this menu to disappear when I click anything outside the menu, what do I do then? thanks

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: