我怎样才能使这个过渡工作并让汉堡包图标保持在顶部？

Question

我是编程新手，几个月前才开始，但在尝试创建投资组合页面时，我看过其他人的示例，并尝试创建自己的示例。我的问题是我正在尝试使用汉堡包图标转换导航栏，这是有效的，但我已将导航栏设置为固定（这也有效）并跨越视口，这不起作用。元素的宽度和高度与我的列表元素一样多。我看不出问题出在哪里，当我切换 class 时，即单击按钮关闭导航栏它不会转换它只是消失。我会在这里传递我的代码，如果有人能给我提示，我会很高兴。另外，我在右边有汉堡包图标，在左边有标题，我想始终保持在顶部，添加 z-index 但它不起作用..谢谢，如果我没有把我的问题说得很清楚，我深表歉意.

HTML代码

<body>
    <div>
        <!-- create navbar with hamburger icon -->
        <nav class="navbar">
            <h2 class="myName">this.szabi<span class="braces">( )</span></h2>
            <div class="menu-btn">
                <div id="menuButtonBurger"></div>
            </div>            
        </nav>
        <div class="info">
            <ul>
                <li><a href="#about">About Me</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>           
            </ul>
        </div>
        <section id="about"></section>
        <!-- create a small introduction place with a picture -->
        <!-- create a div for technologies ive learnt -->
        <!-- create a div to place my projects -->
        <!-- create a div for contact information, social icons -->
        <!-- create a footer -->
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>

CSS代码

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  background-color: transparent;
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: space-between;
}

.myName {
  font-family: Comfortaa;
  font-weight: 500;
  color: #f05454;
  z-index: 101;
}

.braces {
  font-size: 2rem;
}

.menu-btn {
  position: relative;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #f05454;
  border-radius: 50%;
  z-index: 102;
}

#menuButtonBurger {
  width: 2rem;
  height: 0.25rem;
  background-color: #f05454;

  border-radius: 5px;
}

#menuButtonBurger::before,
#menuButtonBurger::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 0.25rem;
  background-color: #f05454;

  border-radius: 5px;
}

#menuButtonBurger::before {
  transform: translateY(-8px);
}

#menuButtonBurger::after {
  transform: translateY(8px);
}

.info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: -webkit-linear-gradient(-45deg, #000000, #434343);
  background: linear-gradient(-45deg, #000000, #434343);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: Comfortaa, Helvetica, sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 2.5;
  z-index: 100;
  transform: translateX(1500px);
}

.info .open {
  background: -webkit-linear-gradient(-45deg, #000000, #434343);
  background: linear-gradient(-45deg, #000000, #434343);
  transform: translateX(-1500px);
  transition: all 500ms linear;
}

.info ul li {
  list-style: none;
}

.info li a,
.info li a:link,
.info li a:visited,
.info li a:active {
  text-decoration: none;
  color: #fff;
}

.info li a:hover {
  color: #f05454;
}

/* change it */
#about {
  width: 100%;
  height: 1000px;
  background-color: teal;
}

JavaScript代码

const hamburger = document.querySelector('.menu-btn');
const info = document.querySelector('.info');
const list = document.querySelector('ul');

hamburger.addEventListener('click', menuToggle);

function menuToggle() {
    console.log('clicked')
    info.classList.toggle('open');
    list.classList.toggle('open');
}

Answer 1

The width and the height of the element is just as much as my list elements.

是的，这是 div 中元素的默认行为。要更改它，请在现有 CSS 部分中为 info div 定义自定义宽度，就像这样：

.info .open {
  background: -webkit-linear-gradient(-45deg, #000000, #434343);
  background: linear-gradient(-45deg, #000000, #434343);
  transform: translateX(-1500px);
  transition: all 500ms linear;
  width: 270px; // Defining a custom width for the div
}

或者为 ul 元素设置自定义填充，例如：


.info ul {
  padding-left: 30px; // Defining a padding to every list item, which causes outer div to grow according to that.
  padding-right: 30px;
}

现在，关于过渡。我试图做一些不会对您的代码有太大改变的事情。首先，我们添加一个html class 用于处理info 菜单和ul 关闭时的处理：

div class="info closed">
  <ul class="closed">
  <!-- Rest of the code... -->

然后我们创建一个新的CSS代码来处理关闭的转换：

.info .closed {
  background: -webkit-linear-gradient(-45deg, #000000, #434343);
  background: linear-gradient(-45deg, #000000, #434343);
  transition: all 500ms linear;
}

我怎样才能使这个过渡工作并让汉堡包图标保持在顶部？

How can I make this transition work and let the hamburger icon stay on top?

css

animation

transition

position

toggle