Question

我想在点击时垂直显示菜单而不推送页面中的内容。有没有办法只使用CSS样式。我正在使用RWD和媒体查询来开发它。

Answer 1

如果我理解正确，您可以尝试将导航菜单滑出，而不是在页面内容推送时。我已经创建了一个片段，向您展示可以通过绝对定位轻松完成。我确定还有其他方法，但这对我来说一直都很好。

＆＃13;

$('#togglenav').on('click', function() {
  if ($('#menu').hasClass('shrinkMenu')) {
    $('#menu').removeClass('shrinkMenu');
  } else {
    $('#menu').addClass('shrinkMenu');
  }

})

＆＃13;

body {
  width: 99%;
  height: 100vh;
  background-color: darkred;
  display: block;
  position: relative;
}
#content {
  height: 90%;
  width: 100%;
  margin-top: 5%;
  background-color: cornflowerblue;
  display: block;
}
#togglenav {
  display: block;
  padding: 1%;
  width: 5%;
  position: absolute;
  right: 1%;
  top: 1%;
  background-color: darkslategrey;
  text-align: center;
  border: 1px inset grey;
  border-radius: 5px;
  box-shadow: inset 0 0 5px black;
  cursor: pointer;
}
#menu {
  display: block;
  width: 300px;
  height: 300px;
  background-color: navajowhite;
  position: absolute;
  transition: all .3s ease;
}
.shrinkMenu {
  height: 0 !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body>

  <span id="togglenav">Click Me!</span>
  <span id="menu" class="shrinkMenu"></span>
  <span id="content"></span>

</body>

＆＃13;

显示垂直菜单（iphone4）而不推送页面中的内容

1 个答案: