# Creating a Sliding Menu in React with React Motion **URL:** \ **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:** 13\ **Page:** 2
**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:42pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/21 "2018-12-01T23:42:36Z")
Hmm. If you remove the line containing the `stopPropagation` call, do the links magically start to work? ---
**Author:** ![Amanda\_Patterson](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/amanda_patterson/32/9716_2.png) [@Amanda\_Patterson](https://forum.kirupa.com/u/Amanda_Patterson)\ **Post date:** [June 24, 2019, 7:56pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/22 "2019-06-24T19:56:57Z")
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? ---
**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:** [June 24, 2019, 7:58pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/23 "2019-06-24T19:58:58Z")
Hi Amanda! Welcome to the forums 🙂 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 ---
**Author:** ![J\_Jean](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/j_jean/32/10895_2.png) [@J\_Jean](https://forum.kirupa.com/u/J_Jean)\ **Post date:** [January 15, 2020, 4:14am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/24 "2020-01-15T04:14:23Z")
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’; ---
**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:** [January 15, 2020, 7:45am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/25 "2020-01-15T07:45:29Z")
Hi @J_Jean - welcome to the forums 🥳 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](https://github.com/kirupa/kirupa/tree/master/reactjs/slidingmenu_css/src) Cheers, Kirupa 🐨 ---
**Author:** ![Yaswanth\_Srinivasa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yaswanth_srinivasa/32/10977_2.png) [@Yaswanth\_Srinivasa](https://forum.kirupa.com/u/Yaswanth_Srinivasa)\ **Post date:** [January 27, 2020, 12:46am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/26 "2020-01-27T00:46:45Z")
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 ---
**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:** [January 27, 2020, 6:19am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/27 "2020-01-27T06:19:12Z")
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 😛 ---
**Author:** ![Salim\_Semakula](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/salim_semakula/32/11157_2.png) [@Salim\_Semakula](https://forum.kirupa.com/u/Salim_Semakula)\ **Post date:** [April 10, 2020, 12:20am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/29 "2020-04-10T00:20:56Z")
I dont know if its too late to continue this discussion. Everything just worked out pretty well. Any idea how i can have the button on right and the menu animating from the right as well? Thanks, Easy to follow tutorial ---
**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:** [April 10, 2020, 6:53am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/30 "2020-04-10T06:53:02Z")
Hi @Salim_Semakula - welcome to the forums! It’s never too late to continue any discussion here 😛 To have the menu appear from the right, set the `transform` property on `#flyoutMenu` to: ``` transform: translate3d(100vw, 0, 0); ``` Notice how the horizontal value changed from **-100vw** to **100vw**. For the button itself, you can have it be anywhere on the page using margins, absolute positioning, flexbox, or grid. A very simple approach would be to just set a `float: right` property and value on **#roundButton**. Hope this helps 😛 Cheers, Kirupa ---
**Author:** ![Salim\_Semakula](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/salim_semakula/32/11157_2.png) [@Salim\_Semakula](https://forum.kirupa.com/u/Salim_Semakula)\ **Post date:** [April 10, 2020, 2:28pm UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/31 "2020-04-10T14:28:25Z")
Spot On!!! It did help. Thanks@kirupa ---
**Author:** ![Salim\_Semakula](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/salim_semakula/32/11157_2.png) [@Salim\_Semakula](https://forum.kirupa.com/u/Salim_Semakula)\ **Post date:** [June 1, 2020, 2:10am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/32 "2020-06-01T02:10:07Z")
I am learning react amongst other things i readoff this forum. I managed to develop a react website using create-react-app but once run npm run build and deploy to netlify the styling breaks, Am using a mix of inline and external styling. Any idea how i could fix this? [https://apercudemo.netlify.app/](https://apercudemo.netlify.app/) On desk it may not be so bad but on mobile its eye soring. Thanks in advance. ---
**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:** [June 1, 2020, 4:18am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/33 "2020-06-01T04:18:41Z")
Hi Salim! What exactly are you seeing on mobile? Can you share a screenshot? When I test using the developer tools, your mobile design looks just as nice as your larger screen version: ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/f/f8eef0d740af18d8ac96b4090b23816d3b066c77.png) ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/4/4c1514cc1106f8f4cb894828acd9de1976ae4d6f.png) ---
**Author:** ![Salim\_Semakula](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/salim_semakula/32/11157_2.png) [@Salim\_Semakula](https://forum.kirupa.com/u/Salim_Semakula)\ **Post date:** [June 2, 2020, 11:37am UTC](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236/34 "2020-06-02T11:37:41Z")
In the developer tools, Everything works perfect but the deployed version on netlify has broken styling when viewing on a real mobile phone. below are some of the screenshots from my smartphone. My ratings only allow me to upload a maximum of one image ![IMG_1665](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/6/60ed383e4d096b6fa271ab9a3be6d0282f7b9a69.png) Thanks in advance [Previous page](https://forum.kirupa.com/t/creating-a-sliding-menu-in-react-with-react-motion/636236.md?page=1)