使用 Javascript 切换的导航栏汉堡的响应式下拉菜单适用于 Chrome、Firefox，但不适用于 Safari

Posted 2023-03-12

【中文标题】使用 Javascript 切换的导航栏汉堡的响应式下拉菜单适用于 Chrome、Firefox，但不适用于 Safari

【英文标题】：Responsive drop-down menu from burger of navbar using Javascript toggle works in Chrome, Firefox, but not Safari

【发布时间】：2019-09-11 14:58:21

【问题描述】：

我正在使用 javascript 中的切换创建一个响应式导航栏。向下滚动 70vh 后会出现导航栏。最大宽度为 768 像素时，响应能力开始发挥作用，单击时会出现一个带有下拉菜单的汉堡。

在 Chrome 和 Firefox 中一切正常——无论是手动调整浏览器的大小还是使用浏览器的移动设备模拟器。但在 Safari 和实际移动设备（iPad、iPhone 7、iPhone 5）上，导航栏与汉堡一起出现，当我单击汉堡时，它会按预期转换为“X”，但下拉菜单没有出现。

编辑澄清：如果您查看下面的代码 sn-p，这就是应该发生的事情。这在 Chrome 和 Firefox 中确实发生了，但在实际的移动设备上却没有。相反，在移动设备上，当我按下汉堡时，它会变成“X”，但下拉菜单不会滑到屏幕上。

我花了一天多的时间试图弄清楚发生了什么。我的 html 头部具有适合移动设备宽度的元标记，并且我尝试为 CSS 中的每个动画、变换、过渡和关键帧使用适当的 -moz、-webkit、-o 属性。我找不到解决方案。有人请给我一件救生衣，我正在下沉。

这是我的代码：

const navSlide = () => 
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  // Toggle Nav
  burger.addEventListener('click', () => 
    nav.classList.toggle('nav-active');
  //Animate Links
    navLinks.forEach((link, index) => 
      if (link.style.animation) 
        link.style.animation = ''
       else 
        link.style.animation = `navLinkFade 0.5s ease forwards $index / 5 + 0.5s`;
    
  );
  // Burger Animation
  burger.classList.toggle('toggle');
  );


navSlide();

// navbar appears after scrolling
let navbar = document.querySelector(".header-navigation");
if (navbar) 
  window.addEventListener("scroll", () => 
    if (window.scrollY >= window.innerHeight - 70) 
      navbar.classList.add('navbar-show');
     else 
      navbar.classList.remove('navbar-show')
    
  );

body 
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  cursor: pointer;


.header-navigation 
  opacity: 0;


.wrapper 
  z-index: 1;
  position: relative;


.navbar-show 
  opacity: 1;
  transition: .4s ease-in-out;
  position: fixed;
  top: 0;
  width: 100%;
  height: 10vh;
  color: black;
  background-color: #5D4954;
  text-align: right;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  font-family: 'Muli', sans-serif;
  font-weight: 600;
  overflow: hidden;
  z-index: 9999;
  cursor: pointer;


nav 
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  height: 10vh;
  font-family: 'Muli', sans-serif;
  background-color: white;
  transition: .4s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  cursor: pointer;


.logo 
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
  color: black;


.nav-links 
  display: flex;
  justify-content: space-around;
  width: 40%;
  cursor: pointer;


.nav-links li 
  list-style: none;
  cursor: pointer;


.nav-links a 
  text-decoration: none;
  color: black;
  letter-spacing: 3px;
  font-size: 14px;
  display: block;
  cursor: pointer;
/*  font-weight: bold; */


.burger 
  display: none;


.burger div
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 5px;
  transition: all 0.3s ease;
  cursor: pointer;


@media screen and (max-width: 1024px)
  .nav-links 
    width: 50%;
  


@media screen and (max-width: 768px)
  body
/*    overflow-x: hidden;
*/  
  .nav-links 
    position: fixed;
    right: 0;
    height: 92vh;
    top: 8vh;
    background-color: #5D4954;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    width: 50%;
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -o-transform: translateX(100%);
    transform: translateX(100%);
      -webkit-transition: transform 0.5s ease-in;
      -moz-transition: transform 0.5s ease-in;
      -o-transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
    cursor: pointer;
  
  .nav-links li 
    opacity: 0;
    -webkit-animation: navLinkFade 0.5s ease forwards 1s;
    -moz-animation: navLinkFade 0.5s ease forwards 1s;
    -o-animation: navLinkFade 0.5s ease forwards 1s;
    -ms-animation: navLinkFade 0.5s ease forwards 1s;
    animation: navLinkFade 0.5s ease forwards 1s;
    cursor: pointer;
  
  .burger 
    display: block;
    cursor: pointer;
  


.nav-active 
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  cursor: pointer;
/*  z-index: 9999;
  position: relative;*/


@-webkit-keyframes navLinkFade 
  from 
    opacity: 0;
    transform: translateX(50px);
  
  to 
    opacity: 1;
    transform: translateX(0px);
  


@-moz-keyframes navLinkFade 
  from 
    opacity: 0;
    transform: translateX(50px);
  
  to 
    opacity: 1;
    transform: translateX(0px);
  


@-o-keyframes navLinkFade 
  from 
    opacity: 0;
    transform: translateX(50px);
  
  to 
    opacity: 1;
    transform: translateX(0px);
  


@keyframes navLinkFade 
  from 
    opacity: 0;
    transform: translateX(50px);
  
  to 
    opacity: 1;
    transform: translateX(0px);
  


.toggle .line1 
  transform: rotate(-45deg) translate(-5px, 6px);


.toggle .line2 
  opacity: 0;


.toggle .line3 
  transform: rotate(45deg) translate(-5px, -6px);


.banner 
  height: 100vh;
  background: grey;
  color: black;
  position: relative;
  text-align: center;


.banner h1 
  padding-top: 300px;


.container1 
  height: 92vh;
  background: white;
  color: black;
  position: relative;
  text-align: center;
  z-index: 2;


.container2 
  height: 92vh;
  background: grey;
  color: black;
  position: relative;
  text-align: center;
  z-index: 3;

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>NAVIGATIOn</title>
    <link href="https://fonts.googleapis.com/css?family=Muli:200,300,400,600,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="header-navigation">
      <nav class="nav">
        <div class="logo">
          <h4>NAV</h4>
        </div>
        <ul class="nav-links">
            <li><a href="#">Why a Website?</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>
    </div>

    <div class="banner">
      <h1>Banner</h1>
    </div>
    <div class="container1">
      <h1>Container1</h1>
    </div>
    <div class="container2">
      <h1>Container2</h1>
    </div>
    <script src="javascript.js"></script>
  </body>
</html>

【问题讨论】：

.nav-active transform: translateX(0); -webkit-transform: translateX(0); 在0 值上没有百分比（0% 无效）和-webkit- 前缀。我没有时间去制作一个代码笔进行测试或其他东西，但这是我对你的罪魁祸首的第一个猜测。干杯。

感谢您与我们联系。我试过这个，但没有用。我在 CSS 文件中的每个变换、翻译和关键帧上都尝试了 -webkit、-moz 和 -o。不幸的是，这些都不起作用。

啊，我知道了，在黑暗中的另一个镜头是将display: block; 添加到.nav-links a

谢谢克里斯。我也试过了，但也没有用。

【参考方案1】：

溢出似乎搞砸了。尽量不要在 .navbar-show 中使用 overflow-hidden ?

这是一个 JSFiddle：https://jsfiddle.net/RomanVanLoo/5ohva732/6/

body 


margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  cursor: pointer;


.header-navigation 
  opacity: 0;


.wrapper 
  z-index: 1;
  position: relative;


.navbar-show 
  opacity: 1;
  transition: .4s ease-in-out;
  position: fixed;
  top: 0;
  width: 100%;
  height: 10vh;
  color: black;
  background-color: #5D4954;
  text-align: right;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  font-family: 'Muli', sans-serif;
  font-weight: 600;
  z-index: 9999;
  cursor: pointer;


nav 
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  height: 10vh;
  font-family: 'Muli', sans-serif;
  background-color: white;
  transition: .4s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  cursor: pointer;


.logo 
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
  color: black;


.nav-links 
  display: flex;
  justify-content: space-around;
  width: 40%;
  cursor: pointer;


.nav-links li 
  list-style: none;
  cursor: pointer;


.nav-links a 
  text-decoration: none;
  color: black;
  letter-spacing: 3px;
  font-size: 14px;
  display: block;
  cursor: pointer;
/*  font-weight: bold; */


.burger 
  display: none;


.burger div
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 5px;
  transition: all 0.3s ease;
  cursor: pointer;


@media screen and (max-width: 1024px)
  .nav-links 
    width: 50%;
  


@media screen and (max-width: 768px)
  body
/*    overflow-x: hidden;
*/  
  .nav-links 
    position: fixed;
    right: 0;
    height: 92vh;
    top: 8vh;
    background-color: #5D4954;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    width: 50%;
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -o-transform: translateX(100%);
    transform: translateX(100%);
      -webkit-transition: transform 0.5s ease-in;
      -moz-transition: transform 0.5s ease-in;
      -o-transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
    cursor: pointer;
  
  .nav-links li 
    opacity: 0;
    -webkit-animation: navLinkFade 0.5s ease forwards 1s;
    -moz-animation: navLinkFade 0.5s ease forwards 1s;
    -o-animation: navLinkFade 0.5s ease forwards 1s;
    -ms-animation: navLinkFade 0.5s ease forwards 1s;
    animation: navLinkFade 0.5s ease forwards 1s;
    cursor: pointer;
  
  .burger 
    display: block;
    cursor: pointer;
  


.nav-active 
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  cursor: pointer;
/*  z-index: 9999;
  position: relative;*/


@-webkit-keyframes navLinkFade 
  from 
    opacity: 0;
    transform: translateX(50px);
  
  to 
    opacity: 1;
    transform: translateX(0px);
  


@-moz-keyframes navLinkFade 
  from 
    opacity: 0;
    transform: translateX(50px);
  
  to 
    opacity: 1;
    transform: translateX(0px);
  


@-o-keyframes navLinkFade 
  from 
    opacity: 0;
    transform: translateX(50px);
  
  to 
    opacity: 1;
    transform: translateX(0px);
  


@keyframes navLinkFade 
  from 
    opacity: 0;
    transform: translateX(50px);
  
  to 
    opacity: 1;
    transform: translateX(0px);
  


.toggle .line1 
  transform: rotate(-45deg) translate(-5px, 6px);


.toggle .line2 
  opacity: 0;


.toggle .line3 
  transform: rotate(45deg) translate(-5px, -6px);


.banner 
  height: 100vh;
  background: grey;
  color: black;
  position: relative;
  text-align: center;


.banner h1 
  padding-top: 300px;


.container1 
  height: 92vh;
  background: white;
  color: black;
  position: relative;
  text-align: center;
  z-index: 2;


.container2 
  height: 92vh;
  background: grey;
  color: black;
  position: relative;
  text-align: center;
  z-index: 3;

【参考方案2】：

您必须添加前缀 -webkit-transition 和 -webkit-transform 才能在移动设备上工作。 为了在所有支持的浏览器中兼容，需要供应商前缀，并使用最后声明的标准语法：

.example 
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s; 

【讨论】：

谢谢——我已经按可能的顺序对 CSS 文件中的每个变换、过渡、动画和关键帧进行了尝试。没有任何效果。澄清一下，此代码的响应能力在桌面上的 Chrome 和 Firefox 中完美运行，但在桌面上的 Safari 和 iPad、iPhone 7 或 iPhone 5 上的 Safari 上却不行。更清楚的是，导航栏出现在上述在移动设备上，按下时汉堡会变成 x，同时，菜单会从右到左滑到屏幕上。但后半部分不会发生。