Adaptive horizontal menu with drop-down list

document.addEventListener("DOMContentLoaded", function() {
  function n(a) {
    var b = a.charAt(0);
    a = a.split(b);
    this.clickSelector = a[1];
    this.classBehavior = a[2].trim().split(" ")[0];
    this.classValue = a[3];
    this.targetSelector = a[5]
  }

  function f(a, b, c, d) {
    this.clickSelector = a;
    this.classBehavior = "s" == b.charAt(b.length - 1) ? b.substring(0, b.length - 1) : b;
    this.classValue = "." == c.charAt(0) ? c.substring(1, c.length) : c;
    this.targetSelector = d;
    this.createEventListener()
  }
  for (var g = document.getElementsByTagName("code"), h = g.length, e, k; h--;) {
    var l =
      g[h],
      m = l.textContent.trim();
    if (0 === m.lastIndexOf("clicking on", 0)) {
      e = l;
      k = m;
      break
    }
  }
  e && (e.parentNode.removeChild(e), f.prototype.createEventListener = function() {
    function a(a) {
      switch (b.targetSelector) {
        case "target":
        case "this":
        case "it":
        case "itself":
        case void 0:
          a.target.classList[b.classBehavior](b.classValue);
          break;
        default:
          for (var c = document.querySelectorAll(b.targetSelector), d = c.length; d--;) c.item(d).classList[b.classBehavior](b.classValue)
      }
      "a" == a.target.nodeName.toLowerCase() && a.preventDefault()
    }
    var b =
      this,
      c = document.querySelectorAll(b.clickSelector),
      d = c.length;
    if (1 > d) throw Error("There's no element matching your \"" + b.clickSelector + '" CSS selector.');
    for (; d--;) c.item(d).addEventListener("click", a)
  }, k.split("clicking on").forEach(function(a) {
    a && (a = new n(a.trim()), new f(a.clickSelector, a.classBehavior, a.classValue, a.targetSelector))
  }))
});

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  outline: 0;
}

header {
  height: 80px;
  background: lightseagreen;
}

.mobile-button {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 24px;
  text-align: center;
  background: linear-gradient(white, lightgray);
  position: absolute;
  right: 10px;
  top: 10px;
  display: none;
  cursor: pointer;
}

.mobile-button::selection {
  background: transparent;
}

.mobile-button:hover {
  background: linear-gradient(lightgray, white);
}

@media only screen and (max-width: 480px) {
  .mobile-button {
    display: block;
  }
}

@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .mobile-button {
    display: block;
  }
}

.left-to-right,
.menu-element {
  display: inline-block;
  vertical-align: top;
}

.mobile-block {
  width: 100%;
  display: block;
}

.menu {
  display: block;
}

@media only screen and (max-width: 480px) {
  .menu {
    display: none;
  }
}

@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .menu {
    display: none;
  }
}

.menu-element {
  width: 150px;
  height: 60px;
  background: lightgray;
  border-radius: 4px;
  margin: auto 10px;
}

@media only screen and (max-width: 480px) {
  .menu-element {
    width: 100%;
    display: block;
    margin-bottom: 4px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .menu-element {
    width: 100%;
    display: block;
    margin-bottom: 4px;
  }
}

.menu-link {
  font-size: 16px;
  background: lightgrey;
  width: 150px;
  height: 60px;
  display: block;
  text-align: center;
  line-height: 60px;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-link:hover {
  background: #ececec;
}

.menu-link:active {
  background: #b9b9b9;
}

@media only screen and (max-width: 480px) {
  .menu-link {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .menu-link {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
}

.show {
  display: block;
}

<div class="wrapper">
  <header>
    <span class="logo">logo</span>
    <div class="mobile-button">&#77;</div>
  </header>
  <nav class="menu-wrap">
    <ul class="menu">
      <li class="menu-element">
        <a href="#" class="menu-link">ссылка1</a>
      </li>
      <li class="menu-element">
        <a href="#" class="menu-link">ссылка2</a>
      </li>
      <li class="menu-element">
        <a href="#" class="menu-link">ссылка3</a>
      </li>
      <li class="menu-element">
        <a href="#" class="menu-link">ссылка4</a>
      </li>
      <li class="menu-element">
        <a href="#" class="menu-link">ссылка5</a>
      </li>
      <li class="menu-element">
        <a href="#" class="menu-link">ссылка6</a>
      </li>
    </ul>
  </nav>
  <main></main>
  <footer></footer>
</div>
<code>
        clicking on ".mobile-button" toggles class "show" on ".menu"
    </code>