Dropdown menu is not working as expected in mobile view

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).

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

Dropdown menu is not working as expected in mobile view

Question

1 answers

solution1
0 2020-12-27 17:48:57

Dropdown menu is not working as expected in mobile view

Question

1 answers

solution1 0 2020-12-27 17:48:57

solution1
0 2020-12-27 17:48:57