Question

我想使我的网站上的侧边栏仅在大屏幕设备上可见，并且默认情况下在中小型设备上隐藏，并使其显示一个按钮，我希望该站点具有相同的行为：{{ 3}}

我输入了以下代码：

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

如果您要使用@media (max-width: 540px)定位移动设备，请在display: none定义中添加.side-panel。

否则，添加一个新的媒体查询

@media (max-width: 375px) {
  .side-panel {
    position: absolute;
    display: none;
  }
}

Answer 2

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

编辑：侧边栏固定位置。

/* 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>

隐藏中小屏幕设备上的侧边栏

2 个答案: