个人中心
gpt4 book ai didi

javascript - 调整浏览器大小时，我的导航消失

转载 作者：行者123 更新时间：2023-11-28 01:47:09 24 4
gpt4 key购买 nike

所以，这是我目前正在处理的网站，除此之外一切都很好:
正如审查我当前代码的其中一位人员警告我的那样，我的菜单/导航在其媒体查询状态下打开和关闭后消失，并调整回监视器宽度。

已简化 - 按照以下步骤查看问题:
打开代码片段(我建议使用 CodePen，因为结果在其中正确显示)并简要欣赏我的设计。就是这样，谢谢你的帮助。开个玩笑，下一步:将浏览器调整为上述大小(宽度 480 像素或更小)，以便您在右上角看到汉堡菜单图标，单击图标打开菜单，关闭它，然后将浏览器更改回完整屏幕尺寸!你看到左边的导航栏了吗？!
我在这里缺少什么？我想它应该是一些后续状态的更多 JavaScript 行(刚开始学习 JS，所以我不知道)，但请研究它并教我可能的解决方案。
是的，我知道，它不应该影响我通过媒体查询定位的任何移动用户，因为没有人会像那样调整它的大小，而且几乎没有人会看到它，但是......首先 - 我想让它变得完美，其次 - 如果我错过了什么或做错了什么，我想听听它并学习如何修复它/使它正确。
这是 CodePen 链接:https://codepen.io/anon/pen/VxmMrJ
这是代码片段:

function myFunction() {
    var x = document.getElementById("menu");
    if (x.style.display === "block") {
        x.style.display = "none";
    } 
    else {
        x.style.display =  "block";
    }
}
@media only screen and (max-width: 480px) {
    
    .networks, .sidenav, .image-row, .foot1, .foot3 {
    display: none;
    }
    
    body {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #e1e1e1;
    }
    
    .page-wrap {
    display: block;
    margin-top: 0px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    }
    
    .logo {
    display: inline-block;
    float: left;
    width: 75%;
    margin-left: 2.5%;
    }
    
    .logoImg {
    width: 200%;
    }
    
    .menuIcon {
	display: inline-block;
    float: right;
	width: 10%;
    margin-top: 6%;
	margin-right: 5.5%;
    border: none;
    z-index: 3;
    }

    .navButton {
    display: block;
    width: 100%;
    background-color: #e1e1e1;
    border: none;
    z-index: 3;
    }
    
    .navButton:focus {
    outline: none;
    }
    
    #menu {
    display: none;
    position: relative;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 2.5%;
    padding-bottom: 2.5%;
    z-index: 3;
    }
    
    .main {
    display: block;
    width: 90%;
    height: auto;
    padding-bottom: 7.5%;
    margin-top: 2.5%;
    margin-left: 5%;
    margin-right: 5%;
    z-index: 1;
    }
    
    .textbox {
	display: block;
    width: 95%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.25em;
    text-align: justify;
    }
    
    .myPhoto {
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    }
    
    .foot2 {
    display: block;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
    font-size: 1.25em;
    color: #324B64;
    }
    
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    
    <link rel="stylesheet" href="test.css">
    <script src="myScript.js"></script>
    
    <title>Luka Novak</title>
</head>

<body>
<div class="page-wrap">
        
    <div class="header">
        <div class="logo">
            
        </div>
        <div class="networks">
            <a href="#"><img src="facebook-symbol.svg" class="socialnet" alt="facebook"></a>
            <a href="#"><img src="instagram-symbol.svg" class="socialnet" alt="instagram"></a>
        </div>
            <div class="menuIcon">
            <button onclick="myFunction()" class="navButton">
                <img src="https://cdn3.iconfinder.com/data/icons/gray-toolbar/512/menu-512.png" 
                     alt="menu" 
                     class="iconImg">
            </button>
            </div>
    </div>
    
    <div class="sidenav col-5" id="menu">
        <a href="#" class="navlink">about us</a>
        <a href="#" class="navlink">services</a>
        <a href="#" class="navlink">contact</a>
    </div>
    
    <div class="main col-18">
        
        <article class="textbox">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
        </article>
        
        <div class="image-row">
            <div class="image1">
            
            </div>
                
            <div class="image2">
                    
            </div>
                
            <div class="image3">
                
            </div>
        </div>
    </div>
    
    
    
    <div class="footer col-24">
        <p class="foot1">Some info</p>
        <p class="foot2">design by me</p>
        <p class="foot3">More info</p>
    </div>
    
</div>
    
</body>    

</html>

最佳答案

最好使用仅在您的移动媒体查询中更改的 CSS 类来执行此操作。

https://codepen.io/anon/pen/KRmYVR

CSS

@media only screen and (max-width: 480px) {
  .mobileshow {
    display: block !important;
  }
}

JS

function myFunction() {
  var x = document.getElementById("menu");
  if(x.classList.contains("mobileshow")) {
    x.classList.remove("mobileshow");
  }
  else {
    x.classList.add("mobileshow");
  }
}

关于javascript - 调整浏览器大小时，我的导航消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50138028/

24 4 0
文章推荐： c++ - 在 C++ 中，按序号链接和按名称链接是什么意思？
文章推荐： c++ - 这个boost::bind语句怎么理解？和网上查的不一样
文章推荐： javascript - Angularjs 点击事件在 jqgrid 列中不起作用
文章推荐： html - 使用 CSS 保持两列相同的高度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com