Боковое меню

Боковое меню для сайта построено тегами details и summary. Преимущество такого подхода не только в отсутствии jQuery. HTML имеет простую разметку, для оформления внешнего вида меню не требуется изменение кода CSS.

Боковое меню для сайта построено тегами HTML details и summary
Боковое меню тегами details и summary

Боковое меню

<div class="menu">
  <details>
    <summary>Пункт меню 1</summary>
    <a href="#">субменю A</a>
    <a href="#">субменю B</a>
    <a href="#">субменю C</a>
  </details>
  <details>
    <summary>Пункт меню 2</summary>
    <a href="#">субменю A</a>
    <a href="#">субменю B</a>
  </details>
  <details>
    <summary>Пункт меню 3</summary>
    <a href="#">субменю A</a>
    <a href="#">субменю B</a>
    <a href="#">субменю C</a>
    <a href="#">субменю D</a>
    <a href="#">субменю E</a>
  </details>
  <details>
    <summary>Пункт меню 4</summary>
    <a href="#">субменю A</a>
    <a href="#">субменю B</a>
    <a href="#">субменю C</a>
  </details>
</div>
.menu {
	width: 280px;
}
summary:focus {
	outline: 0;
}
details > summary {
	cursor:pointer;
	background: lightblue;
	margin:6px;
	padding:8px;
}
details > summary:hover {
	background: Lavender;
}
details > a {
	display:block;
	text-decoration: none;
	color:#000;
	font-size:13px;
	margin:3px 6px 3px 18px;
	padding: 4px;
	background: AliceBlue;
}
details > a:hover {
	background: #DFEFFF;
	font-weight: bold;
}
details > a::before {
	content: "- ";
}

Многоуровневое меню

Для многоуровневого меню достаточно вложить теги details и summary в тег details.

HTML

 ...
  <details>
    <summary>Пункт меню 2</summary>
    <a href="#">субменю A</a>
    <a href="#">субменю B</a>
      <details>
        <summary>Пункт меню 2.1</summary>
        <a href="#">субменю A</a>
        <a href="#">субменю B</a>
      </details>
  </details>
 ...  

CSS

details > details {
	margin-left: 12px;
}

Теги details и summary не поддерживаются браузерами IE и Edge. Для них можно попробовать применить полифил, написанный для IE9.

htmlhook.ru | Скрипты для веб-приложений