Creating a Sliding Menu in React with React Motion | KIRUPA


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


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


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