代码之家 › 专栏 › 技术社区 › Velugoti Venkateswarlu

如何在css网格布局中扩大一列宽度,而另一列收缩?

grid-layout navbar css html javascript

Velugoti Venkateswarlu · 技术社区 · 1 年前

我创建了一个侧导航栏和一个主要内容区域。我使用display:grid将这些元素排列在网格布局中,列设置为200px。我还编写了一个JavaScript脚本来切换类列表。当我单击切换按钮时,侧面导航会缩小,但主要内容区域的宽度保持不变。如何使主要内容区域填满整个宽度?

function toggleSidebar() {
    const sidebar = document.querySelector('.sidebar');
    sidebar.classList.toggle('shrink');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 100vh;
}

.container {
    display: grid;
    grid-template-columns: 200px minmax(0,1fr); /* Sidebar takes 200px, main content takes remaining space */
    height: 100%;
    grid-template-rows: 1fr; /* Only one row for this layout */
}

.sidebar {
    background-color: #333;
    color: white;
    padding: 15px;
    overflow: hidden;
    transition: width 0.3s ease-in-out; /* Transition effect for shrinking */
}

.sidebar ul {
    list-style-type: none;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
}

.main-content {
    background-color: red;
    padding: 20px;
    overflow: auto;
}

.sidebar.shrink {
    width: 50px; /* Shrinks the sidebar width to 50px */
}

.sidebar.shrink ul {
    display: none; /* Hide the links when the sidebar is shrunk */
}

.main-content {
    transition: margin-left 0.3s ease-in-out; /* Adjust content area when sidebar shrinks */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <button onclick="toggleSidebar()">Toggle Sidebar</button>
    <div class="container">
        <nav class="sidebar">
            <!-- Side Navigation Content -->
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <main class="main-content">
            <!-- Main Content Area -->
            <h1>Welcome to the main content area</h1>
            <p>This area should adjust its size based on the sidebar.</p>
        </main>
    </div>
 

</body>
</html>

2 回复 | 直到 1 年前

Sowmo0509 1 年前

你需要一个新的 shrink 类,以确保当您关闭侧边栏时,它是通过JavaScript注入的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Sidebar Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="toggle-button" onclick="toggleSidebar()">Toggle Sidebar</button>
    <div class="container">
        <nav class="sidebar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <main class="main-content">
            <h1>Welcome to the main content area</h1>
            <p>This area should adjust its size based on the sidebar state.</p>
        </main>
    </div>
    <script src="script.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 100vh;
}

.toggle-button {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    padding: 10px 20px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

.toggle-button:hover {
    background-color: #555;
}

/* Container Grid Layout */
.container {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr); /* Sidebar width and main content fill */
    height: 100%;
    transition: grid-template-columns 0.3s ease-in-out;
}

/* Sidebar Styling */
.sidebar {
    background-color: #333;
    color: white;
    padding: 15px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.sidebar ul {
    list-style-type: none;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
}

/* Main Content Styling */
.main-content {
    background-color: red;
    padding: 20px;
    overflow: auto;
}

/* Hidden Sidebar State */
.container.shrink {
    grid-template-columns: 0 minmax(0, 1fr); /* Sidebar is hidden, main content takes full width as 0 column is stated here */
}

.sidebar.shrink {
    transform: translateX(-200px); /* Completely hide sidebar */
}

function toggleSidebar() {
    const container = document.querySelector('.container');
    const sidebar = document.querySelector('.sidebar');

    // Toggle classes to shrink/hide the sidebar
    container.classList.toggle('shrink');
    sidebar.classList.toggle('shrink');
}

Bernat 1 年前

要显示/隐藏侧边栏,您必须修改网格容器,而不是容器元素。

您需要修改的唯一CSS属性是 grid-template-columns 里面 .container CSS选择器:

.container {
  display: grid;
  grid-template-columns: 0 1fr;
}

.container.sidebar-opened {
  grid-template-columns: 200px 1fr;
}

下面我给你举一个平稳过渡的例子:

function toggleSidebar() {
  const container = document.querySelector(".container");
  container.classList.toggle("sidebar-opened");
}

.container {
  display: grid;
  grid-template-columns: 0 1fr;
  transition: grid-template-columns 300ms;
  height: 100svh;
}

.container.sidebar-opened {
  grid-template-columns: 200px 1fr;
}

/* Other non-related styles */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

aside {
  height: 100%;
  padding: 10px;
  background-color: wheat;
}

main {
  height: 100%;
  padding: 10px;
  background-color: lightblue;
}

button {
  position: fixed;
  top: 10px;
  right: 10px;
}

<div class="container">
  <aside>Sidebar</aside>
  <main>Main content</main>
</div>
<button onclick="toggleSidebar()">Toggle sidebar</button>