# Creating a Sliding Menu in React with React Motion

**URL:** https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236
**Category:** programming
**Created:** [March 20, 2017, 8:36am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236 "2017-03-20T08:36:26Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [March 20, 2017, 8:36am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/1 "2017-03-20T08:36:26Z")

</div>

by [kirupa](http://www.kirupa.com/www.kirupa.com/me/index.htm) | 11 December 2016

In UIs today, [sliding menus are all the rage](https://www.kirupa.com/html5/creating_a_smooth_sliding_menu.htm). 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](http://www.kirupa.com/react/smooth_sliding_menu_react_motion.htm)

---

<div class="post-metadata">

### Author: ![wuppimon](https://avatars.discourse-cdn.com/v4/letter/w/e5b9ba/32.png) [@wuppimon](https://forum.kirupa.com/u/wuppimon)
#### Post date: [December 18, 2017, 9:54am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/2 "2017-12-18T09:54:21Z")

</div>

Hello!

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

Thanks

W

---

<div class="post-metadata">

### Author: ![Wildpow](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wildpow/32/8951_2.png) [@Wildpow](https://forum.kirupa.com/u/Wildpow)
#### Post date: [January 21, 2018, 11:31pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/3 "2018-01-21T23:31:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![moonbury](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/moonbury/32/9178_2.png) [@moonbury](https://forum.kirupa.com/u/moonbury)
#### Post date: [July 6, 2018, 3:51am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/4 "2018-07-06T03:51:32Z")

</div>

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.
> 
> ```

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [July 6, 2018, 6:28am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/5 "2018-07-06T06:28:42Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![moonbury](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/moonbury/32/9178_2.png) [@moonbury](https://forum.kirupa.com/u/moonbury)
#### Post date: [July 7, 2018, 2:57am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/6 "2018-07-07T02:57:04Z")

</div>

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

---

<div class="post-metadata">

### Author: ![micky1987](https://avatars.discourse-cdn.com/v4/letter/m/6f9a4e/32.png) [@micky1987](https://forum.kirupa.com/u/micky1987)
#### Post date: [October 21, 2018, 1:27am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/7 "2018-10-21T01:27:42Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 22, 2018, 3:01am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/8 "2018-10-22T03:01:31Z")

</div>

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 😀

---

<div class="post-metadata">

### Author: ![Wildpow](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wildpow/32/8951_2.png) [@Wildpow](https://forum.kirupa.com/u/Wildpow)
#### Post date: [November 22, 2018, 5:05pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/9 "2018-11-22T17:05:29Z")

</div>

Another thing I notice about your [DEMO](https://www.kirupa.com/react/examples/slidingmenu_css/index.html)  
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.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 23, 2018, 4:11am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/10 "2018-11-23T04:11:11Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Taban\_Cosmos](https://avatars.discourse-cdn.com/v4/letter/t/5e9695/32.png) [@Taban\_Cosmos](https://forum.kirupa.com/u/Taban_Cosmos)
#### Post date: [November 25, 2018, 4:01am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/11 "2018-11-25T04:01:44Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 25, 2018, 4:27pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/12 "2018-11-25T16:27:40Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![romani](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@romani](https://forum.kirupa.com/u/romani)
#### Post date: [November 26, 2018, 3:38pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/13 "2018-11-26T15:38:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 26, 2018, 7:27pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/14 "2018-11-26T19:27:01Z")

</div>

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

---

<div class="post-metadata">

### Author: ![romani](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@romani](https://forum.kirupa.com/u/romani)
#### Post date: [November 26, 2018, 7:33pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/15 "2018-11-26T19:33:39Z")

</div>

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

thanks in advance,  
RM

---

<div class="post-metadata">

### Author: ![tsuNammi](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tsunammi/32/9383_2.png) [@tsuNammi](https://forum.kirupa.com/u/tsuNammi)
#### Post date: [November 29, 2018, 3:47pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/16 "2018-11-29T15:47:32Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 29, 2018, 5:22pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/17 "2018-11-29T17:22:43Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tsuNammi](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tsunammi/32/9383_2.png) [@tsuNammi](https://forum.kirupa.com/u/tsuNammi)
#### Post date: [November 29, 2018, 5:44pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/18 "2018-11-29T17:44:23Z")

</div>

Something like this:

[![](https://dl.dropboxusercontent.com/s/duwhekwrnubxhs7/Screenshot%202018-11-29%2017.43.01.png?dl=0) ](https://dl.dropboxusercontent.com/s/duwhekwrnubxhs7/Screenshot%202018-11-29%2017.43.01.png?dl=0)

---

<div class="post-metadata">

### Author: ![Silby](https://avatars.discourse-cdn.com/v4/letter/s/f6c823/32.png) [@Silby](https://forum.kirupa.com/u/Silby)
#### Post date: [November 30, 2018, 10:06am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/19 "2018-11-30T10:06:36Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 1, 2018, 11:31pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/20 "2018-12-01T23:31:07Z")

</div>

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

[Next page](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236.md?page=2)