我需要我的导航栏来移动我的主页信息

Question

我正在尝试创建一个导航栏，如果您将鼠标悬停在导航图标上，它会将屏幕上的所有内容都移到右侧。我试图通过将导航栏设置为左侧 -250 像素并将其移动到如果您将鼠标悬停在导航图标上它会向右过渡相同数量的像素来实现此目的。我还尝试让 body 向右移动相同数量的像素，但除了导航栏之外没有任何移动。任何建议，真的会帮助很多提前谢谢你。 html代码：

<!DOCTYPE html>
<html>
<head>
    <link href="main_page.css" rel="stylesheet">
    <title>Cal's Blog</title>
</head>
<body>
        <nav>
            <div class="sideNav" id="sideNav">
                <div class="container">
                    <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                    <div class="navMenu">
                        <a href="#">about</a>
                        <a href="#">services</a>
                        <a href="#">clients</a>
                        <a href="#">contacts</a>
                    </div>
                </div>
            </div>
        </nav>
        <h1> Cal's Blog</h1>
</body>
</html>

css代码：

.container {
display: inline-block;
}

.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
position: relative;
}

.container:hover .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);

}

.container:hover .bar2 {
opacity: 0;
}

.container:hover .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.navMenu {
height: 100%;
width: 250px; 
position: absolute; 
z-index: 1; 
top: 0; 
left: -250px;
background-color: #111; 
overflow-x: hidden; 
padding-top: 60px; 
transition: 0.5s;
}
.navMenu a{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.navMenu a:hover{
color: #f1f1f1;
}
.container:hover .navMenu {
left: 0;
}
.container:hover .body {
left: 250px;
}

Answer 1

我确实对您的代码进行了一些重构。对于不需要使用position: absolute的解决方案，只需将菜单中的width更改为0，带有的导航框就会折叠.对于简单的触发器 javascript.

const menuBtn = document.querySelector('.menu-button');
const body = document.querySelector('body');

const openMenu = () => {
  body.classList.toggle('menu-open');
};
menuBtn.addEventListener('click', openMenu);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  display: flex;
  overflow-x: hidden;
}

nav {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1 0 0%;
  position: relative;
  gap: 15px;
  padding: 3rem 0;
  overflow: hidden;
  background-color: #111;
  transition: all 0.5s ease-in-out;
}

nav a {
  padding-left: 15px;
  text-decoration: none;
  font-size: 1.5em;
  color: #818181;
  transition: 0.3s;
}

nav a:hover {
  color: #f1f1f1;
}

body.menu-open nav {
  flex: 1 0 200px;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
  position: relative;
}

.menu-button {
  width: max-content;
  cursor: pointer;
}

.menu-button:hover .bar1,
body.menu-open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.menu-button:hover .bar2,
body.menu-open .bar2 {
  opacity: 0;
}

.menu-button:hover .bar3,
body.menu-open .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

main {
  flex: 1 1 100%;
  padding: 1rem;
}

<nav>
  <a href="#">about</a>
  <a href="#">services</a>
  <a href="#">clients</a>
  <a href="#">contacts</a>
</nav>
<main>
  <header>
    <div class="menu-button">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </header>
  <h1>Cal's Blog</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur ea, fugiat nostrum quod voluptates quo quibusdam rerum dolorem rem, odio cumque veritatis qui? Maxime delectus natus dignissimos est, voluptates dolores? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Facere repudiandae ipsum id illo recusandae officia assumenda voluptatem inventore dolor vero ipsa corporis, velit at architecto incidunt, ad eos nobis voluptatibus?
  </p>
</main>

我需要我的导航栏来移动我的主页信息

i need my nav bar to shift my main page info

html

css

navbar