js和css打开侧边栏的时候不想推送内容，如何独立
[英]I don't want to push the contents when sidebar is opened in js and css. How to make it independent
问题描述
Please find the below code CSS and JavaScript. when sidebar is opened its pushing the main content.
请找到下面的代码 CSS 和 JavaScript。打开侧边栏时会推送主要内容。 I wanted it to be independent of it.我希望它独立于它。 Added the javascript code can anyone help me with this?添加了 javascript 代码 谁能帮我解决这个问题？
function ExpandDrawer() { const drawerContent = document.querySelector(".drawerContent"); drawerContent.classList.toggle("active"); }
body {background-color: powderblue;} h1 {color: blue;} p {color: red;}.drawerLayer { min-height: 100vh; justify-content: center; align-items: center; float: right; z-index: 2; }.container { position: relative; }.container.drawerContent { position: relative; width: 80px; height: 420px; background: rgb(0,125,187); background: linear-gradient(161deg, rgba(0,125,187,1) 0%, rgba(112,188,224,1) 100%); border-top-left-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transition: 0.5s; }.container.drawerContent.active { width: 300px; overflow-y: scroll; }.toggle { position: absolute; top: calc(50% - 85px); left: -20px; width: 20px; height: 32px; background: rgb(0,125,187); background: linear-gradient(161deg, rgba(0,125,187,1) 0%, rgba(112,188,224,1) 100%); cursor: pointer; border: 1px solid rgba(0,125,187,1); border-radius: 64px 0 0 64px; justify-content: center; align-items: center; }.toggle:before { content: '\e909'; font-family: "font-awesome"; height: 100%; width: 100%; line-height: 30px; position: absolute; text-align: center; font-weight: 900; font-size: 16px; color: rgba(112,188,224,1); }.toggle.active:before { content: '\e909'; }
<center> <h1>This is a heading</h1> <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd.</p> <div class="container drawerLayer"> <div class="drawerContent"> <h3>Hi</h3> </div> <div class="toggle" onClick="ExpandDrawer()"> </div> </div> <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd.</p> </center>
can anyone help please?有人可以帮忙吗？
1 个解决方案
解决方案1
0 2022-10-11 08:24:55
Should make something position: absolute probably to make it out of flow of documet elements placement.应该做一些事情position: absolute可能使它脱离文档元素放置的流程。
function ExpandDrawer() { const drawerContent = document.querySelector(".drawerContent"); drawerContent.classList.toggle("active"); }
body { background-color: powderblue; } h1 { color: blue; } p { color: red; }.drawerLayer { min-height: 100vh; justify-content: center; align-items: center; float: right; z-index: 2; }.container { position: absolute; right: 0; }.container.drawerContent { position: relative; width: 80px; height: 420px; background: rgb(0, 125, 187); background: linear-gradient(161deg, rgba(0, 125, 187, 1) 0%, rgba(112, 188, 224, 1) 100%); border-top-left-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transition: 0.5s; }.container.drawerContent.active { width: 300px; overflow-y: scroll; }.toggle { position: absolute; top: calc(50% - 85px); left: -20px; width: 20px; height: 32px; background: rgb(0, 125, 187); background: linear-gradient(161deg, rgba(0, 125, 187, 1) 0%, rgba(112, 188, 224, 1) 100%); cursor: pointer; border: 1px solid rgba(0, 125, 187, 1); border-radius: 64px 0 0 64px; justify-content: center; align-items: center; }.toggle:before { content: '\e909'; font-family: "font-awesome"; height: 100%; width: 100%; line-height: 30px; position: absolute; text-align: center; font-weight: 900; font-size: 16px; color: rgba(112, 188, 224, 1); }.toggle.active:before { content: '\e909'; }
<center> <h1>This is a heading</h1> <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd. </p> <div class="container drawerLayer"> <div class="drawerContent"> <h3>Hi</h3> </div> <div class="toggle" onClick="ExpandDrawer()"> </div> </div> <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd. </p> </center>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我希望默认打开第一个 li，当我单击打开的“a”标签时，ul 后面的不关闭 - I want the first li be opened by default and when I click on an "a" tag that is opened the ul following don't close
如何在 HTML CSS 中使我的滚动始终位于页面的末尾。 我希望我的卷轴总是在页面的末尾 - How do I make my scroll always in the end of the page in HTML CSS. I want my scroll to always be at the end of the page
Webpack.config.js 文件缩小 js 和 css。 - 使用 webpack 时如何缩小 js 和 css 文件？ - Webpack.config.js file minify js and css. - How to minify js and css files when using webpack?
如何仅使用JS或CSS动态更改页面上的colspan。 - How do I change the colspan dynamically on page using only JS or CSS.
如果我想使用开放源代码项目中的CSS，但又不想使用JS，反之亦然，那么Bower中是否有任何机制可以使它自动化？ - If I want to use the CSS from an open source project, but I don't want the JS, or vice versa, is there any mechanism in Bower to automate this?
我是 CSS 的新手。 如何将 CSS 应用于此 JS Fetch 代码以更改文本 position，字体？ - I am new to CSS. How do I apply CSS to this JS Fetch code to alter text position, font?
当我不想打开fancybox - fancybox opening when I don't want it to
Nginx：我想http2_push目录中的所有js和css文件怎么办？ - Nginx: I want to http2_push all js and css files in a directory how can I do?
如何修复“页面加载时打开的侧边栏”？ - How to fix “Opened sidebar when page is loaded”?
尝试制作 DM 记录器。 当我发送附件时，他们不想发送 - Trying to make DM logger. When I send attachments, they don't want to send
相关标签