Creating a Sliding Menu in React with React Motion

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

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

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!

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:

Something like this:

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?

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

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

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?

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

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’;

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:

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

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:

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

Hi @Salim_Semakula - welcome to the forums! It’s never too late to continue any discussion here :stuck_out_tongue:

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 :stuck_out_tongue:

Cheers,
Kirupa

Spot On!!! It did help. [email protected]

1 Like

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/
On desk it may not be so bad but on mobile its eye soring.
Thanks in advance.

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:

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

Thanks in advance