我正在嘗試創建一個影片側邊欄。最初我有一個頂部導航欄、一個側邊欄和一個內容 div。側邊欄和內容 div 位于具有 display flex row 屬性的容器 div 內。我對過渡感到困惑。我希望側邊欄在單擊導航主頁時顯示和隱藏，這具有滑動效果。現在我有一個滑動側邊欄，但是當側邊欄隱藏時，內容 div 沒有獲得其父級的全寬。我怎樣才能做到這一點？我應該在 flex 還是在轉換上應用過渡？任何幫助表示贊賞。
<body>
<nav>
<ul>
<li><button id="home">Home</button></li>
<li><button>Services</button></li>
<li><button>Operations</button></li>
<li><button>About</button></li>
<li><button>Contact</button></li>
</ul>
</nav>
<div class="container">
<div id="sidebar" class="sidebar visible">
<ul>
<li><button>Inventories</button></li>
<li><button>Employees</button></li>
<li><button>Feedback</button></li>
<li><button>Projects</button></li>
</ul>
</div>
<div class="content" id="content">
LOrem issum dolor sit amet
</div>
</div>
</body>
nav{
width: 100%;
display: flex;
justify-content : center;
}
.container{
display: flex;
flex-direction: row;
}
.sidebar{
flex:1;
background-color: rgb(40,100,250);
height: 100vh;
transition: transform 0.5s linear;
transform: translatex(-100%);
}
.visible{
transform: translatex(0);
flex: 1;
}
.content{
background-color: rgb(33,31,31);
flex: 5;
text-align: center;
color: #fff;
transition: flex 0.5s ease-in-out;
}
.afterContent{
flex: 10;
}
const homeButton = document.getElementById("home");
const sidebarDiv = document.getElementById("sidebar");
const content = document.getElementById("content");
homeButton.addEventListener("click", () => {
if (sidebarDiv.classList.contains("visible")) {
sidebarDiv.classList.remove("visible");
if(!content.classList.contains("afterContent")){
content.classList.add("afterContent");
}
} else {
sidebarDiv.classList.add("visible");
if(content.classList.contains("afterContent")){
content.classList.remove("afterContent");
}
}
});
uj5u.com熱心網友回復：
問題是你只是變換元素，變換不會改變布局結構，它只會影響你應用變換的元素及其所有子元素。
通常要達到你想要的填充和位置的結果：絕對。
您有側邊欄元素，即position: absolute; top: 0; bottom: 0; left: 0;. 要隱藏它，您只需將其向左變換即可。然后你的內容元素用 padding-left 偏移選單。
這是一個簡單的演示：
<html>
<head>
<style>
html, body {margin: 0; padding: 0}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.body {
position: relative;
}
.sidebar {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
width: 300px;
transition: transform 0.2s;
}
.content {
padding-left: 300px;
min-height: 500px;
background-color: teal;
transition: padding-left 0.2s;
}
.menu-closed > .sidebar {
transform: translateX(-300px);
}
.menu-closed > .content {
padding-left: 0px;
}
</style>
</head>
<body>
<div class="header">header menu</div>
<div id="body" class="body">
<nav class="sidebar">sidebar menu</nav>
<div class="content"><button onclick="menu()">nav</button> content</div>
<div>
<script>
const body = document.getElementById("body");
let menuClosed = false;
function menu() {
menuClosed ? body.classList.remove("menu-closed") : body.classList.add("menu-closed");
menuClosed = !menuClosed;
}
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/322087.html
標籤：javascript html css