javascript 在屏幕高度较低时，弹出侧菜单无法正确显示

6psbrbz9 于 2023-09-29 发布在 Java

关注(0)|答案(1)|浏览(84)

我有一个弹出的侧菜单
整页看起来都不错
enter image description here
但是当屏幕高度太小的时候（移动的设备的横屏就是这种情况），那么一切都会显示不正确
enter image description here
我该怎么办？
对于css中的屏幕宽度，我总是使用@media screen and (max-width: 767px)，但我还没有看到它用于高度
我认为我需要确保当屏幕高度太小，链接在页脚下时，只需隐藏页脚本身并减小文本大小，但最好的方法是什么？

let menuGeneral = $('#menu-general');

$('#menu-up-control').click(function () {
    $('.wrapper-main').css('opacity', '0.7');

    if ($(document).width() > 767) {
        menuGeneral.animate({ right: '0' }, 500);
    } else {
        menuGeneral.animate({ right: '0' }, 500);
    }
});

$('#menu-up-control-close').click(function () {
    $('.wrapper-main').css('opacity', '1');

    if ($(document).width() > 767) {
        menuGeneral.animate({ right: '-400px' }, 500);
    } else {
        menuGeneral.animate({ right: '-100vw' }, 500);
    }
});

.menu-up-control {
  float:right;
  font-size:26px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 100px 0 0;
}

.menu-up-control-close {
  width:15px;
}

.menu-up-control-close i {
  color:white;
  font-size:40px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 0px;
  margin:50px 0 0 40px;
}

.menu-general {
  position:fixed;
  width:400px;
  top:0;
  right:-400px;
  bottom:0;
  z-index:9999;
  background-color:black;

  @media screen and (max-width: 767px){
    width: 100vw;
    right: -100vw;
  }
}

.menu-general .menu-footer {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 0 40px 60px;
    background: violet;
}

.menu-main li, .menu-main li a {
  font-size:36px;
  font-weight:700;
}
.menu-main li {
    margin: 0 0 15px;
}
.menu-main li a {
  font-weight:bold;
  color:white;
  text-decoration:none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"  type='text/css'>

</head>
<body>

  <a id="menu-up-control" class="menu-up-control">
      <i class="fa fa-bars"></i>
  </a>

  <div id="menu-general" class="menu-general">
      <div id="menu-up-control-close" class="menu-up-control-close">
          <i class="fa fa-times"></i>
      </div>
      <ul class="menu-main">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
      </ul>
      <div class="menu-footer">
        <div class="item">Footer</div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/77187198/the-pop-up-side-menu-does-not-display-correctly-at-low-screen-heights

1条答案

按热度按时间

cwtwac6a1#

媒体查询也可以用于height，而不仅仅是width。
我建议在高度（带有媒体查询）下面（450px），将position从.menu-footer转换为relative，这样它就保持在底部，然后将overflow-yscroll添加到容器中，以便容纳里面的内容，如下所示：

let menuGeneral = $('#menu-general');

$('#menu-up-control').click(function() {
  $('.wrapper-main').css('opacity', '0.7');

  if ($(document).width() > 767) {
    menuGeneral.animate({
      right: '0'
    }, 500);
  } else {
    menuGeneral.animate({
      right: '0'
    }, 500);
  }
});

$('#menu-up-control-close').click(function() {
  $('.wrapper-main').css('opacity', '1');

  if ($(document).width() > 767) {
    menuGeneral.animate({
      right: '-400px'
    }, 500);
  } else {
    menuGeneral.animate({
      right: '-100vw'
    }, 500);
  }
});

.menu-up-control {
  float: right;
  font-size: 26px;
  top: 3px;
  position: relative;
  cursor: pointer;
  padding: 10px 100px 0 0;
}

.menu-up-control-close {
  width: 15px;
}

.menu-up-control-close i {
  color: white;
  font-size: 40px;
  top: 3px;
  position: relative;
  cursor: pointer;
  padding: 10px 0px;
  margin: 50px 0 0 40px;
}

.menu-general {
  position: fixed;
  width: 400px;
  top: 0;
  right: -400px;
  bottom: 0;
  z-index: 9999;
  background-color: black;
  @media screen and (max-width: 767px) {
    width: 100vw;
    right: -100vw;
  }
}

.menu-general .menu-footer {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 0 40px 60px;
  background: violet;
}

.menu-main li,
.menu-main li a {
  font-size: 36px;
  font-weight: 700;
}

.menu-main li {
  margin: 0 0 15px;
}

.menu-main li a {
  font-weight: bold;
  color: white;
  text-decoration: none;
}

/*new code from here:*/

@media (max-height: 450px) {
  #menu-general {
    overflow-y: scroll;
  }
  .menu-general .menu-footer {
    position: relative;
  }
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>

</head>

<body>

  <a id="menu-up-control" class="menu-up-control">
    <i class="fa fa-bars"></i>
  </a>

  <div id="menu-general" class="menu-general">
    <div id="menu-up-control-close" class="menu-up-control-close">
      <i class="fa fa-times"></i>
    </div>
    <ul class="menu-main">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
    <div class="menu-footer">
      <div class="item">Footer</div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 在屏幕高度较低时，弹出侧菜单无法正确显示

1条答案

相关问题

热门标签

最新问答