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

Question

I have a page where I show some graphs, and I've built a menu to jump to a precise graph on the page.我有一个页面，我在其中显示了一些图表，并且我建立了一个菜单来跳转到页面上的精确图表。

I want to setup a popup menu but behavior is not as expected.我想设置一个弹出菜单，但行为不符合预期。

if width > 820px, behavior is ok for me.如果宽度 > 820px，行为对我来说没问题。
if @media screen and (max-width: 820px), I want the menu to appear above the graphs.如果@media screen 和（最大宽度：820px），我希望菜单出现在图表上方。 But my code moves the graphs.但是我的代码移动了图表。

I've tried relative, absolute, fixed for the canvas, but it always move.我试过相对、绝对、固定的画布，但它总是移动。 Any Idea ?任何的想法？

EDIT : Solved by Gabriel, see under.编辑：由加布里埃尔解决，见下文。 Need to add : position: absolute;需要补充：位置：绝对； in .toggleSidebar #sidebar在 .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>

Answer 1

If you want a reactive side-menu, make sure you flex appropriatey.如果你想要一个反应式的侧菜单，确保你适当地弯曲。

If you want to link to a fragment ID, make sure to add anchors that point to the section IDs.如果要链接到片段 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>

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

问题描述

1 个解决方案

解决方案1
1 2021-10-27 16:59:14

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

问题描述

1 个解决方案

解决方案1 1 2021-10-27 16:59:14

解决方案1
1 2021-10-27 16:59:14