个人中心
gpt4 book ai didi

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

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

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

答案可能很简单，但我才刚刚开始，似乎无法弄明白。我已尝试修改 CSS 代码以获得正确的结果，这意味着菜单应显示在按钮下方的 block 中，但我的尝试似乎无济于事。

我包含了用于导航栏的 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>

最佳答案

当按下小屏幕菜单按钮时，下面的代码使菜单全 Angular 显示在标题下方。在大屏幕上时，它充当普通标题。我还尝试了一些行为不当的 Logo 图像。

如果这不是您所希望的，请告诉我。

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
body {
  margin: 0px;
}

#topnavLogo {
  float: left;
  color: #fff;
  text-align: left;
  text-decoration: none;
  font-variant: small-caps;
  padding-left: 30px;
  max-height: 60px;
  width: 240px;
  height: 50px;
  margin: 5px 5px 5px 25px;
  background-image: url('https://via.placeholder.com/240x80.png/09f/fff');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}

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

.topnav ul {
  margin: 0px;
}

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.responsive a.icon {
    color: #9bc0d3;
  }
  
  .topnav li a {
    display: none;
    margin: 0px;
    float: none;
  }
  
  .topnav.responsive li a {
    display: inherit;
  }
  
  .topnav a.icon {
    float: right;
    display: block;
    padding: 0 1em 0 1em;
    color: #fff;
    font-size: 1.5em;
  }
  
  .topnav a.icon {
    position: absolute;
    right: 0px;
    top: 0px;
    padding-left: 15px;
  }
  
  .topnav a.icon:hover {
    color: #9bc0d3;
  }
  
  .topnav ul {
    width: 100%;
    position: fixed;
    top: 60px;
    bottom: 0px;
    right: 0px;
    background: #0008;
    display: none;
    overflow-y: scroll;
  }
  
  .topnav.responsive ul {
    display: inherit;
  }
  
  nav ul li {
    width: 100%;
  }
  
}
<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">

<div class="topnav" id="myTopnav">
  <nav role="banner">
    <a href="#" id="topnavLogo">

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

关于javascript - 在响应式导航栏中将下拉菜单显示为 block 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53898400/

24 4 0
文章推荐： html - Sass mixin 输出 css 与 calc 不同的输出比手工简化
文章推荐： javascript - 如果在文档加载后运行，事件监听器将收到空详细信息
文章推荐： javascript - 更改占位符的字体大小
文章推荐： javascript - Chartist 饼图，下一行需要标签
行者123
个人简介

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

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