Print and language selection menu

by Sascha

HTML

<div id="selector-trigger">
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/7/77/Icons-flag-en.png"
  />
  <img
    src="https://github.com/legacy-icons/famfamfam-silk/blob/master/src/printer.png?raw=true"
  />
  <div id="selection-menu">
    <ul>
       <li>
        <a href="bla"
          ><img
            src="https://github.com/legacy-icons/famfamfam-silk/blob/master/src/printer.png?raw=true" /></a
        >
      </li>
      <li>
        <a href="bla"
          ><img
            src="https://upload.wikimedia.org/wikipedia/commons/7/77/Icons-flag-en.png" /> EN</a
        >&nbsp;<a href="">(PDF)</a>
      </li>
      <li>
        <a href="bla"
          ><img
            src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Icons-flag-de.png" /> DE</a
        >&nbsp;<a href="">(PDF)</a>
      </li>
    </ul>
  </div>
</div>

SCSS

body {
  font-family: "Open Sans", sans-serif;
}

#selector-trigger {
  position: absolute;
  top: 0;
  right: 0;

  #selection-menu {
    display: none;
    position: absolute;
    width: 120px;
    top: 0;
    right: 0;
    border: 2px solid #ccc;
    background: white;
    border-top: none;
    border-right: none;
    
    ul {
      padding-left: 10px;
    }
    
    li {
      list-style: none;

      img {
        text-align: middle;
      }
      a {
        color: black;
        text-decoration: none;
      }
    }
  }
}

JavaScript

function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}  

docReady(() => {
	document.getElementById("selector-trigger").onmouseover = function() {
  	document.getElementById("selection-menu").style.display='inline-block';
  }
  document.getElementById("selector-trigger").onmouseleave = function() {
  	document.getElementById("selection-menu").style.display='none';
  }
});