javascript - 滑入/滑出导航

Question

我为我的网站创建了滑入/滑出侧边导航。它工作得很好，就像现在一样，但我希望让网站与侧边栏一起移动(类似于:http://demo.agnidesigns.com/fortune/demo15/)。目前它只是移出网站。

我想也许我可以添加一个切换类列表函数，它将向左移动的部分与侧边栏的宽度相同(左:280 像素)，但不太明白如何将其包含在 JS 中。但是，我确信这将是与我现有的用于侧边导航切换的 JS 类似的方法。

    <nav>


        <div id="sidebar">
            <div class="toggle-btn" onclick="toggleSidebar()">

                <div id="navBar">
                    <div id="navBtn">
                        <img id="navLogo" src="resources/img/logo-white.svg">
                    </div>
                    <div id="navText">
                        <h2>Menu</h2>
                    </div>

                    <ul class="social-links">

                        <li><a href="#" target="_blank"><i class="icon ion-logo-facebook"></i></a></li>
                        <li><a href="#" target="_blank"><i class="icon ion-logo-twitter"></i></a></li>
                        <li><a href="#" target="_blank"><i class="icon ion-logo-instagram"></i></a></li>
                    </ul>
                </div>


            </div>

            <ul>
                <li><a href="#overview"><h2>Who Are We</h2></a></li>
                <li><a href="#web"><h2>Services</h2></a></li>
                <li><a href="#drone"><h2>UAV</h2></a></li>
            </ul>

        </div>

    </nav>

<section class="section-overview new-section__whitetwothird" id="overview">
    <div class="row">

      <h2>Some Text</h2>
    </div>


</section>

CSS

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html,
body {
    color: #555;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 7px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h2 {
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 180%;
    word-spacing: 2px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.new-section__whitetwothird {
      padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
     background-color: #fff;
     min-height: 66.66vh;
     width: calc(100vw - 80px);
     left: 80px;
    }

  #sidebar {
    position: fixed;
    width: 200px;
    height: 100vh;
    background: #000;
    left: -200px;
    transition: 0.4s;
    z-index: 1;
}

#sidebar.active {
    left: 0;
    z-index: 1;
}

#sidebar a {
    list-style: none;
    color: #fff;
    font-size: 100%;
    text-decoration: none;
    color: #fff;
}

#navText h2:first-of-type{
    padding: 0;
}
#sidebar h2 {
    padding: 20px;
}

#navBar .icon {
    font-size: 17px;
    padding: 0;
}

.social-links {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 14px 0;
    text-align: center;
    color: #fff;
}

.social-links li {
    display: block;
    font-size: 15px;
    color: #fff;
    margin: 15% 0 0 0;
}

#sidebar .toggle-btn {
    position: absolute;
    left: 200px;
}

#navBar {
    width: 80px;
    background-color: #000;
    height: 100vh;
    top: 0;
    z-index: 2000;
}

#navBar #navLogo {
    margin: 25%;
}

img {
    border: 0;
    vertical-align: middle;
    display: inline-block;
}

#navText {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    bottom: 45%;
    margin: 40% 0;
    text-align: center;
    transform: rotate(-90deg);
    color: #fff;
}

JS

function toggleSidebar() {
    document.getElementById('sidebar').classList.toggle('active');
}

https://codepen.io/caitlinmooneyx/pen/BEpBzZ

我很好奇是否必须创建一个新函数，或者我是否可以使用 else if 扩展我的 toggleSidebar？

我已经尝试将 toggleSection() 添加到该部分，但由于边栏已经连接到另一个功能，它完全停止工作，以及尝试添加 .section.active 类(因为我试图重新创建与#sidebar.active 相同:

.section.active {
    left: 280px;
}

基本上左边:280px 是我在边栏打开/事件时试图实现的。

如果这看起来很傻，请原谅，我是 JS 的新手，仍在学习它是如何工作的，并且在网上找不到任何关于我想要实现的目标。

Answer 1

您可以简单地添加到现有的 toggleSidebar() 函数上，通过将 left 属性添加到新的 .new-section__whittwothird--active< 来偏移内容 类(您可以修改类名以更好地适合您的元素)

更新:我已经添加了一个 querySelectorAll 和一个循环来添加类在一个页面上有多个具有相同名称的类的事件中(我之前的回答只是 querySelector)有无穷无尽的添加循环的方法我选择了旧方法而不是新版本以获得更好的浏览器支持。

function toggleSidebar() {
  document.getElementById("sidebar").classList.toggle("active");
  var sections = document.querySelectorAll(".new-section__whitetwothird"),i;
  for (i = 0; i < sections.length; ++i) {
    sections[i].classList.toggle("new-section__whitetwothird--active");
  }
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    color: #555;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 7px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h2 {
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 180%;
    word-spacing: 2px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.new-section__whitetwothird {
      padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
     background-color: #fff;
     min-height: 66.66vh;
     width: calc(100vw - 80px);
     left: 80px;
     transition:.5s ease;
       
    }

.new-section__whitetwothird--active {
  left:280px; 
}

#sidebar {
    position: fixed;
    width: 200px;
    height: 100vh;
    background: #000;
    left: -200px;
    transition: 0.4s;
    z-index: 1;
}

#sidebar.active {
    left: 0;
    z-index: 1;
}

#sidebar a {
    list-style: none;
    color: #fff;
    font-size: 100%;
    text-decoration: none;
    color: #fff;
}

#navText h2:first-of-type{
    padding: 0;
}
#sidebar h2 {
    padding: 20px;
}

#navBar .icon {
    font-size: 17px;
    padding: 0;
}

.social-links {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 14px 0;
    text-align: center;
    color: #fff;
}

.social-links li {
    display: block;
    font-size: 15px;
    color: #fff;
    margin: 15% 0 0 0;
}

#sidebar .toggle-btn {
    position: absolute;
    left: 200px;
}

#navBar {
    width: 80px;
    background-color: #000;
    height: 100vh;
    top: 0;
    z-index: 2000;
}

#navBar #navLogo {
    margin: 25%;
}

img {
    border: 0;
    vertical-align: middle;
    display: inline-block;
}

#navText {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    bottom: 45%;
    margin: 40% 0;
    text-align: center;
    transform: rotate(-90deg);
    color: #fff;
}

        <nav>


            <div id="sidebar">
                <div class="toggle-btn" onclick="toggleSidebar()">

                    <div id="navBar">
                        <div id="navBtn">
                            <img id="navLogo" src="resources/img/logo-white.svg">
                        </div>
                        <div id="navText">
                            <h2>Menu</h2>
                        </div>

                        <ul class="social-links">

                            <li><a href="#" target="_blank"><i class="icon ion-logo-facebook"></i></a></li>
                            <li><a href="#" target="_blank"><i class="icon ion-logo-twitter"></i></a></li>
                            <li><a href="#" target="_blank"><i class="icon ion-logo-instagram"></i></a></li>
                        </ul>
                    </div>


                </div>

                <ul>
                    <li><a href="#overview"><h2>Who Are We</h2></a></li>
                    <li><a href="#web"><h2>Services</h2></a></li>
                    <li><a href="#drone"><h2>UAV</h2></a></li>
                    <li><a href="#about"><h2>About Us</h2></a></li>
                    <li><a href="#hire"><h2>Studio Hire</h2></a></li>
                    <li><a href="#contact"><h2>Contact Us</h2></a></li>
                </ul>

            </div>

        </nav>

    <section class="section-overview new-section__whitetwothird" id="overview">
        <div class="row">

          <h2>Some Text</h2>
        </div>


    </section>