时间戳

首页 > 解决方案 > 在响应式导航栏中将下拉菜单显示为块的问题

javascript - 在响应式导航栏中将下拉菜单显示为块的问题

问题描述

我正在尝试构建一个响应式导航栏。一切似乎都工作正常，但是一旦屏幕缩小并出现按钮，单击按钮时菜单将无法正确显示。

答案可能很简单，但我才刚刚开始，似乎无法弄清楚。我试图修改 CSS 代码以获得正确的结果，这意味着菜单应该在按钮下方的块中显示，但我尝试的任何方法似乎都不起作用。

我包含了用于导航栏的 HTML、CSS 和 Javascript 代码。帮助！谢谢你们。

<html>
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                    <title>X</title>
                    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i" rel="stylesheet">
                        <link rel="shortcut icon" href="images/favicon.ico" />
                        <link rel="stylesheet" type="text/css" href="styles/main.css">
                            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                            </head>
                            <body>
                                <div class="topnav" id="myTopnav">
                                    <nav role="banner">
                                        <a href="#">
                                            <img id="topnavLogo" src="images/logo-navbar-white.png" width="240" height="180">
                                            </a>
                                            <ul>
                                                <li>
                                                    <a class="page-icon" href="#">Log in</a>
                                                </li>
                                                <li>
                                                    <a class="page-icon" href="#">Sign up</a>
                                                </li>
                                                <li>
                                                    <a class="page-icon" href="#">About</a>
                                                </li>
                                            </ul>
                                            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                                                <i class="fa fa-bars"></i>
                                            </a>
                                        </nav>
                                    </div>
                                    <style>
            #topnavLogo{
                float:left;
                color: #fff;
                text-align: left;
                text-decoration: none;
                font-variant: small-caps;
                padding-top:-50px;
                padding-bottom: 15px;
                padding-left: 30px;
                margin:-55px;
            }

            .topnav {
                width: 100%;
                height: 60px;
                background-color: #0008;
                line-height: 60px;
                position: fixed;
                display:inline-block;
              }

            ul li{
                  display:inline;
                  float:right;
              }

              .active {
                background-color: #4CAF50;
                color: white;
              }

              .topnav .icon {
                display: none;
              }

              .page-icon{
                color: #fff;
                text-align: center;
                padding: 5px 5px;
                text-decoration: none;
                font-size: 17px;
                margin-right: 30px;
                font-family: 'Lato', sans-serif;
                font-variant: small-caps;
              }

              .page-icon:hover {
                color: #9bc0d3;
              }

              @media screen and (max-width: 600px) {
                .topnav li a {display: none;}
                .topnav a.icon {
                  float: right;
                  display: block;
                  padding: 0 1em 0 0;
                  color: #fff;
                  font-size: 1.5em;
                }
                  .topnav a.icon:hover {
                    color: #9bc0d3;
                }
              }

              @media screen and (max-width: 600px) {
                .topnav.responsive {position: relative;}
                .topnav.responsive a.icon {
                  position: absolute;
                  right: 0;
                  top: 0;
                }

                .topnav.responsive a {
                    float: none;
                    display: block;
                    text-align: left;
                    color: #9bc0d3;  
                }
              }
            </style>
<script>

            function myFunction() {
                var x = document.getElementById("myTopnav");
                if (x.className === "topnav") {
                  x.className += " responsive";
                } else {
                  x.className = "topnav";
                }
              }
        </script>
    </body>
</html>

标签： javascripthtmlcssnavbar

解决方案

您正在设置display: blockanddisplay: none到<a>元素而不是它的 wrapper <li>。

为了让您的菜单正确显示，您需要添加以下 2 条规则：

@media screen and (max-width: 600px) {
  .topnav ul > li {display: none;}
  .topnav.responsive ul > li {width:100%; display: block;}
}

推荐阅读