jquery 菜单幻灯片动画全屏移动的屏幕

yws3nbqq 于 2023-08-04 发布在 jQuery

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

我在页面上有一个滑出式菜单，现在它是350px宽

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

    $('#menu-up-control').click(function () {
        menuGeneral.animate({ right: '0' }, 500);
    });

    $('#menu-up-control-close').click(function () {
        menuGeneral.animate({ right: '-350px' }, 500, function () {
            menuGeneral.hide();
        });
    });

.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:350px;
  top:0;
  right:-350px;
  bottom:0;
  z-index:9999;
  padding:10px;
  background-color:black;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
          rel="stylesheet"  type='text/css'>

<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>

但我想让它为移动的设备，从767px开始，这个菜单占据了整个宽度，这取决于屏幕
我将width: 100%添加到css类.menu-general中
在js中添加以下代码

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

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

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

型
但是对于桌面，在.menu-general类中有right:-350px;，但是我如何根据移动的上的大小隐藏它，并且一切正常？？

jquery

来源：https://stackoverflow.com/questions/76772114/menu-slide-animation-full-screen-for-mobile-screens

1条答案

按热度按时间

vddsk6oq1#

我修复了它。我添加的CSS代码覆盖了整个屏幕：

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

字符串
我正确地添加了if-else语句：

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

    if ($(document).width() > 767) {
      $('#menu-up-control').click(function () {
          menuGeneral.animate({ right: '0' }, 500);
      });

      $('#menu-up-control-close').click(function () {
          menuGeneral.animate({ right: '-350px' }, 500, function () {
              menuGeneral.hide();
          });
      });
    }else{
      $('#menu-up-control').click(function () {
          menuGeneral.animate({ right: '0' }, 500);
      });

      $('#menu-up-control-close').click(function () {
          menuGeneral.animate({ right: '-100vw' }, 500, function () {
              menuGeneral.hide();
          });
      });
    }

x

.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:350px;
  top:0;
  right:-350px;
  bottom:0;
  z-index:9999;
  padding:10px;
  background-color:black;

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

.menu-main li, .menu-main li a {
  font-size:36px;
  font-weight:700;
}
.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>

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

的字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 菜单幻灯片动画全屏移动的屏幕

1条答案

相关问题

热门标签

最新问答