javascript - 在中小屏幕设备上隐藏侧边栏

Question

我想让我网站上的侧边栏只在大屏幕设备上可见，而在中小尺寸设备上默认隐藏并制作一个按钮来显示它，我想要这个网站的相同行为:https://colorlib.com/preview/theme/elen/index.html

我写了这段代码:

HTML:

<template>
  <div id="app">
    <div class="main-container">
      <div class="side-panel">
        <div class="side-panel bg-golden h-100">
          <div class="container h-100">
            <div class="row h-100 pt-5 justify-content-center align-items-center">
              <div class="col-12 text-center text-secondary">
                <h5>AYMAN TARIG</h5>
                <ul class="list-group pt-5 pb-4">
                  <li class="list-group-item bg-transparent">HOME</li>
                  <li class="list-group-item bg-transparent">ABOUT</li>
                  <li class="list-group-item bg-transparent">ARTICLES</li>
                  <li class="list-group-item bg-transparent">CONTACT</li>
                </ul>
                <div id="footer">
                  <h6 class="pt-5">Copyright ©2019 All rights reserved | Ayman Tarig</h6>
                  <h6 class="pt-4">
                    <i class="fab fa-facebook-f p-2"></i>
                    <i class="fab fa-google-plus-g p-2"></i>
                  </h6>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div id="background" class="h-100">
          <div class="container p-5 h-100">
            <div class="row h-100 justify-content-center align-items-center">
              <div class="col-12">
                <h3 class="text-center text-dark pt-4">AYMAN TARIG</h3>
                <h6
                  class="text-center text-secondary pb-4"
                >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos, officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

CSS:

<style scoped>
.main-container {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

h1 {
  text-decoration: underline #3a3939;
}
#background {
  background: url("./imgs/80911.jpg");
  background-size: cover;
}

h2 > i {
  cursor: pointer;
}

.side-panel {
  position: fixed;
  height: 100vh;
  width: 25%;
}

ul {
  list-style: none;
}

li:hover {
  background-color: #eeeeee !important;
  color: #02131f !important;
}

i:hover {
  color: #ffffff;
}

.bg-golden {
  background-color: #02131f;
}

.content {
  width: 100%;
  margin-left: 25%;
}

@media (max-width: 540px) {
  .main-container {
    display: block;
    flex-wrap: wrap;
  }

  .content {
    width: 100%;
    margin-left: 0;
  }

  .side-panel {
    position: static;
    width: 100%;
    min-height: 250px;
    height: auto;
  }

  #footer {
    display: none;
  }
}
</style>

谁能帮我改一下我的代码和成就

Answer 1

我正在做类似的事情，您需要调整代码以满足您的需要:

编辑 边栏固定位置。

/* JS */

var sidebar = $("#sidebar");
var hamburger = $('#navTrigger');

hamburger.click(function(e) {
  e.preventDefault();
  $(this).toggleClass('is-active');
  // This will add `sidebar-opened`
  $('#wrapper').toggleClass("sidebar-opened");
  // Remove magin left
  sidebar.toggleClass('ml-0');
});

/* CSS */

body {
  overflow-x: hidden;
}


/* Sidebar */

#sidebar {
  -webkit-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
  padding: 15px;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
}

#content {
  -webkit-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

.sidebar-opened #content {
  margin-left: 250px;
}

@media (max-width: 992px) {
  #sidebar {
    margin-left: -251px;
  }
}

@media (min-width: 992px) {
  #content {
    margin-left: 250px;
  }
}


/* Hamburger Menu */

.nav-trigger {
  cursor: pointer;
  width: 45px;
  height: 45px;
  padding: 1rem;
  display: inline-block;
  z-index: 999;
  position: absolute;
  right: -45px;
  top: 0;
}

.nav-trigger:hover .hamburger {
  transition: transform 50ms;
  transform: scale(.95);
}

.nav-trigger .hamburger {
  position: relative;
  width: 45px;
  height: 45px;
  transition: transform 500ms ease-in-out;
}

.nav-trigger .hamburger::before,
.nav-trigger .hamburger::after,
.nav-trigger .hamburger .hamburger-icon {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background: #222;
  transform-origin: 100% 50%;
  transition: transform .5s;
}

.nav-trigger .hamburger::before {
  top: 5px;
}

.nav-trigger .hamburger::after {
  top: 17px;
}

.nav-trigger .hamburger .hamburger-icon {
  width: 25px;
  top: 11px;
  transform-origin: 50% 50%;
}

.nav-trigger.is-active .hamburger::before,
.nav-trigger.is-active .hamburger::after,
.nav-trigger.is-active .hamburger .hamburger-icon {
  background: #222;
}

.nav-trigger.is-active .hamburger::before {
  transform: translate3d(-5px, 0px, 0) rotateZ(-45deg);
}

.nav-trigger.is-active .hamburger .hamburger-icon {
  transform: rotateY(-90deg);
}

.nav-trigger.is-active .hamburger::after {
  transform: translate3d(-5px, 5px, 0) rotateZ(45deg);
}


/* Navbar */

.navbar-link {
  padding: .5rem 1rem;
  display: block;
  color: #fff
}

.navbar-link:hover {
  background-color: #eeeeee;
  color: #02131f;
  text-decoration: none;
}

i:hover {
  color: #fff;
}


/* Content */

.bg-golden {
  background-color: #02131f;
  color: #fff
}

.bg-fullscreen {
  background-image: url(https://via.placeholder.com/1280x720.png/DCDCDC/fff);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: relative;
  background-attachment: scroll;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div id="app">
  <div class="main-container" id="wrapper">
    <div class="d-flex vh-100">

      <!-- Sidebar -->
      <aside id="sidebar" class="side-panel d-flex flex-column h-100 bg-golden">
        <!-- d-lg-none will hide the button on medium and large screens -->
        <a id="navTrigger" class="d-lg-none nav-trigger" role="button" title="sweet hamburger">
          <span class="hamburger">
							<span class="hamburger-icon"></span>
          </span>
        </a>
        <h5 class="sidebar-heading mt-5">AYMAN TARIG</h5>
        <ul class="navbar-nav bd-navbar-nav py-5">
          <li class="nav-item"><a class="navbar-link" href="#">HOME</a></li>
          <li class="nav-item"><a class="navbar-link" href="#">ABOUT</a></li>
          <li class="nav-item"><a class="navbar-link" href="#">ARTICLES</a></li>
          <li class="nav-item"><a class="navbar-link" href="#">CONTACT</a></li>
          </li>
        </ul>
        <div id="footer" class="mt-auto">
          <small class="">Copyright ©2019 All rights reserved | Ayman Tarig</small>
          <p class="pt-4">
            <i class="fab fa-facebook-f p-2"></i>
            <i class="fab fa-google-plus-g p-2"></i>
          </p>
        </div>
      </aside>

      <!-- Content -->
      <div id="content" class="w-100">
        <!-- seciton 1 -->
        <div id="background" class="bg-fullscreen h-100">
          <div class="container p-5 d-flex h-100">
            <div class="row justify-content-center align-items-center">
              <div class="col-12">
                <h3 class="text-center text-dark pt-4">AYMAN TARIG</h3>
                <h6 class="text-center text-secondary pb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
                  officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
        <!-- seciton 2 -->
        <div class="section-2 bg-warning" style="height: 1000px">
          <div class="container p-5 d-flex h-100 text-center">
            <div class="row justify-content-center align-items-center">
              <div class="col-12">
                <h2 class="display-4">Another section</h2>
                <h6 class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
                  officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
        <!-- seciton 3 -->
        <div class="section-3 bg-info" style="height: 1000px">
          <div class="container p-5 d-flex h-100 text-center">
            <div class="row justify-content-center align-items-center">
              <div class="col-12">
                <h2 class="display-4">Another section</h2>
                <h6 class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
                  officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>