CODEWITHSUNDEEP
javascripthtmlcss
einacio
einacio

Reputation: 92

Right side div pops up when it slides to the left instead of smoothly sliding

So I'm trying to create a slide out menu where the menu is positioned negative percent of its left-margin initially, and when I click a button, it slides out from left to the right, which I was able to do. However, I want my slide-menu to push the home-page div to the right as well when it slides out. The slide-menu does pushes the div to the left, which I was able to do by giving an absolute position to the home-page div. However, the problem is that when I click the menu toggle to close the slide-menu back to the right, the home-page div quickly pops up first, and then slides following the slide-menu to the right instead of just smoothly following the slide-menu.

Also, when the menu slides out from left to the right, I get vertical and horizontal scrollbars, which I don't want. I tried fixing it by applying an "overflow x" on the parent element, but it didn't solve it. Anyone to help please?

I tried to look for similar questions here, but couldn't find any that helps me solve the problem.

Here is what I currently have:

document.getElementById('toggler').onclick = function(){
  document.getElementById('side-bar').classList.toggle('active');
  document.getElementById('Right-Page').classList.toggle('active');
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-family: 'Lora', serif;
  }    

#side-bar{
  width: 60%;
  height: 100vh;
  background-color: black;
  display: inline-block;
  margin-left: -60.5%;
  transition: all 0.6s ease;
  vertical-align: top;
}

#side-bar.active {
  margin-left: 0%;
}

#side-bar ul {
  list-style: none;
}

#side-bar ul li {
  margin-top: 15px;
  margin-left: 20px;
  float: left;
}

#side-bar ul a {
  text-decoration: none;
  color: white;
}

#side-bar ul li:hover {
 border-bottom: solid 1px #ffffff;
}

#Right-Page {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100vh;
  background-color: red;
}

#Right-Page.active{
  position: absolute;
}

#toggler{
  margin-top: 8px;
}

#toggler span{
  background-color: #000000;
  width: 35px;
  height: 4px;
  display: block;
  margin-bottom: 5px; 
  margin-left: 10px;
}
<!Doctype html>
    <html lang="en">
    <head>
        <title>Side Bar</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Lora" 
     rel="stylesheet">
    </head>
    <body>
        <div id="main-container">
            <div id="side-bar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contacts</a></li>
                </ul>
            </div>
            <div id="Right-Page">
                 <div id="toggler">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div id="main-text">
                    
                </div>
            </div>
        </div>
    
    <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Upvotes: 0

Views: 580

Answers (1)

Ben
Ben

Reputation: 5636

Your position:absolute is only applied in #Right-Page.active. It's not absolutely positioned on the way back, so doesn't slide.

Move the position:absolute into the main #Right-Page styles and it should work the way you want.

Upvotes: 0

Related Questions