Боковое меню с эффектом аккордеона для SharePoint 2013

Иногда боковое меню сайта SharePoint принимает просто угрожающие размеры. При этом пользователи разбивают пункты меню на подгруппы. Что правильно и совершенно логично.

Это делает меню более понятным визуально, но его юзабилити, а главное размер, по прежнему оставляют желать лучшего. Так как по умолчанию в SharePoint не поддерживается "эффект аккордеона", когда подпункты меню схлопываются в виде гармошки.

Здесь описан пример создания "эффекта аккордеона" на одном CSS, без применения JavaScript.

Это решение работает. Оно очень простое и эффективное. Однако стоит признать, что в целом поведение такой "гармошки", не такое классное, как хотелось бы.

По сути, всё решение сводится к добавлению в master page ссылки на css файл со следующим содержимым:

.ms-core-listMenu-verticalBox li.static {

    height: 2em;

    overflow: hidden;

}

.ms-core-listMenu-verticalBox li.static:hover {

    height: auto;

}

.ms-core-listMenu-verticalBox li > span.menu-item {

    cursor: pointer;

}

/* Format the headers */

.ms-core-listMenu-verticalBox li > span.menu-item {

    cursor: pointer;

    background: #0171C6;

    color: white;

    border: solid #fff;

    border-width: 1px 0;

}

/* Format the headers */

.ms-core-listMenu-verticalBox li > span.menu-item {

    cursor: pointer;

    background: #0171C6;

    color: white;

    border: solid #fff;

    border-width: 1px 0;

}

/* Format the header hover, list item hover and currently selected item */

.ms-core-listMenu-verticalBox li > span.menu-item:hover, /*Header */

.ms-core-listMenu-verticalBox a.selected, /* Selected */

.ms-core-listMenu-verticalBox a.menu-item:hover /* List item */{

    color:#FFF;

    background:#073D7D;

}