Мобильное меню

Для пользователя иконка-гамбургер в браузере означает, что откроется меню сайта. Скрытое меню с иконкой, чаще всего, встречается на мобильных устройствах с маленьким экраном.

Мобильная версия меню

Если область просмотра страницы меньше чем 600px, горизонтальное меню скроется, и появится кнопка с тремя полосками (иконка-гамбургер). После нажатия на кнопку откроется вертикальное меню. Чтобы скрыть меню, нужно повторно нажать на кнопку, но уже с крестиком.

Версия меню для мобильных устройств
Мобильная версия меню
<nav>
  <button class="menu"></button>
  <ul>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
      <li><a href="#">Ссылка 3</a></li>
      <li><a href="#">Ссылка 4</a></li>
    </ul>
</nav>

<article>
  <h1>Заголовок</h1>
    <p>Содержание</p>
</article>
button.menu::before {
	content: '\2261';
	font-size: 2em;
}
button.menu[aria-expanded="true"]::before {
	content: '×';
}
nav ul {
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
	display: none;
}
nav ul li {
	text-align: left;
	background-color: brown;
	border-bottom: 1px solid Wheat;
}
nav ul li a {
	padding: .8em 1.5em;
	color: LemonChiffon;
	text-decoration: none;
	display: block;	
}
nav ul li a:hover {
	background-color: Chocolate;
}
nav ul li a:focus {
	outline: thin dotted;
	outline-offset: -2px;
}
[aria-hidden="false"] {
	display: block;
}
@media screen and (min-width: 600px) {
  button.menu {
  	display: none;
  }
  nav ul {
  	display: table;
  }
  nav ul li {
  	display: table-cell;
  	text-align: center;
  	border-left: 1px dotted Wheat;
  }
}
!function (e, t, n) {
   "use strict";
    var r = e.querySelectorAll(".menu"), a = function (e, t) {
    var n = t.getAttribute("aria-hidden");
    "false" == n ? (e.setAttribute("aria-expanded", "false"), 
		            t.setAttribute("aria-hidden", "true") ) : 
		           (e.setAttribute("aria-expanded", "true"), 
		            t.setAttribute("aria-hidden", "false")
					);
    };
    [].forEach.call(r, function (e, t) {
    var n = e.nextElementSibling;
            e.setAttribute("aria-expanded", "false"), 
		    e.setAttribute("aria-controls", "button-menu-" + t), 
            n.setAttribute("aria-hidden", "true"), 
			n.setAttribute("aria-labelledby", "content-menu-" + t),
			n.setAttribute("tabindex", "0"), 
		e.addEventListener("click", function () {
            return a(this, n), !1;
        }, !1), e.addEventListener("keydown", function (e) {
            32 === e.which && (e.preventDefault(), a(this, n));
        }, !1);
    });
}(document, window);

Меню

Код HTML для списка меню — чистый. JavaScript добавляет роли wai-aria для кнопки и меню. CSS оформляет вид меню и скрывает меню тогда, когда это нужно.