javascript - 第一次点击汉堡

Question

当我点击我的导航栏菜单图标时，我想问一个问题，我从字体真棒它第一次没有打开我的菜单，但是当我再次点击导航栏时，我会更清楚这些图像和情况。

第一次点击：

第一次点击的图片

第二次点击 - 它打开意味着点击两次：

第二次点击后的图片

我的html代码

function navigation() {
  let navLis = document.getElementById('navLis');
  let hamburger = document.getElementById('hamburger');

  if (navLis.style.marginTop === '-250px') {
    navLis.style.marginTop = '50px';
    setTimeout(function() {
      hamburger.className = 'fa fa-close';
    }, 200);
  } else {
    navLis.style.marginTop = '-250px';
    setTimeout(function() {
      hamburger.className = 'fa fa-bars';
    }, 200);
  }

}

.nav {
  position: absolute;
  z-index: 2222;
  width: 100%;
}

.current {
  color: black;
  background: #fff;
  padding: 4px;
}

li {
  list-style-type: none;
}

a {
  transition: .2s!important;
  text-decoration: none;
}

nav ul {
  margin-top: 20px;
  color: white;
  background: black;
  transition: all 1s linear!important;
}

nav {
  height: 60px;
  border-bottom: 2px solid black;
  background: black;
}

nav li {
  display: inline-block;
  transition: 1s!important;
  padding: 6px;
}

nav li a {
  color: white;
  display: inline-block;
  font-family: Sans-Serif;
  font-weight: bold;
  padding: 2px 0px;
}

nav li a:hover {
  color: black;
  background: #fff;
  padding: 4px;
}

#navLis {
  background: black!important;
  position: absolute;
  width: 100%;
  z-index: 11!important;
  padding: 10px 0;
}

nav i {
  display: none!important;
  font-size: 2em!important;
  position: absolute;
  top: 10px;
  right: 10px;
  transform: translate(-10px);
  color: white;
  transition: all 1s ease;
}

.logo {
  padding: 10px;
  display: block;
  z-index: 111;
  font-size: 25px;
}

.logo a {
  font-family: 'Josefin Sans', sans-serif;
  color: #ff6f00;
}

@media screen and (max-width:668px) {
  nav {
    height: 64px;
    transition: 1s!important;
  }
  nav li {
    text-align: center;
    display: block;
    transition: all 1s linear!important;
  }
  #navLis {
    transition: margin-top .3s ease-in .2s!important;
    display: block;
    margin-top: -250px;
    background: black;
    z-index: 11;
  }
  nav i {
    display: block!important;
  }
  .home_container {
    height: 80vh;
  }
}

<nav class="navbar" id="navbar">
  <div class="nav">

    <a onclick="navigation()">
      <i class="fa fa-bars" aria-hidden="true" id="hamburger"></i>
    </a>
    <div class="logo">

      <a href="#">The Big Blog </a>
    </div>
  </div>
  <div id="navLis">


    <ul>


      <li><a href="index.html">Home</a></li>
      <li><a href="#">Start Blogging</a></li>
      <li><a href="#">Popular Bloggers</a></li>
      <li><a href="#">About Us</a></li>
      <li><a class="current" href="contact.html">Contact Us</a></li>
    </ul>
  </div>
</nav>

编辑：我的媒体查询

@media screen and (max-width:668px)
{ 
nav 
{ height: 64px; transition: 1s!important; } 

nav li 
{ text-align: center; display: block; transition: all 1s linear!important; }

 #navLis { transition: margin-top .3s ease-in .2s!important; display: block; margin-top: -250px; background: black; z-index: 11; }

nav i { 
display: block!important; 
}

 .home_container{ 
height: 80vh; 
} 

}

标签： javascripthtmlcssnavbar

Answer 1

function navigation() {
  let navLis = document.getElementById('navLis');
  let hamburger = document.getElementById('hamburger');
  let top = window.getComputedStyle(navLis, null).getPropertyValue("margin-top");
  if (top === '-250px') {
    navLis.style.marginTop = '50px';
    setTimeout(function() {
      hamburger.className = 'fa fa-close';
    }, 200);
  } else {
    navLis.style.marginTop = '-250px';
    setTimeout(function() {
      hamburger.className = 'fa fa-bars';
    }, 200);
  }

}

.nav {
  position: absolute;
  z-index: 2222;
  width: 100%;
}

.current {
  color: black;
  background: #fff;
  padding: 4px;
}

li {
  list-style-type: none;
}

a {
  transition: .2s!important;
  text-decoration: none;
}

nav ul {
  margin-top: 20px;
  color: white;
  background: black;
  transition: all 1s linear!important;
}

nav {
  height: 60px;
  border-bottom: 2px solid black;
  background: black;
}

nav li {
  display: inline-block;
  transition: 1s!important;
  padding: 6px;
}

nav li a {
  color: white;
  display: inline-block;
  font-family: Sans-Serif;
  font-weight: bold;
  padding: 2px 0px;
}

nav li a:hover {
  color: black;
  background: #fff;
  padding: 4px;
}

#navLis {
  background: black!important;
  position: absolute;
  width: 100%;
  z-index: 11!important;
  padding: 10px 0;
}

nav i {
  display: none!important;
  font-size: 2em!important;
  position: absolute;
  top: 10px;
  right: 10px;
  transform: translate(-10px);
  color: white;
  transition: all 1s ease;
}

.logo {
  padding: 10px;
  display: block;
  z-index: 111;
  font-size: 25px;
}

.logo a {
  font-family: 'Josefin Sans', sans-serif;
  color: #ff6f00;
}

@media screen and (max-width:668px) {
  nav {
    height: 64px;
    transition: 1s!important;
  }
  nav li {
    text-align: center;
    display: block;
    transition: all 1s linear!important;
  }
  #navLis {
    transition: margin-top .3s ease-in .2s!important;
    display: block;
    margin-top: -250px;
    background: black;
    z-index: 11;
  }
  nav i {
    display: block!important;
  }
  .home_container {
    height: 80vh;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>


<nav class="navbar" id="navbar">
  <div class="nav">

    <a onclick="navigation()">
      <i class="fa fa-bars" aria-hidden="true" id="hamburger"></i>
    </a>
    <div class="logo">

      <a href="#">The Big Blog </a>
    </div>
  </div>
  <div id="navLis">


    <ul>


      <li><a href="index.html">Home</a></li>
      <li><a href="#">Start Blogging</a></li>
      <li><a href="#">Popular Bloggers</a></li>
      <li><a href="#">About Us</a></li>
      <li><a class="current" href="contact.html">Contact Us</a></li>
    </ul>
  </div>
</nav>