Uwebik.ucoz.com

<nav id="menu" class="nav">  
  <ul>
  <li>
  <a href="#">
  <span class="icon">
  <i aria-hidden="true" class="icon-home"></i>
  </span>
  <span>Главная</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon">  
  <i aria-hidden="true" class="icon-services"></i>
  </span>
  <span>Услуги</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon">
  <i aria-hidden="true" class="icon-portfolio"></i>
  </span>
  <span>Портфолио</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon">
  <i aria-hidden="true" class="icon-blog"></i>
  </span>
  <span>Блог</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon">
  <i aria-hidden="true" class="icon-team"></i>
  </span>
  <span>Команда</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon">
  <i aria-hidden="true" class="icon-contact"></i>
  </span>
  <span>Контакты</span>
  </a>
  </li>
  </ul>
  </nav>

<script>
  // Функция для изменения класса
  var changeClass = function (r,className1,className2) {
  var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
  if( regex.test(r.className) ) {
  r.className = r.className.replace(regex,' '+className2+' ');
  }
  else{
  r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
  }
  return r.className;
  };  

  // Создание кнопки меню в JS для маленьких экранов
  var menuElements = document.getElementById('menu');
  menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Меню</button>');

  // Переключение класса по клику - показать/скрыть меню
  document.getElementById('menutoggle').onclick = function() {
  changeClass(this, 'navtoogle active', 'navtoogle');
  }
  </script>
<script src="/js/modernizr.custom.js"></script>
<link rel="stylesheet" type="text/css" href="/css/component.css" />