下拉菜单在移动视图中未按预期工作

Question

I'm trying to add a dropdown menu to the mobile version of my site, but it doesn't seem to be working (I'm very new to web design).我正在尝试向我的网站的移动版本添加一个下拉菜单，但它似乎不起作用（我对 web 设计非常陌生）。

The dropdown menu is correctly shown by clicking on the correspondent icon;单击相应图标可正确显示下拉菜单； the problem is that it is also shown by clicking at any point of the topnav menu.问题是它也可以通过单击topnav菜单的任何点来显示。 I just want the dropdown menu to appear only by clicking on the dropdown menu icon.我只想通过单击下拉菜单图标来显示下拉菜单。 Moreover, I'd the dropdown menu to disappear by clicking at any point outside of it.此外，我希望通过单击其外部的任何点来使下拉菜单消失。 This is my code:这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #146875;
}

.topnav a {
  float: left;
  display: block;
  color: #ffffFF;   /*font color*/
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #00e5ff;  /*top nav menu back hover color*/
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 900px)  /* Mobile Screen Breakdown */
{
  .topnav a:not(:nth-child(-n+3)) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home">Home</a>
  <a href="#floorplan">Floor Plan</a>
  <a href="#address">Address</a>
  <a href="#projectoverview">Project Overview</a>
  <a href="#locationadvantage">Location Advantage</a>
  <a href="#download">Download</a>
  <a href="#similarprojects">Similar Projects</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
<script>

let topnav = document.querySelector("#myTopnav");

topnav.onclick = function() {
  this.classList.toggle('responsive');
}

</script>
</body>
</html>

Here you can try my code. 在这里你可以试试我的代码。

Hope you guys will help me.希望你们能帮助我。

Answer 1

You can check this answer .你可以检查这个答案。 I have done the first part and another person helped me to do the second part.我已经完成了第一部分，另一个人帮助我完成了第二部分。 Code below-下面的代码 -

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <style> body { margin; 0: font-family, Arial, Helvetica; sans-serif. }:topnav { overflow; hidden: background-color; #146875. }:topnav a { float; left: display; block: color; #ffffFF: /*font color*/ text-align; center: padding; 14px 16px: text-decoration; none: font-size; 17px. }:topnav a:hover { background-color; #00e5ff: /*top nav menu back hover color*/ color; black. }.topnav:icon { display; none: } @media screen and (max-width. 900px) /* Mobile Screen Breakdown */ {:topnav a:not(:nth-child(-n+3)) { display; none. }.topnav a:icon { float; right: display; block: } } @media screen and (max-width. 900px) {.topnav:responsive {position; relative.}.topnav.responsive:icon { position; absolute: right; 0: top; 0. }.topnav:responsive a { float; none: display; block: text-align; left: } } </style> </head> <body> <div class="topnav" id="myTopnav" > <a href="#home">Home</a> <a href="#floorplan">about Us</a> <a href="#address">Address</a> <a href="javascript;void(0)." class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document;getElementById("myTopnav"). if (x.className === "topnav") { x;className += " responsive". } else { x;className = "topnav". } } var disappear = document;getElementById('myTopnav'). window.onclick = function(event) { if (event.target.parentNode.== disappear && event.target.parentNode;parentNode !== disappear){ disappear.className = "topnav"; } } </script> </body> </html>

下拉菜单在移动视图中未按预期工作

问题描述

1 个解决方案

解决方案1
0 2020-12-27 17:48:57

下拉菜单在移动视图中未按预期工作

问题描述

1 个解决方案

解决方案1 0 2020-12-27 17:48:57

解决方案1
0 2020-12-27 17:48:57