# My sliding menu in React does not work?

**URL:** <https://forum.kirupa.com/t/my-sliding-menu-in-react-does-not-work/637620>\
**Category:** programming\
**Created:** [December 15, 2017, 8:37pm UTC](https://forum.kirupa.com/t/my-sliding-menu-in-react-does-not-work/637620 "2017-12-15T20:37:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![emeery](https://avatars.discourse-cdn.com/v4/letter/e/3bc359/32.png) [@emeery](https://forum.kirupa.com/u/emeery)\
**Post date:** [December 15, 2017, 8:37pm UTC](https://forum.kirupa.com/t/my-sliding-menu-in-react-does-not-work/637620/1 "2017-12-15T20:37:59Z")

</div>

Following the tutorial from this page [“Creating a Sliding Menu in React”](https://www.kirupa.com/react/smooth_sliding_menu_react_motion.htm) does not work as it should, by pressing the button it should appear to scroll the menu but only the text appears below the button which could be the error so that my menu runs as expected?

the MenuContainer class change it to SideBar.js

all classes are inside **SideBar.js**

```
import React from 'react';
import {Container, Row, Col} from 'reactstrap';
class Vitae extends React.Component {
    constructor(props) {
		super(props);    
		this.alternarMenu = this.alternarMenu.bind(this);
		this.controlarApuntador = this.controlarApuntador.bind(this);
		this.state = {visible:false};
	}; // comillas 
	alternarMenu () { this.setState({visible:!this.state.visible}); }
	controlarApuntador (e) { this.alternarMenu(); console.log('clic');
    	e.stopPropagation(); }
    render() {
			var estilo = { 
			border: {borderColor:'salmon', borderWidth:'1px', 
			borderStyle:'solid', color: 'lightblue', paddingBottom: '15px'}, 
			estiloLogo : { width: "50px", height: "50px" }, 
			borderTitle: {paddingBottom: '15px' },
			};
			return (
			<div className='sidebar-puntos'> 
			<Boton controlarApuntador={this.controlarApuntador} />
			<Menu controlarApuntador={this.controlarApuntador} menuVisible={this.state.visible} />
			<div className='grid'>
			<h1><span>h</span>abitos</h1>
			<ul> <li> No a las distracciones </li> 
							<li> Leer algo nuevo todos los dias. </li>
							<li> Acepta tus errores y sigue adelante. </li>
							<li> Acostumbrate a levantarte temprano. </li>
							<li style={{textDecoration:'underline'}}>Cuida tu cuerpo</li>
							<li> aprender a delegar </li>
			</ul>
			</div>
			
			<div className='grid'>
			<h1><span>p</span>ensamientos</h1>
			<ul> 
							<li>sin tener en que caerme y con el cuerpo abatido</li>
							<li>mi movimiento asistido por un pensamiento abstraido</li>
							<li>me encontraba sumido en el transporte rumbo a </li>
							<li>influenciado en el vecindario, estas palabras no son del armario</li>
							<li>solo doy mi punto de vista, un renglon en el temario </li> 
			</ul>
			
			</div>
				<Container>
					<Row style={estilo.borderTitle}>
						<Col>
							<img src="images/mouse.png" 
							size="mini" style={estilo.estiloLogo} />
						</Col>
					</Row> <Row>
					  <Col style={estilo.border} >Cualquier dispositivo.</Col>
					  <Col style={estilo.border} >Menos codigo.</Col>
					  <Col style={estilo.border} >Herramientas extensibles.</Col>
					</Row>
				</Container>
				</div>
			);
	};
}
export default Vitae;
class Boton extends React.Component {
	render() { 
		return(<button className='roundButton'onMouseDown={this.props.controlarApuntador}></button> ); 
	}
}
class Menu extends React.Component {
	render() { 
		const { menuVisible} = this.props;
		return(<div onMouseDown={this.props.controlarApuntador} className={menuVisible ? 'show':'hide'} >
		<h2><a href='#'>Acerca</a></h2>

		</div>);
	}
}

```

and my **styles.css**

```
.roundButton {
background-color: #96D9FF;
margin-bottom: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 10px solid #0065A6;
outline: none;
transition: all .2s cubic-bezier(0, 1.26, .8, 1.28);
}

.roundButton:hover {
background-color: #96D9FF;
cursor: pointer;
border-color: #3557;
transform: scale(1.2, 1.2);
}

.roundButton:active {
border-color: #3557;
background-color: #FFF;
}

.sidebar-puntos { text-align: center; border-top-color: 4px solid salmon;
h1 { color: lightgray; }
span { color: lightseagreen }
ul {
li{ list-style: none; color: whitesmoke; font-size: 2rem;} }
} // sidebar-puntos

.flyoutMenu {
width: 100vw;
height: 100vh;
background-color: #FFE600;
position: fixed;
top: 0;
left: 0;
transition: transform .3s
cubic-bezier(0, .52, 0, 1);
overflow: scroll;
z-index: 1000;
}

.flyoutMenu.hide {
transform: translate3d(-100vw, 0, 0);
}

.flyoutMenu.show {
transform: translate3d(0vw, 0, 0);
overflow: hidden;
}

.flyoutMenu h2 a {
color: #333;
margin-left: 15px;
text-decoration: none;
}

.flyoutMenu h2 a:hover {
text-decoration: underline;
}
```

---

<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 16, 2017, 8:54pm UTC](https://forum.kirupa.com/t/my-sliding-menu-in-react-does-not-work/637620/2 "2017-12-16T20:54:21Z")

</div>

Can you post a live version of this so that I can check it out in the browser? 🙂