时间戳

首页 > 解决方案 > 如何防止我的菜单移动页面中的其他元素？

javascript - 如何防止我的菜单移动页面中的其他元素？

问题描述

我有一个显示一些图表的页面，并且我已经建立了一个菜单来跳转到页面上的精确图表。

我想设置一个弹出菜单，但行为不如预期。

我已经尝试过相对的、绝对的、固定的画布，但它总是在移动。任何想法 ？

编辑：由 Gabriel 解决，见下文。需要添加：位置：绝对；在 .toggleSidebar #sidebar

document.querySelector("#MenuToggle").addEventListener('click', function(event) {
  document.body.classList.toggle('toggleSidebar');
});

const myChart = new Chart(
  document.getElementById('myChart'), {
    type: 'bar',
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        borderWidth: 1,
      }]
    }
  }
);
#sidebar {
  float: left;
  position: sticky;
  top: 60px;
}

#main {
  margin-left: 320px;
}

#header {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 40px;
}

#wrapall {
  padding-top: 60px
}

.chart-container {
  background-color: #fff;
  border-radius: 8px;
  position: relative;
  margin: auto
}

.toggleSidebar #sidebar {
  display: none;
}

.toggleSidebar #main {
  margin-left: 0;
}

@media screen and (max-width: 820px) {
  #MobileMenuToggle {
    display: inline-flex;
  }
  #sidebar {
    display: none;
  }
  .toggleSidebar #sidebar {
    display: initial;
    z-index: 999;
  }
  #main {
    margin-left: 0;
  }
}
<head>
  <!-- <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="responsive.css"> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>

<body>
  <header>
    <div id="header">
      <div class="header" id="MenuToggle">click me</div>
    </div>
  </header>
  <div id="wrapall">
    <div id="sidebar">
      <div id="sidebarContent">
        my insane menu
        <aside>
          <div>graph1</div>
          <div>graph2</div>
          <div>graph3</div>
          <div>graph4</div>
          <div>graph5</div>
          <div>graph6</div>
          <div>graph7</div>
          <div>graph8</div>
        </aside>
      </div>
    </div>
    <div id="main">
      <section id="page">
        <main>
          <article>
            insane graph 1
            <div class="chart-container">
              <canvas class="chart" id="myChart"></canvas>
            </div>
          </article>
          <article>
            insane graph 2
          </article>
          <article>
            insane graph 3
          </article>
        </main>
      </section>
    </div>
  </div>
</body>

标签： javascriptcssflexboxchart.js

解决方案

如果您想要一个反应式侧面菜单，请确保您适当地调整。

如果要链接到片段 ID，请确保添加指向部分 ID 的锚点。

document.querySelector("#MenuToggle").addEventListener('click', function(event) {
  document.body.classList.toggle('toggleSidebar');
});

const myChart = new Chart(
  document.getElementById('myChart'), {
    type: 'bar',
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        borderWidth: 1,
      }]
    }
  }
);
#header {
  display: flex;
  align-items: center;
}

#wrapall {
  display: flex;
  background: red;
}

#sidebar {
  display: flex;
  background: green;
  padding: 0.5em;
}

#main {
  display: flex;
  padding: 0.5em;
}

.chart-container {
  background: #FFF;
}

.toggleSidebar #sidebar {
  display: none;
}

.toggleSidebar #main {
  margin-left: 0;
}

@media screen and (max-width: 820px) {
  #MobileMenuToggle {
    display: inline-flex;
  }
  #sidebar {
    display: none;
  }
  .toggleSidebar #sidebar {
    display: initial;
    z-index: 999;
  }
  #main {
    margin-left: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<header>
  <div id="header">
    <div class="header" id="MenuToggle">click me</div>
  </div>
</header>
<div id="wrapall">
  <div id="sidebar">
    <div id="sidebarContent">
      my insane menu
      <aside>
        <div><a href="#graph-1">graph1</a></div>
        <div><a href="#graph-2">graph2</a></div>
        <div><a href="#graph-3">graph3</a></div>
        <div><a href="#graph-4">graph4</a></div>
        <div><a href="#graph-5">graph5</a></div>
        <div><a href="#graph-6">graph6</a></div>
        <div><a href="#graph-7">graph7</a></div>
        <div><a href="#graph-8">graph8</a></div>
      </aside>
    </div>
  </div>
  <div id="main">
    <section id="page">
      <main>
        <article id="graph-1">
          insane graph 1
          <div class="chart-container">
            <canvas class="chart" id="myChart"></canvas>
          </div>
        </article>
        <article id="graph-2">
          insane graph 2
        </article>
        <article id="graph-3">
          insane graph 3
        </article>
      </main>
    </section>
  </div>
</div>

推荐阅读