CSS 媒体查询 + Javascript - 菜单在桌面上消失但在移动设备上运行良好

Question

我遇到了 CSS 媒体查询和 UL 标记的问题。 基本上我有两个菜单（左右）和一个搜索栏。 当用户激活菜单时，菜单会按预期从屏幕边缘滑出。 单击/点击搜索栏时，菜单将向后滑动。这在移动设备上按预期工作，但在桌面版本上，右侧菜单会离开屏幕。

我在这里做错了什么？ 你能在这里解释一下吗？

这是我得到的：

HTML

<!DOCTYPE html>
<html>
<head>
<title> Title</title>
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="1.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
</head>
<body>

<div id = "container">

<div id="left-menu"onclick ="list1()" class ="dropbtn">menu </div>
<div id = "left-list" class="dropdown-content">
<ul>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
</ul>
</div>


<div id="find" onclick ="clear()"><input ="search" id="myInput"  placeholder="Search!"></input></div>




<div class="mob-menu">
<a href="#" class="icon" onclick="max()">&#9776;</a>
<div id="right-menu">
<ul>

<li><a href="#">Top level menu</a>
<div class="m2">
<ul>
<li><p>List item</p></li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li><a href="#">Top level menu 2</a>
<ul>
<div class="m3">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</div>

<script src="1.js"></script>
</body>
</html>

CSS

@media screen and (max-width:450px) and (min-width:321px){



/*Main container*/
#container{width:100%; background:rgba(0,0,0,1); height:auto; position:fixed;     top:0%; left:0%; float:left; z-index:3; user-select:none;  }


/*Left menu */
#left-menu{font-size:8vw; color:white;}
#left-list ul{  width:97%;  height:140vw; list-style-type:none;  padding:0px  0px 3% 0px;  overflow:auto;}
#left-list li{width:97%; height:auto; color:white; }
.dropdown-content{position:absolute; background:rgba(0,0,255,1); overflow:auto; width:102%; height:auto;  float:left; transition:0.2s; transform:translate(-100%, 0%); padding:0% 0% 100% 0%;}


/*right menu - Mobile*/
#right-menu{width:100%; height:auto;  margin:0% 0% 0% 0%; padding:5% 0% 500% 0%; position:absolute; z-index:5;  background:rgba(0,255,0,1); transform:translate(105%, 0%); transition:0.3s; }
#right-menu ul{width:100%; height:auto; list-style-type:none; }
#right-menu li a{text-decoration:none; float:left; text-align:center; width:100%; height:auto; display:block; margin:4% 0% -1% -2%; padding:4% 1% 4% 1%; line-height:1.2; background:rgba(255,255,255,1); color:black; font-weight:bold;  position:relative; left:-9%; font-weight:bold; font-size:4.5vw;}
#right-menu ul li .m3{ float:left; display:none;  width:0%; height:0px; text-align:center;  padding:0% 3% 0% 3%; font-size:4.9vw; font-weight:bold; border-radius:5px; position:relative; margin:2% 0% 0% -25%; transition:0.15s; overflow-x:hidden; }
#right-menu ul li:hover .m3{z-index:5; display:block; width:100%; height:300px; padding:0% 3% 5% 3%; overflow:auto;}
#right-menu ul li .m2{display:none; width:0px; height:0px;  margin:0% 0% 0% 0%; overflow:hidden;}
#right-menu ul li:hover .m2{display:block; height:auto; width:97%; margin:-10.15% 0% 15% 0%; padding:2% 0% 0% 0%; position:relative; left:-10%; top:0vw;}

.mob-menu a{font-weight:bold; font-size:10vw; float:right; text-decoration:none; text-align: center;  margin:-12% 0% 0% 0%; color:white; }


/*Search bar*/
#find input{position:fixed; left:11.5%; top:1.7vw; width:60vw; height:auto; background:rgba(255,255,255,1); font-weight:bold; text-align:center;  font-size:4.9vw; border-radius:5px; border:1px solid rgba(80,80,80,0.2); padding:1% 0% 1% 0%; color:black; box-shadow:0px 0px 1px 1px rgba(255,255,255,0.3); margin:0% 0% 0% 10%;}
#find input:hover{box-shadow:0px 0px 1px 1px rgba(0,0,0,0.3); }
#find input:focus{box-shadow:0px 0px 1px 1px rgba(0,0,0,0.5); }}


@media screen and (max-width:1920px) and (min-width:1777px){


/*Main container*/
#container{width:100%; background:rgba(0,0,0,1); height:auto; position:fixed; top:0%; left:0%; float:left; z-index:3; user-select:none; padding-bottom:2%;}


/*Left menu */
#left-menu{font-size:3vw;  width:8%; height:auto; margin:0% 0% -2% 0%; color:white;}
#left-list ul{  width:97%;  height:140vw; list-style-type:none;  padding:0px 0px 3% 0px;  overflow:auto;}
#left-list li{width:97%; height:auto; color:white; }
.dropdown-content{position:absolute; background:rgba(0,0,255,1); overflow:auto; width:102%; height:auto;  float:left; transition:0.2s; transform:translate(-100%, 0%); padding:0% 0% 100% 0%; margin:2% 0% 0% 0%; }


/*right menu - Mobile*/
#right-menu{width:100%; position:fixed; transform:translate(52%, -90%); z-index:3; transition:2s;}
#right-menu ul{ width:90%; height:auto; margin:0.0% 0% 0% 0%; padding:0% 0% 0% 0%; float:left; list-style-type:none;}
#right-menu li a{width:11.5%; height:auto; display:block; float:left; text-align:center; text-decoration:none; color:black; font-weight:bold; font-size:0.8vw;  background:rgba(255,255,255,1); margin:21.0% 1.5% 1% 0%; padding:0.85% 0% 0.85% 0%; border:1px solid rgba(80,80,80,0.2); border-radius:5px; float:left; }
#right-menu ul li .m3{background:rgba(0,255,0,1); border-radius:5px; float:left; display:none;  width:30%; height:auto; margin:-1.0% 0% 1% 0%; text-align:center;  padding:3% 3% 5% 3%; font-size:0.9vw; font-weight:bold; border:1px solid rgba(80,80,80,0.2); border-radius:10px; position:absolute; left:10.5%; z-index:1; overflow:auto; }
#right-menu ul li:hover .m3{display:block; height:auto;  }
#right-menu li a:hover{background:rgba(0,0,0,1); color:white;}
#right-menu ul li .m2{background:rgba(0,255,0,1); border-radius:5px; float:left; display:none;  width:30%; height:auto; margin:21.5% 0% 1% 0%; text-align:center;  padding:3% 3% 5% 3%;font-size:0.9vw; font-weight:bold; border:1px solid rgba(80,80,80,0.2); border-radius:10px; position:absolute; left:-0.5%; z-index:1; overflow:auto;}
#right-menu ul li:hover .m2{display:block; height:auto;}



.mob-menu a{display:none;}


/*Search bar*/
#find input{ position:fixed; left:11.5%; top:0vw; width:20vw; height:auto; background:rgba(255,255,255,1); font-weight:bold; text-align:center;  font-size:1vw; border-radius:5px; border:1px solid rgba(80,80,80,0.2);  padding:1% 0% 1% 0%; color:black; box-shadow:0px 0px 1px 1px rgba(255,255,255,0.3); margin:0% 0% 0% 10%;}
#find input:hover{box-shadow:0px 0px 1px 1px rgba(0,0,0,0.3); }
#find input:focus{box-shadow:0px 0px 1px 1px rgba(0,0,0,0.5); }}

JavaScript

function max(){
var x= document.getElementById('right-menu');
    if (x.style.transform==="translate(0%, 0%)"){
        x.style.transform="translate(105%, 0%)"  
    } else {
        x.style.transform="translate(0%, 0%)";}}


var input = document.getElementById('find');
var message = document.getElementById('right-menu');
var msg = document.getElementById('left-list');
input.addEventListener('focusin', function() {
message.style.transform = "translate(100%, 0%)" });
input.addEventListener('focusin', function() {
msg.style.transform = "translate(-100%, 0%)" });



/*Menu*/
function list1(){
var r= document.getElementById('left-list');
if (r.style.transform==="translate(0%, 0%)"){
        r.style.transform="translate(-100%, 0%)"  
    } else {
        r.style.transform="translate(0%, 0%)";}}

Answer 1

您的 CSS 非常好，但是您在媒体查询中封装了太多内容。

最好在媒体查询之外编写 CSS 的第一部分，重点关注适用于所有屏幕分辨率的内容。

我用您的代码创建了一个代码笔并对其进行了一些修改：https://codepen.io/vic3685/pen/xWdZzM

我没有清理你的旧css，只是在最顶部修改了一些东西：

body, html {margin: 0; padding: 0; }
#container{width:100%; background:rgba(0,0,0,1); height:auto;color: white; }

/*Left menu */
#left-menu{
  color:white;
}

#left-list ul{  
    width:100%;
  list-style-type:none;          
  padding:0px  0px 3% 0px;  
  overflow:auto;

}
#left-list li{
  width:97%; height:auto; color:white; }

.dropdown-content{position:absolute; background:rgba(0,0,255,1);

溢出：自动；宽度：102%；高度：自动；向左飘浮;过渡：0.2s；变换：翻译（-100%，0%）；填充：0% 0% 20px 0%;}

@media (min-width: 451px) {
  #left-list {
    width:200px;
    position: absolute; left: 0; top: 50px; 
  } 
  #right-menu {
    width: 200px; 
    position: absolute; right: 0; top: 50px; 
    height:auto;  margin:0% 0% 0% 0%; padding:5% 0% 500% 0%; position:absolute; z-index:5;  background:rgba(0,255,0,1); transform:translate(105%, 0%); transition:0.3s; 
    transition:0.15s;
  }
  #left-list ul {padding-left: 30px; } 
  #left-menu, #find, .mob-menu {float: left; height: 50px;}
  .mob-menu {float:  right;}
  .mob-menu > a {display: block; text-align: right; }
  #container:after {
    content: ""; 
    display: block;
    clear: both; 
  }
}

我的更改包括： - 在媒体查询之外提取一些代码。 - 为之前没有 css 的任何 > 450px 的内容创建媒体查询。

要让菜单从侧面显示，您需要将它们定位在侧面，这就是我使用float 和之后使用clear:both 的原因（参见#container:after 的css）。您可以改用 flexbox，但我不知道您需要什么浏览器支持。 此外，我在菜单内容中添加了 position:absolute，以防您希望它们独立于两者之间的内容。

您必须自己润色样式，但我认为这应该可以帮助您入门。