Легкая адаптивная навигация для сайта

<header>
  <div class="menu-navigation">
   
  <h1 class="desalpoden">
  <a href="#">ZorNet.Ru</a>
  </h1>

  <nav id="nav" class="asugen">
  <ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Файлы</a></li>
  <li><a href="#">Скачать</a></li>
  <li><a href="#">Скрипты</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
  </nav>

  </div>
  </header>

kaselob {
  margin-top: 2.5em;
}

kaselob a {
  color: #2980b9
}
p {
  color: #747474;
}
p+p {
  margin-top: 1.5em;
}

h2 {
  line-height: 1.35;
}

header {
  min-height: 3.75em;
  background: #354a5f;
  background-repeat: repeat-x;
  background-size:100% 3.75em;
  background-image: -webkit-linear-gradient(top, #45607b, #354a5f);  
  background-image: -moz-linear-gradient(top, #45607b, #354a5f);  
  background-image: -ms-linear-gradient(top, #45607b, #354a5f);  
  background-image: -o-linear-gradient(top, #45607b, #354a5f);  
  background-image: linear-gradient(top, #45607b, #354a5f);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45607b', endColorstr='#354a5f',GradientType=0 );
}

.menu-navigation {
  max-width: 62.25em;
  margin: 0 auto;
}

.desalpoden {
  position: absolute;
  margin-left: 5%;
  font-size: 1.5em;
  line-height: 2.5;
}

.desalpoden a {
  color: white;
}

button {
  float: right;
  background: none;
  border: none;
  font-size: 1em;
  color: white;
  font-weight: bold;
  line-height: 3.75;
  margin-right: 5%;
}

nav {
  padding-top: 3.75em;
  text-align: center;
  display: none;
}

nav ul {
  border-top: 1px solid #293949;
}

nav li {
  list-style: none;
}

nav a {
  display: block;
  color: #d5dfe8;
  padding: 0.75em 0;
  border-bottom: 1px solid #293949;
}

nav a:hover {
  background-color: #293949;
  color: white;
}

.show {
  display: block;
  transition: .3s;
}

@media only screen and (min-width: 740px) {
  .menu-navigation {
  width: 90%;
  }

  .desalpoden {
  margin: 0;
  }

  #menu {
  display: none;
  }
  nav {
  display: block;
  padding: 0;
  text-align: inherit;
  float: right;
  line-height: 3.75;
  }
  nav ul, nav a {
  border: none;
  }
  nav a {
  padding: 0;
  margin-left: 2em;
  }
  nav a:hover {
  background: none;
  }
  nav li {
  display: inline-block;
  }
}

var menu = document.createElement("button");
menu.id = "menu";
menu.innerHTML = "Menu";

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var desalpoden = document.getElementsByTagName("h1")[0];

insertAfter(desalpoden, menu);

var nav = document.getElementById('nav');

function toggleClass(element, className){
  if (!element || !className){
  return;
  }
   
  var classString = element.className, nameIndex = classString.indexOf(className);
  if (nameIndex == -1) {
  classString += ' ' + className;
  }
  else {
  classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
  }
  element.className = classString;
}

menu.addEventListener('click', function() {
  toggleClass(nav, 'show');
});