Does my SideBar in React not slide from left to right with the click?

Question

Does my SideBar in React not slide from left to right with the click?

Navigation

#1 by (0 votes)

0

When I click on the toggle my bar appears as I wish but it does not slide from left to right it just appears, I would like it to be displayed as the following snippet but I can not make it slide apparently I have to declare the width in vw, this question had already been answered in the following link but I can not fix it apparently it's the styles, I have the width in vw but I do not know what could be wrong, they could help me.

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

* {
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100vw;
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled {
  padding-left: 250px;
}
#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #050545;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="wrapper" style="background-color:red">
  <div id="sidebar-wrapper" style="background-color:yellow">sidebar
    <div id="result"></div>
  </div>
  <div id="header" class="container-fluid">
    <div class="navbar"> <a href="#menu-toggle" id="menu-toggle">Press</a> 
      <div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span>

      </div>
    </div>
  </div>
</div>

these are my components SideBar.js

const className = menuVisible ? 'flyoutMenu show' : 'flyoutMenu hide';
return(<div  onMouseDown={this.props.controlarApuntador} className={className} >

            <div  className='menu-lateral'>
                <img src="images/borealis.jpg" 
                            size="mini" style={borealis} />
                <h2><a  href='#'><span>A</span>cerca</a></h2>
                    <hr></hr>
                <h2><a  href='#'><span>C</span>ontacto</a></h2>
                    <hr></hr>
                <div style={{ paddingTop: '10px'}}>
                    <hr></hr>
                </div>
                <div style={{ paddingTop: '10px'}}>
                    <iframe src="https://open.spotify.com/embed/user/emeery/playlist/5ZUCEmqNDcx4HhVaMAgliO" 
                    width="300" height="87" frameBorder="0" allowTransparency="true"></iframe>
                </div>

            </div>
        </div>);

and my styles.css

.flyoutMenu {
    width: 50vw;
    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;
    color: white;
    border-color:salmon;
    border-width:1px; 
    border-style:solid;
    background-color: rgba(255, 255, 255, 0.589);
    width: 60vw;
    transition: transform 0.3s ease-in-out;
    border-radius:5px;

} // flyoutMenu.show

css react

asked by Gerardo Bautista 19.12.2017 в 16:33

source

1 answer

Inheritance in controller.php Laravel 5.5 AutoMapper does not convert empty lists well

score 0 · Accepted Answer

Good friend I do not expect this to be what you want

The idea is that the bar does not appear so that the user can not give scroll

For that we add:

body{
 overflow: hidden;
 width: 100%;
}

I hope you help greetings.

Note: This I think is what you want any change or doubt you can tell me to fix or improve it.

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

* {
  margin: 0;
  padding: 0;
}
/*Nuevo codigo*/
body{
  overflow: hidden;
  width: 100%;
}
/*Nuevo codigo*/
#wrapper {
  width: 100vw;
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled {
  padding-left: 250px;
}
#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #050545;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="wrapper" style="background-color:red">
  <div id="sidebar-wrapper" style="background-color:yellow">sidebar
    <div id="result"></div>
  </div>
  <div id="header" class="container-fluid">
    <div class="navbar"> <a href="#menu-toggle" id="menu-toggle">Press</a> 
      <div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span>

      </div>
    </div>
  </div>
</div>

Example 2

For this example the idea is that the wrapper have a width of 250px that we hide it with left:-250px and we make it visible with left:0px

We add a new div that is hidden and when it appears the wrapper puts on everything and when clicked it hides the wrapper .

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
  $(".obscuro").fadeIn()
});

$(".obscuro").click(function() {
  $(".obscuro").fadeOut()
  $("#wrapper").toggleClass("toggled");
});

* {
  margin: 0;
  padding: 0;
}
/*Nuevo codigo*/
body{
  overflow: hidden;
  width: 100%;
}
/*Nuevo codigo*/
#wrapper {
  width: 100vw;
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position:fixed;
}
/*#wrapper.toggled {
  padding-left: 250px;
}*/
#sidebar-wrapper {
 
  position: fixed;
  left: 250px;
  width: 250px;
  height: 100%;
  left: -250px;
  overflow-y: auto;
  background: #050545;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  box-shadow: 10px 0px 10px -7px rgba(0, 0, 0, 0.1);
   z-index: 1000;
}
#wrapper.toggled #sidebar-wrapper {
  left: 0px;
}
.obscuro{
  position:fixed;
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 500;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="wrapper" style="background-color:red">
<div class="obscuro">

</div>
  <div id="sidebar-wrapper" style="background-color:yellow">sidebar
    <div id="result"></div>
  </div>
  <div id="header" class="container-fluid">
    <div class="navbar"> <a href="#menu-toggle" id="menu-toggle">Press</a> 
      <div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span>

      </div>
    </div>
  </div>
</div>