Как я могу предотвратить перемещение других элементов моего меню на странице?

ProgramBox

Как я могу предотвратить перемещение других элементов моего меню на странице?

Post author:admin
Запись опубликована:28 июня, 2022
Post category:Вопросы по программированию

#javascript #css #flexbox #chart.js

Вопрос:

У меня есть страница, на которой я показываю некоторые графики, и я создал меню для перехода к точному графику на странице.

Я хочу настроить всплывающее меню, но поведение не соответствует ожиданиям.

если ширина> 820 пикселей, поведение для меня нормально.
если @media screen и (максимальная ширина: 820 пикселей), я хочу, чтобы меню отображалось над графиками. Но мой код перемещает графики.

Я пробовал относительный, абсолютный, фиксированный для холста, но он всегда перемещается. Есть идеи?

РЕДАКТИРОВАТЬ: решаемая Габриэлем, см. Ниже. Необходимо добавить: position: absolute; in .toggleSidebar #боковая панель

 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>

1.вы пробовали ` .toggleSidebar #sidebar { отображение: начальное; z-индекс: 999; позиция: абсолютная; фон: rebeccapurple; }` внутри вашего @media screen and (max-width: 820px) { codepen.io/wyzix33/pen/VwzWvWg

2. Да, точно! Спасибо большое!!

Ответ №1:

Если вам нужно реактивное боковое меню, убедитесь, что вы правильно сгибаете.

Если вы хотите ссылаться на идентификатор фрагмента, обязательно добавьте привязки, которые указывают на идентификаторы разделов.

 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>