时间戳

首页 > 解决方案 > 我需要我的导航栏来转移我的主页信息

html - 我需要我的导航栏来转移我的主页信息

问题描述

我正在尝试创建一个导航栏，如果您将鼠标悬停在导航图标上，它会将屏幕上的所有内容向右移动。我试图通过将导航栏向左设置-250 px 并将其设置到如果您将鼠标悬停在导航图标上，它将以相同数量的像素过渡到右侧。我还尝试让身体向右移动相同数量的像素，但除了导航栏之外没有任何移动。任何建议，真的会帮上大忙，提前谢谢你。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;
}

标签： htmlcssnavbar

解决方案

I did refactor a bit your code. For the solution no need to use position: absolute, just change the width in the menu to 0 and the nav box with will be collapse. And for a trigger simple 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>

推荐阅读