I wanted to make dropdown menu and i did actually made it, but now i have one annoying problem. I got the blank div of reactJS component when my menu is not here.
So, here is the code behind this
@Users = React.createClass
handleEnter: (e) ->
$('.users').animate({top: '+=250px'});
handleLeave: (e) ->
$('.users').animate({top: '-=250px'});
render: ->
React.DOM.div
onMouseEnter: @handleEnter
onMouseLeave: @handleLeave
className: 'users'
React.DOM.h1
className: 'h1'
"Log In!"
React.createElement SessionForm
React.DOM.h1
className: 'h1'
"Sign up!"
React.createElement UserForm
.users {
padding-bottom: 40px;
text-align: center;
background-color: #f3f3f3;
display: flex;
position: relative;
bottom: 250px;
/*-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/
/*-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}
.users > .h1 {
flex: 1;
}
.users > .h2 {
flex: 1;
}
<%= react_component 'Users', {} %>
<%= react_component 'Tasks', { data: @tasks } %>