滑入/滑出导航

Question

我为我的网站创建了一个滑入/滑出侧面导航。它现在就可以正常工作，但是我希望站点可以通过侧边栏移动（类似于：http://demo.agnidesigns.com/fortune/demo15/）。目前，它只是移到网站上。

我想也许我可以添加一个切换classList函数，该函数会将这些部分向左移动到与侧边栏相同的宽度（左：280px），但还不太了解如何将其包含在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扩展我的toggleSidebar？

我尝试向该部分添加toggleSection（），但是由于侧边栏已经连接到另一个函数，因此它完全停止工作，并尝试添加.section.active类（因为我试图重新创建）与＃sidebar.active相同：

.section.active {
    left: 280px;
}

基本上是左侧：280px是我在侧边栏打开/活动时要执行的操作。

如果这看起来很愚蠢，请原谅我，我是JS的新手，并且仍然在学习如何工作，并且无法在网上找到有关我要实现的目标的任何信息。

Answer 1

您只需在新的toggleSidebar()类中添加left属性，即可简单地添加到现有的.new-section__whitetwothird--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>

Answer 2

通过重新整理一些html并添加一些新行，这就是我得到的。

这就是我更改您html的方式

 <!--I created a main content wrapper and its height and width is the viewport-->
<main>
        <nav>
          <!--I placed the toggle btn here -->
          <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>
          <div id="sidebar">
             <!--This is where the toggle button before -->
            <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>
       <!-- I created this main section wrapper that will hold all the sections-->
        <div class="section-wrapper">
          <section class="section-overview" id="overview">
              <div class="row">
                <h2>Section 1</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
              </div>
          </section>

        </div>
      </main>

这些是对CSS的更改

.section-wrapper {
  position: relative;
  overflow-y: scroll; // will create the scrollbar if it overflows
  transition: transform .5s ease;
  margin-left: 80px;
}

// instead of targeting the #sidebar, I targeted the nav
nav.active {
  width: 360px;
}

nav.active+.section-wrapper {
  transform: translateX(280px); // this will push the sections to the right
}

总而言之，我只是将一些填充和边距属性替换为您的CSS。 在您的JavaScript中，我只是将目标元素替换为nav

结果就是这个

function toggleSidebar() {
          document.querySelector('nav').classList.toggle('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: 16px;
    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;
}

main {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

.section-wrapper {
  position: relative;
  overflow-y: scroll;
  transition: transform .5s ease;
  margin-left: 80px;
}

section {
    padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    background-color: #fff;
    }

nav {
  width: 80px;
  background: #000;
  overflow:hidden;
  transition: all .5s ease;
  position: absolute;
  left: 0;
}

nav.active {
  width: 360px;
}

nav.active+.section-wrapper {
  transform: translateX(280px);
}

#sidebar {
    position: relative;
    width: 180px;
    height: 100vh;
    left: -200px;
    transition: 0.4s;
    z-index: 2;
    margin-right: 80px;
    padding: 20px;
}

nav.active #sidebar {
  left: 0;
}

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

#sidebar li {
  list-style: none;
}

#navText h2:first-of-type{
    padding: 0;
}
#sidebar h2 {
    padding: 10px;
    font-size: 14px;
}

#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;
}

.toggle-btn {
    width: 80px;
    position: absolute;
    right: 0;
    z-index: 1;
  border-left: 1px solid #1a1a1a;
}

#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);
    font-size: 7px;;
    color: #fff;
}

 <main>
        <nav>
          <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>
          <div id="sidebar">
            <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>
        <div class="section-wrapper">
          <section class="section-overview" id="overview">
              <div class="row">
                <h2>Section 1</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
              </div>
          </section>
          <section class="section-overview" id="overview">
              <div class="row">
                <h2>Section 2</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
              </div>
          </section>
          <section class="section-overview" id="overview">
              <div class="row">
                <h2>Section 3</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
              </div>
          </section>
          <section class="section-overview" id="overview">
              <div class="row">
                <h2>Section 4</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil inventore porro illum, numquam expedita debitis veritatis quod? Inventore, optio. Vitae nihil consequatur error provident in, maxime earum dolores rerum aliquam sed magnam quibusdam harum nam. Modi rem eligendi saepe, atque sequi similique itaque voluptas a illum, placeat mollitia obcaecati praesentium? </p>
              </div>
          </section>
        </div>
      </main>

顺便说一下，这就是我分叉的笔。希望对您有所帮助https://codepen.io/anon/pen/JVEYQM