javascript - 滑过导航栏

Question

我一直在尝试创建一个“在导航栏上滑动”，我的想法是我希望它可以滑动超过页面的 100% 宽度，并将不透明度设置为 0.7 左右，并将 2 行汉堡栏转换为一个十字架。

我已经成功创建了汉堡吧并让它进行了改造。当我单击此按钮时，我无法关闭导航幻灯片!它也来自左边，希望这个来自右边!

我还不够熟练，无法理解 JavaScript 是如何完全工作的以及这是否会干扰开闭功能。另外，我不确定我最近做了什么，但它现在似乎完全消失了!

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if (!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
});

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

body {
  background: white;
  min-height: 100vh;
}

.menu-btn {
  position: absolute;
  top: 25px;
  left: 95%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all.5s ease-in-out;
  z-index: 2;
}

.menu-btn-burger::before,
.menu-btn-burger::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background: black;
  border-radius: 2px;
  transition: all .5s ease-in-out;
}

.menu-btn-burger::after {
  transform: translateY(16px);
}

.menu-btn.open .menu-btn-burger::before {
  transform: rotate(45deg);
}

.menu-btn.open .menu-btn-burger::after {
  transform: rotate(-45deg);
}

.logobrand {
  height: 200px;
  position: absolute;
  top: 9%;
  left: 4%;
  z-index: 3;
}

.btn a {
  padding: 5px;
}

.btn {
  font-family: Montserrat;
  font-weight: lighter;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
  position: absolute;
  top: 2%;
  right: 10%;
  border: solid 1px black;
  padding: 5px;
  border-radius: 4px;
}

.btn:hover {
  background-color: black;
  transition: 1s;
  opacity: 0.7;
  color: white;
}

.work {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.7;
  overflow-y: hidden;
}

.listitems {
  position: absolute;
  left: 70%;
  top: 30%;
}

.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  opacity: 0.7;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 1s;
  transform: translateX(99%);
}

.side-nav a {
  padding: 10px 10px 10px 30px;
  text-decoration: none;
  font-size: 30px;
  color: white;
  display: block;
  transition: 0.5s;
  font-family: Montserrat;
  list-style: none;
}

.side-nav a:hover {
  color: silver;
}

.side-nav .btn-close {
  position: absolute;
  top: 0;
  left: 0px;
}

a li {
  width: 220px;
}

.instagram {
  height: 35px;
  padding: 5px;
}

.facebook {
  height: 35px;
  padding: 5px;
}

.twitter {
  height: 35px;
  padding: 5px;
}

.linkedin {
  height: 35px;
  padding: 5px;
}

.social {
  position: absolute;
  top: 95%;
  left: 88%;
  display: block;
}

.copy {
  text-align: center;
  font-family: Montserrat;
}

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

<video class="work" autoplay loop muted src="img/Video.mov"></video>
<nav class="navbar">
  <span class="open-slide">
      <a href="#" onclick="openSlideMenu()">
          <div class="menu-btn" onclick="show()">
              <div class="menu-btn-burger"></div>
          </div>
      </a>
  </span>
</nav>
<a class="btn" href="#">
  <h3>Request a Quote</h3>
</a>
<div id="side-menu" class="side-nav">
  <a href="#" class="btn-close" onclick="closeSlideMenu()">
    <div class="menu-btn" onclick="show()">
      <div class="menu-btn-burger"></div>
    </div>
    <div class="listitems">
      <a href="#">
        <li>Who we are</li>
      </a>
      <a href="#">
        <li>What we offer</li>
      </a>
      <a href="#">
        <li>How can we help?</li>
      </a>
      <a href="#">
        <li>Chat to us</li>
      </a>
    </div>
  </a>
</div>
<div class="logo"><img class="logobrand" src="img/Chatting Creative logo.png" alt=""></div>

<div class="social">
  <img class="instagram" src="img/1t.png" alt="">
  <img class="facebook" src="img/2t.png" alt="">
  <img class="twitter" src="img/3t.png" alt="">
  <img class="linkedin" src="img/4t.png" alt="">
</div>

<footer>
  <p class="copy">
    &copy; Chatting Creative 2020
  </p>
</footer>

<script>
  function openSlideMenu() {
    document.getElementById('side-menu').style.width = '100%';
    document.getElementById('main').style.marginLeft = '250px';
  }

  function closeSlideMenu() {
    document.getElementById('side-menu').style.width = '0px';
    document.getElementById('main').style.marginLeft = '0px';
  }
</script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init();
</script>

Answer 1

两个示例，一个使用 HTML+CSS，一个使用 JavaScript

使用复选框

您可以使用隐藏的复选框来代替 JS。
请参阅此示例并找到代码中的注释。

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

body {
  min-height: 100vh;
  height: 200vh;   /* JUST FOR DEMO - remove this afterwards. */
  border: 4px dashed #000;
}

#btn-burger { /* Use ID. You need only one of these */
  position: fixed; /* make it fixed */
  z-index: 2;
  top: 25px;
  right: 25px; /* use right */
  width: 30px; /* should be 30, not 40 */
  height: 30px;
  cursor: pointer;
}
#btn-burger::before,
#btn-burger::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background: #000;
  transition: all .5s ease-in-out;
}
#btn-burger::after { transform: translateY(16px); }

#side-menu {
  position: fixed;
  z-index: 1;
  height: 100%;
  /* Do not use width 0 */
  top: 0;
  right: 0;    /* Use right 0 */
  background-color: #ddd;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 1s;
  transform: translateX(100%); /* Use 100% */
}

#side-menu a {
  padding: 5px 20px;
  display: block;
}

#menuHandler:checked ~ #btn-burger::before { transform: rotate(45deg); }
#menuHandler:checked ~ #btn-burger::after  { transform: rotate(-45deg); }
#menuHandler:checked ~ #side-menu { transform: translateX(0%); } /* do not use width here */

<input id="menuHandler" type="checkbox" hidden />

<label id="btn-burger" for="menuHandler"></label>

<div id="side-menu">
  <ul class="listItems">
    <li><a href="#">Who we are</a></li>
    <li><a href="#">What we offer</a></li>
    <li><a href="#">How can we help?</a></li>
    <li><a href="#">Chat to us</a></li>
  </ul>
</div>

另外记住:

• <a>内包含其他操作元素是无效的 anchor 。
• 放置的标记无效 <div>里面<span>
• 拥有 <li> 也是无效的里面的元素 <a> 。 LI s 父级应该是 <ul>或<ol>

使用 JavaScript 的示例

单击后，您可以简单地执行 Element.classList.toggle()

const EL_burger = document.querySelector("#btn-burger");
const EL_menu = document.querySelector("#side-menu");
const EL_listItems = EL_menu.querySelectorAll("a");

const toggleSideMenu = (ev) => {
  ev.preventDefault();
  EL_menu.classList.toggle('is-open');
  EL_burger.classList.toggle('is-open');
}

EL_burger.addEventListener('click', toggleSideMenu);

// If your're building a singlePage app than you'll also need this:
EL_listItems.forEach(el => el.addEventListener('click', toggleSideMenu));

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

body {
  min-height: 100vh;
  height: 200vh;   /* JUST FOR DEMO - remove this afterwards. */
  border: 4px dashed #000;
}

#btn-burger { /* Use ID. You need only one of these */
  position: fixed; /* make it fixed */
  z-index: 2;
  top: 25px;
  right: 25px; /* use right */
  width: 30px; /* should be 30, not 40 */
  height: 30px;
  cursor: pointer;
}
#btn-burger::before,
#btn-burger::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background: #000;
  transition: all .5s ease-in-out;
}
#btn-burger::after { transform: translateY(16px); }

#side-menu {
  position: fixed;
  z-index: 1;
  height: 100%;
  /* Do not use width 0 */
  top: 0;
  right: 0;    /* Use right 0 */
  background-color: #ddd;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 1s;
  transform: translateX(100%); /* Use 100% */
}

#side-menu a {
  padding: 5px 20px;
  display: block;
}

#btn-burger.is-open::before { transform: rotate(45deg); }
#btn-burger.is-open::after  { transform: rotate(-45deg); }
#side-menu.is-open { transform: translateX(0%); } /* do not use width here */

<a id="btn-burger"></a>

<div id="side-menu">
  <ul class="listItems">
    <li><a href="#">Who we are</a></li>
    <li><a href="#">What we offer</a></li>
    <li><a href="#">How can we help?</a></li>
    <li><a href="#">Chat to us</a></li>
  </ul>
</div>