CODEWITHSUNDEEP
javascripthtmlonclicknav
Mauro
Mauro

Reputation: 111

How to close nav when clicking on link or outside of nav?

everyone,

I have only just started to write my first website. Now I have encountered a first problem, which I cannot solve without your help.

How can I change my Javascript so that my NAV element closes by clicking on one of the links and by clicking outside the element?

You know what I mean?

I hope you can help me, thank you very much!

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="Design.css" rel="stylesheet" type="text/css">
</head> 
<body>      
<header>

<div class="header">

    <img src="" onClick="myFunction()"></img>


<h1>
</h1>

</div>

<hr>

</header>   

    <script>    
function myFunction() {
    var x = document.getElementById("myNAV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

}   
</script>   

<nav id="myNAV">

  <p>&nbsp;</p>
  <p>WORK</p>
  <p> <a href="#"></a>  </p> 
  <p> <a href="#"></a> </p>
  <p> <a href="#"></a> </p>
  <p> <a href="#"></a> </p>
  <p> <a href="#"></a> </p>
  <p> <a href="#"></a> </p>
  <p>&nbsp;</p>
  <p>ME</p>
  <p></p>
  <p></p>
  <p>AARAU</p>
  <p> <a href="</a> </p>
  <p>&nbsp;</p>
  <p> <a href="#">IMPRESSUM</a> </p>
  <p>&nbsp;</p>
</nav>

</body>
</html>



@charset "UTF-8";

html {
    height: 100%;
    margin-top: -13px;
    margin-left: -7px;
}

body {
    font-family: Helvetica, "Helvetica Neue", "Myriad Pro", "sans-serif", "Frutiger LT Std 65 Bold";
    height: 100%;
    min-height: 100%;
}



body header hr {
    border: none;
    height: 2px;
    color: black;
    background-color: #333333;
}

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
    margin-top: 0px;
}


body header h1 {
    font-weight: bold;
    text-indent: 20px;
    height: 41px;
    font-size: 120%;
    display: table-cell;
    vertical-align: middle  
}
.header {
    height: 41px;
}
body header img {
    float: left;
    width: 56px;
    height: 41px;
}
#myNAV {
    background-color: #01FFFF;
    width: 50%;
    height: 100%;
    margin-top: -17px;
    padding-top: 0px;
    min-width: 500px;
}
body header {
    height: 42px;
}
#myNAV p {
    font-size: 120%;
    font-weight: bold;
    text-indent: 76px;
    padding-top: 10px;
    margin-top: 19px;
    clear: left;
}


/* unvisited link */
#myNAV p a:link {
    color: #000000;
    text-decoration: none;
}

/* visited link */
#myNAV p a:visited {
    color: #000000;
    text-decoration: none;
}

/* mouse over link */
#myNAV p a:hover {
    color: #F8F8F8;
    text-decoration: none;
}

/* selected link */
#myNAV p a:active {
    color: #F1F1F1;
    text-decoration: none
}

Here is the demo link:

Upvotes: 0

Views: 2013

Answers (2)

Chinonso Chukwuogor
Chinonso Chukwuogor

Reputation: 569

You need to bind a click event listener to the DOM

//Store the nav in a variable
var nav = document.getElementById('myNAV')

var domClickHandler =  function(event){
    nav.style.display = 'none'
}

document.addEventListener('click', domClickHandler)

Also modify your toggle function like so

function myFunction(event) {
  // this would stop the event from reaching the DOM click listener
  event.stopPropagation()

  var x = document.getElementById("myNAV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Upvotes: 1

PlatypusMaximus
PlatypusMaximus

Reputation: 74

You need to setup an event listener on the nav div

function toggleVisibilityEventHandler(event) {
    // event is the javascript event that triggered this function call

    // currentTarget is the element we bound this event to
    // your nav bar in this case
    // you also have event.target to get the element that was clicked
    let element = event.currentTarget;
    if (element.style.display === "none") {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
}
// find your element ONCE instead of crawling the DOM every time to find it
let nav = document.getElementById("myNAV");

// when the 'click' event is fired on the nav element, call the provided function
nav.addEventListener('click', toggleVisibilityEventHandler);

Upvotes: 0

Related Questions