下拉菜單在移動視圖中未按預期工作

Question

我正在嘗試向我的網站的移動版本添加一個下拉菜單，但它似乎不起作用（我對 web 設計非常陌生）。

單擊相應圖標可正確顯示下拉菜單； 問題是它也可以通過單擊topnav菜單的任何點來顯示。 我只想通過單擊下拉菜單圖標來顯示下拉菜單。 此外，我希望通過單擊其外部的任何點來使下拉菜單消失。 這是我的代碼：

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

在這里你可以試試我的代碼。

希望你們能幫助我。

Answer 1

你可以檢查這個答案。 我已經完成了第一部分，另一個人幫助我完成了第二部分。 下面的代碼 -

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