Javascript Drop Down Menu

Updated: February 02, 2017

This post gives an example of JavaScript dropdown menu. jQuery and libraries are not used because I want to keep it pure without dependency.

Please first see:

Demo

Source Code for Demo (html):

vanilla-javascript-dropdown-menu-example.html | repository | view raw

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vanilla Javascript DropDown Menu Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="menu-dropdown">Menu ▼</div>
    <div id="menuDiv-dropdown" class="invisible">
      content<br>content<br>content
    </div>

  <script src="vanilla-javascript-dropdown-menu-example.js"></script>
  </body>
</html>

Source Code for Demo (JavaScript):

vanilla-javascript-dropdown-menu-example.js | repository | view raw

var dropdownMenuDiv = document.getElementById("menuDiv-dropdown");
var dropdownMenu = document.getElementById("menu-dropdown");
// hide popup div when clicking outside the div
// http://www.webdeveloper.com/forum/showthread.php?t=98973
document.onclick = check;
// Event accessing
// http://www.quirksmode.org/js/events_access.html
// Event properties
// http://www.quirksmode.org/js/events_properties.html
function check(e){
  var target = (e && e.target) || (event && event.srcElement);

  if (!checkParent(target, dropdownMenuDiv)) {
    // click NOT on the menu
    if (checkParent(target, dropdownMenu)) {
      // click on the link
      if (dropdownMenuDiv.classList.contains("invisible")) {
        // Dynamically retrieve Html element (X,Y) position with JavaScript
        // http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element
        dropdownMenuDiv.style.left = dropdownMenu.getBoundingClientRect().left + 'px';
        dropdownMenuDiv.classList.remove("invisible");
      } else {dropdownMenuDiv.classList.add("invisible");}
    } else {
      // click both outside link and outside menu, hide menu
      dropdownMenuDiv.classList.add("invisible");
    }
  }
}

function checkParent(t, elm) {
  while(t.parentNode) {
    if( t == elm ) {return true;}
    t = t.parentNode;
  }
  return false;
}

Source Code for Demo (css):

style.css | repository | view raw

#menu-dropdown {
  font-size: 2em;
  color: blue;
  margin-left: 20px;
}

#menu-dropdown:hover {
  cursor: pointer;
}

#menuDiv-dropdown {
  font-size: 2em;
  padding: 10px;
  position: absolute;
  border: 1px solid blue;
}

.invisible {
  display: none;
}

References:

[1]Hide Div When Clicked Outside It

[2]Retrieve the position (X,Y) of an HTML element

[3]hide popup div when clicking outside the div

[4][Golang] GopherJS DOM Example - Dropdown Menu