javascript - 菜单图标不显示在桌面版 Safari 中或根本不显示在移动设备上

标签 javascript html css safari

这是我为 735 像素或更小的窗口大小创建的移动菜单。移动菜单图标(右上角)不会显示在桌面版 Safari 或任何移动浏览器(包括 Chrome 和 Safari)中。我有一种感觉，我可能会忽略一些明显的东西，但我就是想不通。

会不会和overflow:hidden有关？我发现如果我在我的类 .mobilenav 中禁用它，菜单图标会显示，但显然，关闭图标也会显示。如果这是问题的根源，我该如何在保持菜单功能不变的情况下解决它？

适用于桌面的浏览器:Chrome 75.0.3770.142、Firefox 68.0、Edge 42.17134.1.0 不适用于桌面的浏览器:Safari 12.1.1 在移动设备上，它似乎不适用于任何浏览器。我检查了 Safari 和 Chrome。

// BEGIN MOBILE NAV
function openMobile() {
  document.getElementById("myMobilenav").style.width = "100%";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}

function closeMobile() {
  document.getElementById("myMobilenav").style.width = "0";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}
// END MOBILE NAV

//  MOBILE DROPDOWN
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content\*/
var dropdown = document.getElementsByClassName("mobile-dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("mobileactive");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

document.getElementById("myMobilenav").ontouchmove = function(e) {
  e.preventDefault();
}
body {
  margin: 0;
}

@media (max-width:735px) {
  .nav {
    display: none;
  }
  .navcontainer {
    display: none;
  }
  header.Header.Header--top {
    display: none;
  }
}


/* END MAIN NAV STYLE */

.mobilehead {
  width: 120px !important;
  display: block;
  margin-left: 10px;
  padding-top: -10px;
}

#mobilehead {
  width: 100%;
  height: 80px;
  background-color: #e9e5fb;
  border-bottom: solid 1px #000;
  margin-bottom: 80px;
}


/* BEGIN MOBILE NAV STYLE */

.mobilenavcontainer {
  height: 100%;
  width: 0px;
  background-color: #e9e5fb;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 997;
}

#mobilemenuicon {
  width: 80px;
  height: auto;
  z-index: 5000;
}

.mobilenav .mobilemenuicon {
  top: 20px;
  right: 18px;
  position: fixed;
  z-index: 50000;
}

#mobilecloseicon {
  width: 80px;
}

.mobilenav .mobileclosebtn {
  top: 20px;
  right: 18px;
  margin-left: 10px;
  position: absolute;
}

.mobilenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  background-color: #e9e5fb;
  overflow: hidden;
  padding-top: 120px;
  font-family: "AmerigoBT";
}

.mobilemainitems a {
  text-decoration: none;
  font-size: 3em;
  color: #000;
  display: block;
  -webkit-text-stroke: .75px #000;
  -webkit-text-fill-color: #e9e5fb;
  line-height: 50px;
  width: 180px;
}

.mobilemainitems {
  padding-left: 30px;
  padding-top: 0px;
  margin-top: -96px;
}

.mobilesocialitems a {
  text-decoration: none;
  font-size: 1.5em;
  color: #000;
  display: inline-block;
  font-weight: 400;
}

.mobilesocialitems {
  padding-left: 30px;
  line-height: 35px;
  top: 480px;
  position: absolute;
}

.row1social {
  padding-left: 50px;
  display: block;
  width: 250px !important;
}


/* dropdown button */

.mobile-dropdown-btn {
  font-family: "AmerigoBT";
  text-decoration: none;
  font-size: 18px !important;
  color: #000;
  display: block;
  transition: 0.3s;
  line-height: 54px;
  border: none;
  background: none;
  width: 200px;
  text-align: left;
  outline: none;
  margin-left: -11px !important;
  padding-bottom: 5px;
}


/* active class for active dropdown button */

.mobileactive a {
  background-color: none;
  -webkit-text-stroke: .75px #000 !important;
  -webkit-text-fill-color: #e9e5fb !important;
}


/* dropdown container */

.mobile-dropdown-container {
  display: none;
  background-color: none;
  padding-left: 20px;
  font-family: "UniversEx";
  font-size: 11px;
  padding-bottom: 20px;
}

.mobile-dropdown-container a {
  line-height: 32px;
  -webkit-text-fill-color: #000 !important;
  -webkit-text-stroke: transparent !important;
}

.mobile-dropdown-container a:hover {
  color: #000 !important;
  -webkit-text-stroke: transparent !important;
}

@media (min-width:736px) {
  .mobilenav {
    display: none;
  }
  .mobilenavcontainer {
    display: none;
  }
  #mobilehead {
    display: none !important;
  }
}
<header id="mobilehead"><img src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d5346b960f00012d395a/1560794420116/ck4%40300x.png" alt="Cathrine Khom" class="mobilehead" /></header>

<!-- BEGIN MOBILE NAV -->
<div id="myMobilenav" class="mobilenav">
  <a href="javascript:void(0)" class="mobileclosebtn" onclick="closeMobile()"><img id="mobilecloseicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07e8d86b960f00012f1522/1560799448192/closeup%40300x.png" /></a>
  <div class="mobilemainitems">
    <button class="mobile-dropdown-btn"><a href="#">Journal</a></button>
    <div class="mobile-dropdown-container">
      <a href="/journal">all</a>
      <a href="/journal?category=design">design</a>
      <a href="/journal?category=fashion">fashion</a>
      <a href="/journal?category=personal">personal</a>
      <a href="/journal?category=swoon">swoon</a>
      <a href="/journal?category=travel">travel</a>
    </div>
    <a href="/work">Work</a>
    <a href="/about">About</a>
    <a href="#">Contact</a>
  </div>
  <div class="mobilesocialitems">
    <div class="row1social">
      <a href="#" target="_blank">Twitter</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Instagram</a>
    </div>
    <div class="row2social">
      <a href="#" target="_blank">Pinterest</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Magazine</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Spotify</a>
    </div>
  </div>
</div>

<div class="mobilenavcontainer">
  <span class="mobilenav" onclick="openMobile()"><img id="mobilemenuicon" class="mobilemenuicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d2bda44aaa000188164d/1560793789313/menudown%40300x.png"/></span>
</div>
<!-- END MOBILE NAV -->

最佳答案

不确定为什么要嵌套固定定位的元素，但无论出于何种原因，Safari 都因此而迷失了它的层。

添加以下内容可以解决您在 Safari 和移动设备上的问题...

.mobilenavcontainer > .mobilenav {
  position: relative;
}


// BEGIN MOBILE NAV
function openMobile() {
  document.getElementById("myMobilenav").style.width = "100%";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}

function closeMobile() {
  document.getElementById("myMobilenav").style.width = "0";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}
// END MOBILE NAV

//  MOBILE DROPDOWN
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content\*/
var dropdown = document.getElementsByClassName("mobile-dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("mobileactive");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

document.getElementById("myMobilenav").ontouchmove = function(e) {
  e.preventDefault();
}
body {
  margin: 0;
}

@media (max-width:735px) {
  .nav {
    display: none;
  }
  .navcontainer {
    display: none;
  }
  header.Header.Header--top {
    display: none;
  }
}


/* END MAIN NAV STYLE */

.mobilehead {
  width: 120px !important;
  display: block;
  margin-left: 10px;
  padding-top: -10px;
}

#mobilehead {
  width: 100%;
  height: 80px;
  background-color: #e9e5fb;
  border-bottom: solid 1px #000;
  margin-bottom: 80px;
}


/* BEGIN MOBILE NAV STYLE */

.mobilenavcontainer {
  height: 100%;
  width: 0px;
  background-color: #e9e5fb;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 997;
}

.mobilenavcontainer > .mobilenav {
  position: relative;
}

#mobilemenuicon {
  width: 80px;
  height: auto;
  z-index: 5000;
}

.mobilenav .mobilemenuicon {
  top: 20px;
  right: 18px;
  position: fixed;
  z-index: 50000;
}

#mobilecloseicon {
  width: 80px;
}

.mobilenav .mobileclosebtn {
  top: 20px;
  right: 18px;
  margin-left: 10px;
  position: absolute;
}

.mobilenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  background-color: #e9e5fb;
  overflow: hidden;
  padding-top: 120px;
  font-family: "AmerigoBT";
}

.mobilemainitems a {
  text-decoration: none;
  font-size: 3em;
  color: #000;
  display: block;
  -webkit-text-stroke: .75px #000;
  -webkit-text-fill-color: #e9e5fb;
  line-height: 50px;
  width: 180px;
}

.mobilemainitems {
  padding-left: 30px;
  padding-top: 0px;
  margin-top: -96px;
}

.mobilesocialitems a {
  text-decoration: none;
  font-size: 1.5em;
  color: #000;
  display: inline-block;
  font-weight: 400;
}

.mobilesocialitems {
  padding-left: 30px;
  line-height: 35px;
  top: 480px;
  position: absolute;
}

.row1social {
  padding-left: 50px;
  display: block;
  width: 250px !important;
}


/* dropdown button */

.mobile-dropdown-btn {
  font-family: "AmerigoBT";
  text-decoration: none;
  font-size: 18px !important;
  color: #000;
  display: block;
  transition: 0.3s;
  line-height: 54px;
  border: none;
  background: none;
  width: 200px;
  text-align: left;
  outline: none;
  margin-left: -11px !important;
  padding-bottom: 5px;
}


/* active class for active dropdown button */

.mobileactive a {
  background-color: none;
  -webkit-text-stroke: .75px #000 !important;
  -webkit-text-fill-color: #e9e5fb !important;
}


/* dropdown container */

.mobile-dropdown-container {
  display: none;
  background-color: none;
  padding-left: 20px;
  font-family: "UniversEx";
  font-size: 11px;
  padding-bottom: 20px;
}

.mobile-dropdown-container a {
  line-height: 32px;
  -webkit-text-fill-color: #000 !important;
  -webkit-text-stroke: transparent !important;
}

.mobile-dropdown-container a:hover {
  color: #000 !important;
  -webkit-text-stroke: transparent !important;
}

@media (min-width:736px) {
  .mobilenav {
    display: none;
  }
  .mobilenavcontainer {
    display: none;
  }
  #mobilehead {
    display: none !important;
  }
}
<header id="mobilehead"><img src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d5346b960f00012d395a/1560794420116/ck4%40300x.png" alt="Cathrine Khom" class="mobilehead" /></header>

<!-- BEGIN MOBILE NAV -->
<div id="myMobilenav" class="mobilenav">
  <a href="javascript:void(0)" class="mobileclosebtn" onclick="closeMobile()"><img id="mobilecloseicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07e8d86b960f00012f1522/1560799448192/closeup%40300x.png" /></a>
  <div class="mobilemainitems">
    <button class="mobile-dropdown-btn"><a href="#">Journal</a></button>
    <div class="mobile-dropdown-container">
      <a href="/journal">all</a>
      <a href="/journal?category=design">design</a>
      <a href="/journal?category=fashion">fashion</a>
      <a href="/journal?category=personal">personal</a>
      <a href="/journal?category=swoon">swoon</a>
      <a href="/journal?category=travel">travel</a>
    </div>
    <a href="/work">Work</a>
    <a href="/about">About</a>
    <a href="#">Contact</a>
  </div>
  <div class="mobilesocialitems">
    <div class="row1social">
      <a href="#" target="_blank">Twitter</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Instagram</a>
    </div>
    <div class="row2social">
      <a href="#" target="_blank">Pinterest</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Magazine</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Spotify</a>
    </div>
  </div>
</div>

<div class="mobilenavcontainer">
  <span class="mobilenav" onclick="openMobile()"><img id="mobilemenuicon" class="mobilemenuicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d2bda44aaa000188164d/1560793789313/menudown%40300x.png"/></span>
</div>
<!-- END MOBILE NAV -->

关于javascript - 菜单图标不显示在桌面版 Safari 中或根本不显示在移动设备上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57155753/

上一篇：javascript - 仅在上一个动画完成后执行一行

下一篇：javascript - 有没有办法根据它在 div 中的位置将 "active"类添加到列表项？

相关文章：

javascript - 将动态行插入到 HTML 表中

javascript - 使用 JQuery is() 改变背景图像

html - 在视差图像上书写文本

javascript - 从 url 获取数据并放在网站上

在 FF 和 IE7/8/9 上工作时，带有淡入淡出的 Javascript slider 在 chrome 上失败

javascript - 悬停时图像更改/放大而不影响页面间距

javascript - 将新元素添加到 DOM Angular 时的动画

javascript - 如何使用 jquery 操作元素，使它们匹配它们的 css-Selector "nth-of-type"

javascript - 如何在另一个打开时阻止 DIV 元素移动？ (菜单和子菜单)

javascript - 禁用浏览器缓存

©2024 IT工具网  联系我们