HTML/CSS 侧导航栏未按预期工作

Question

I have a simple 2 column layout, the first column is side navbar and second column is content. I have a toggle button to hide/show side navbar. The logic that makes the sidebar responsive is that I have a css custom variable var(--navbar-width) which controls the width of the side navbar. For small screens the var(--navbar-width) is 0 and for others the var(--navbar-width) is 12rem. I have media query in place that sets the var(--navbar-width) value to 0 whenever screen size is smaller than 600px. Also when the toggle button is pressed the var(--navbar-width) value is toggled between 0 and 12rem.

Now the problem is when I press the toggle button the media query no longer works. I don't know why I am getting this behavior.

 $(function() { $("#toggleNavBar").click(function() { let width = getComputedStyle(document.documentElement, null).getPropertyValue("--navbar-width"); if (width.trim() == "0") { document.documentElement.style.setProperty("--navbar-width", "12rem"); } else { document.documentElement.style.setProperty("--navbar-width", "0"); } }); });

 :root { font-size: 16px; --navbar-width: 12rem; }.wrapper { display: grid; grid-template-columns: auto 1fr; grid-template-rows: minmax(100vh, auto); } #navbar { background-color: #afafaf; width: var(--navbar-width); transition: width 200ms ease; } @media screen and (max-width: 600px) {:root { --navbar-width: 0; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class="wrapper"> <nav id="navbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">...</a> </li> <li class="nav-item"> <a class="nav-link" href="#">...</a> </li> </ul> </nav> <main id="content"> <button id="toggleNavBar">Toggle</button> <h1>...</h1> <p>...</p> </main> </div>

The code is below also the link to codepen is https://codepen.io/isyedaliraza/pen/rNVbroq

Answer 1

If I understand correctly your issue your navbar . If you want smooth transition effect navbar need to fixed position. Below is the code and here is the pen . I modify your HTML code. Also I haven't use your CSS and JS code. I'm not changing CSS property using jQuery . I did using add and remove class .

HTML

<div class="wrapper">

  <nav class="navbar" id="navbar">
    <button id="navbarClose" class="close">x</button>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">One</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Two</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Three</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Four</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Five</a>
      </li>
    </ul>
  </nav>

  <main class="main-wrapper" id="content">
    <button class="btn btn-primary" id="toggleNavBar">Toggle</button>
    <h1>Lorem Ipsum!</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, a? Quam fugit quos eligendi voluptatum temporibus, libero tempora aperiam error culpa amet, iure distinctio sequi, obcaecati consequuntur quae a enim!</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt eligendi ipsa labore dolorum qui accusamus magni cum maxime possimus iusto dolor tenetur minus nesciunt, ipsum autem assumenda, facere distinctio temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nobis animi voluptas beatae. Pariatur iure, maxime fuga quam animi sapiente? Laborum voluptates similique neque qui! Dolore, et. Corporis, eveniet natus?</p>
  </main>

</div>

CSS

body{
  overflow: hidden;
}
.wrapper{
  min-height: 100vh;
  position: relative;
}
.navbar{
  align-items: flex-start;
  background-color: black;
  height: 100%;
  padding-bottom: 30px;
  padding-top: 30px;
  position: fixed;
  transform: translateX(0);
  transition: all 0.3s ease-in-out 0s;
  width: 250px;
  z-index: 1000;
}
@media (max-width: 767px){
  .navbar{
    transform: translateX(-100%);
    width: 100%;
  }
}
.navbar .close{
  display: none;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  border: 2px solid red;
  font-weight: normal;
  opacity: 1;
  color: white;
  text-shadow: none;
  height: 24px;
  width: 24px;
  position: absolute;
  top: 10px;
  right: 15px;
}
@media (max-width: 767px){
  .navbar .close{
    display: block;
  }
}
.navbar.active{
  transform: translateX(-100%);
}
@media (max-width: 767px){
  .navbar.active{
    transform: translateX(0);
  }
}
.main-wrapper{
  background-color: #f8f8f7;
  min-height: 100vh;
  padding: 30px 30px 30px 280px;
  position: relative;
  transition: all 0.3s ease-in-out 0s;
  width: 100%;
}
@media (max-width: 767px){
  .main-wrapper{
    padding: 30px 15px;
  }
}
.main-wrapper.active{
  padding-left: 30px;
}
@media (max-width: 767px){
  .main-wrapper.active{
    padding-left: 15px;
  }
}

JS

$(function(){
  $('#toggleNavBar').on('click', function(){
    $('#content').toggleClass('active');
    $('#navbar').toggleClass('active');
  });
  $('#navbarClose').on('click', function(){
    $('#content').toggleClass('active');
    $('#navbar').toggleClass('active');
  });
});

Note: I'm using bootstrap CSS for modify browser user agent style with normalize css property.

I hope this will help you!

Answer 2

Here I made this for you from scratch

 var navElement = document.querySelector("nav"), mainElement = document.querySelector("main"); document.querySelector("button").onclick = function() { navElement.classList.toggle("wzero"); mainElement.classList.toggle("wfull"); } document.body.onresize = function() { if(window.innerWidth > 600) { navElement.className = ""; mainElement.className = ""; }else { navElement.className = "wzero"; mainElement.className = "wfull"; } }

 * { box-sizing: border-box; } html, body { margin: 0; } #container { display: flex; height: 100vh; width: 100%; overflow: hidden; } nav { width: 25%; background-color: gray; transition: width.5s ease; } main { width: 75%; background-color: lightgray; transition: width.5s ease; }.wzero { width: 0; }.wfull { width: 100%; }

 <div id="container"> <nav>Nav</nav> <main><button>Toggle</button> Main</main> </div>