Question

我正在尝试在网格布局上构建侧边栏菜单。问题是当菜单关闭时，主要部分不会填满其空间。

我也尝试过使用flexbox布局而失败了。这是我的代码;

编辑：正如Paulie_D在评论中解释的那样，我将完整的代码添加到片段中。我想在问这个问题的时候要粘贴这个太多了。

＆＃13;

const hamburger = document.querySelector('.hamburger');
const section = document.querySelector('.section');
const sidebar = document.querySelector('.sidebar');

hamburger.addEventListener('click', openSidebar);

function openSidebar (e) {
  // Toggles active hamburger class
  this.classList.toggle('is-active');
  
  // checks the sidebar is open or not and regulates the margin-left according to that
  if (sidebar.classList.contains('is-open')) {
    section.style['margin-left'] = 'calc(100vw / 12 * -3)';
  } else {
    section.style['margin-left'] = '0px';
  }
  
  // Toggles sidebar open class
  sidebar.classList.toggle('is-open');
}

＆＃13;

*, *::before, *::after {
  margin: 0;
}

body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-perspective-origin: left;
          perspective-origin: left;
}

.sidebar {
  grid-column: 1 / 4;
  background: #1d1f21;
  color: #FFF;
  min-height: 100vh;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  -webkit-transform-origin: left;
          transform-origin: left;
  transition: all 400ms ease-in-out;
}

.section {
  grid-column: 4 / -1;
  transition: all 400ms ease-in-out;
  /* Sidebar takes 3fr so this calculation makes the bar responsive doesn't look good in lower widths but can add media queries for that  */
  margin-left: calc(100vw / 12 * -3);
}

.content {
  padding: 2em;
}

.title {
  padding: 1em;
  border-bottom: 2px solid #35393c;
}

.menu {
  list-style-type: none;
  padding-left: 0;
}

.menu-item {
  position: relative;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-perspective-origin: right;
          perspective-origin: right;
}

.menu-link {
  text-decoration: none;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em 0;
  transition: background 300ms;
}
.menu-link:hover {
  background: #35393c;
}

.box {
  background: #33FF00;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -100%;
  left: 100%;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  -webkit-transform-origin: left;
          transform-origin: left;
  transition: all 400ms cubic-bezier(0, 0.46, 0.32, 1.23);
}
.box:hover {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.menu-link:hover ~ .box {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.hamburger {
  display: block;
  background: #33CC99;
  position: relative;
  height: 50px;
  width: 50px;
  transition: all 200ms ease-in-out;
  /* span ends */
}
.hamburger span {
  position: absolute;
  background: #1d1f21;
  display: block;
  height: 3px;
  left: 5px;
  right: 5px;
  transition: all 200ms ease-in-out;
}
.hamburger span:first-of-type {
  top: 12px;
}
.hamburger span:nth-child(2) {
  top: 24px;
}
.hamburger span:last-of-type {
  bottom: 12px;
}
.hamburger:hover {
  background: #5cd6ad;
  cursor: pointer;
}

.is-active span {
  background: #35393c;
}
.is-active span:first-child {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 24px;
}
.is-active span:nth-child(2) {
  left: 100%;
  right: 0;
}
.is-active span:last-child {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  bottom: 24px;
}

.is-open {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

＆＃13;

<aside class="sidebar">
  <h2 class="title">ResoGuy's Side Menu</h2>
  
  <ul class="menu">
    <li class="menu-item">
      <a href="#" class="menu-link">Home</a>
      <span class="box">Content</span>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-link">Blog</a>
      <span class="box">Content</span>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-link">About</a>
      <span class="box">Content</span>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-link">Contact</a>
      <span class="box">Content</span>
    </li>
  </ul>
</aside>

<section class="section">
  <div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  
  <div class="content">
    <h3>Here is the content</h3><hr>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore harum ad fugiat voluptas autem aut earum facere adipisci sint similique enim, blanditiis asperiores praesentium libero vitae, pariatur rerum, ex commodi!</p>
  </div>
</section>

＆＃13;

Answer 1

您可以使用margin-left偏移量。如果你事先不知道宽度，将需要javascript。

＆＃13;

function toggle() {
  let sidebar = document.querySelector("#sidebar");
  sidebar.classList.toggle("open")
}

＆＃13;

aside {
  background-color: blue;
  height: 100vh;
  width: 200px;
  left: 0;
  transition: all 1s;
  //display: inline-block;
  float: left;
}

.body {
  //display: inline-block;
  background-color: orange;
}

.open { 
  margin-left: -200px;
}

html, body {
  padding:0;
  margin: 0;
}

＆＃13;

<aside id="sidebar" class"open">
  sidebar
</aside>

<div class="body">
  <button onclick="toggle()">toggle</button>
  <br/>
  some other text
</div>

＆＃13;

在网格布局中使用rotate3d动画的侧边栏

1 个答案: