Question

我在我的网站上使用了一个基本的导航菜单，它显示了菜单图标，只有在点击它时才会显示导航栏。该代码适用于台式机和某些移动设备（iPhone 6，Samsung Tab 3），但它无法在iPhone 4，Samsung Galaxy S4甚至iPad Air上正常显示。

单击时未向右推动菜单图标。虽然相同的代码允许图标在桌面视图上移动位置，但它仍然保持原样。我无法弄清楚问题出在哪里。我怀疑媒体查询但删除媒体查询后问题仍然存在。我设法提出的唯一解决方法是增加导航第一项的顶部填充。但这并不理想。

任何想法我做错了什么？您将在下面找到html和css代码。

＆＃13;

$(document).ready(function() {
  $menuLeft = $('.pushmenu-left');
  $nav_list = $('#nav_list');

  $nav_list.click(function() {
    $(this).toggleClass('active');
    $('.pushmenu-push').toggleClass('pushmenu-push-toright');
    $menuLeft.toggleClass('pushmenu-open');
  });
});

＆＃13;

body {
  position: relative;
  margin: 0;
}
header {
  width: 100% height: auto;
  margin-top: -6.25em;
  position: relative;
}
.pushmenu {
  font-family: Arial, Helvetica, Sans-Serif;
  width: 120px;
  height: 100%;
  top: 0;
  z-index: 1000;
  position: fixed;
  font-size: 1em;
  font-weight: bold;
  padding: 15px 20px;
  margin: 0;
  height: 1em;
}
.pushmenu a {
  display: block;
  text-decoration: none;
  padding: 14px;
  color: black;
  font-size: 1em;
  font-weight: bold;
}
.pushmenu a:hover {
  opacity: 0.6;
}
.pushmenu a:active {
  color: #bdbdbd;
}
.pushmenu-left {
  left: -120px;
}
.pushmenu-left.pushmenu-open {
  left: 0;
}
.pushmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}
.pushmenu-push-toright {
  left: 120px;
}
.pushmenu .pushmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#nav_list {
  background: url(hamburger-menu-icon.svg) no-repeat left top;
  cursor: pointer;
  height: 27px;
  width: 33px;
  text-indent: -9999em;
}
nav-list.active {
  background-position: -33px top;
}
.buttonset {
  height: 16px;
  padding: 10px 20px 20px;
  position: fixed;
  z-index: 1000;
  top: 0;
  margin: 0;
}
@media all and (min-width: 260px) and (max-width: 442px) {
  .pushmenu {
    width: 200px;
    height: 100%;
    font-size: 1.5em;
  }
  .pushmenu a {
    font-size: 1em;
  }
  .pushmenu a:first-child {
    padding-top: 40px;
  }
  .pushmenu-left {
    left: -200px;
  }
  .pushmenu-push-toright {
    left: 200px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta http-equiv="expires" content="0">
</head>

<body class="pushmenu-push">
  <header>
    <nav class="pushmenu pushmenu-left">
      <a href="i.html">HOME</a>
      <a href="a.html">ABOUT</a>
      <a href="s.html">SERVICES</a>
      <a href="c.html">CONTACT</a>
    </nav>

    <div class="container">
      <div class="main">
        <section class="buttonset">
          <div id="nav_list">Menu</div>
        </section>
      </div>
    </div>
  </header>


</body>

</html>

＆＃13;

**编辑：

nav bar closed active nav bar

推送导航无法在移动设备上运行

0 个答案: