滑動側邊欄在內容下方打開
[英]Sliding sidebar opens underneath content
問題描述
我試圖弄清楚如何讓這個側邊欄工作，但是當我通過較小屏幕中的漢堡菜單打開它時，側邊欄會在內容下方打開。 我怎樣才能解決這個問題？ 我嘗試按照教程創建此側邊欄，但顯然當我嘗試添加自己的東西時我搞砸了，我不知道該怎么做。 我一直在玩 CSS 中的元素，但結果還是一樣。
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Fire Sans", sans-serif; } .app { display: flex; min-height: 100vh; background-image: url(../site/images/bg2.jpeg); } .sidebar { flex: 1 1 0; max-width: 300px; padding: 2rem 1rem; background-color: #053853; } .sidebar h3 { color: #f6da9b; font-size: 0.75 rem; text-transform: uppercase; margin-bottom: 0.5em; } .sidebar .menu { margin: 0 -1rem; } .sidebar .menu .menu-item { display: block; padding: 1em; color: #fff; text-decoration: none; transition: 0.2 linear; } .sidebar .menu .menu-item:hover, .sidebar .menu .menu-item.is-active { color: #3bba9c; border-right: 5px solid #3bba9c; } .content { flex: 1 1 0; padding: 2rem; margin: 4rem; width: 60%; border: 3px solid #e9d397; text-align: center; border-radius: 10px; backdrop-filter: blur(10px); } .content h1 { color: #fff; font-size: 2.5rem; margin-bottom: 1rem; } .content p { color: #fff; } .menu-toggle { display: none; position: fixed; top: 2rem; right: 2rem; width: 60px; height: 60px; border-radius: 99px; background-color: #2e3047; cursor: pointer; } .hamburger { position: relative; top: calc(50% - 2px); left: 50%; transform: translate(-50%, -50%); width: 32px; } .hamburger > span, .hamburger > span::before, .hamburger > span::after { display: block; position: absolute; width: 100%; height: 4px; border-radius: 99px; background-color: #fff; transition-duration: 0.25s; } .hamburger > span::before { content: ""; top: -8px; } .hamburger > span::after { content: ""; top: 8px; } .menu-toggle.is-active .hamburger > span { transform: rotate(45deg); } .menu-toggle.is-active .hamburger > span::before { top: 0; transform: rotate(0deg); } .menu-toggle.is-active .hamburger > span::after { top: 0; transform: rotate(90deg); } @media (max-width: 1024px) { .sidebar { max-width: 200px; } } @media (max-width: 768px) { .menu-toggle { display: block; } .content { padding: 2rem; margin-top: 8rem; } .sidebar { position: fixed; top: 0; left: -300px; height: 100vh; width: 100%; max-width: 300px; transition: 0.2 linear; } .sidebar.is-active { left: 0; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Sidebar</title> <link rel="stylesheet" href="style3.css" /> </head> <body> <div class="app"> <div class="menu-toggle"> <div class="hamburger"> <span></span> </div> </div> <aside class="sidebar"> <h3>Javascript</h3> <nav class="menu"> <a href="#" class="menu-item is-active">Home</a> <a href="#" class="menu-item">Week 1</a> <a href="#" class="menu-item">Week 2</a> <a href="#" class="menu-item">Week 3</a> <a href="#" class="menu-item">Week 4</a> <a href="#" class="menu-item">Week 5</a> <a href="#" class="menu-item">Week 6</a> <a href="#" class="menu-item">Week 7</a> <a href="#" class="menu-item">Week 8</a> <a href="#" class="menu-item">Week 9</a> <a href="#" class="menu-item">Week 10</a> </nav> </aside> <main class="content"> <h1>Welcome, Human!</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquid impedit tenetur nam, vitae fugiat doloremque ut incidunt inventore quam qui laboriosam! Esse recusandae a inventore aliquam! Distinctio, expedita hic?</p> </main> </div> <script> const menu_toggle = document.querySelector('.menu-toggle'); const sidebar = document.querySelector('.sidebar'); menu_toggle.addEventListener('click', () => { menu_toggle.classList.toggle('is-active'); sidebar.classList.toggle('is-active'); }) </script> </body> </html>
1 個解決方案
解決方案1
3 已采納 2022-06-02 21:25:52
您可以嘗試為側邊欄提供比內容更高的z-index嗎？
.sidebar {
z-index: 2;
}
.content {
z-index: 1;
}
為什么我的側邊欄被推到主頁內容下方？ （再次）
[英]Why is my sidebar getting pushed underneath the main page content? (Again)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.