SharePoint 2013 - Многоуровневое меню в Suite Bar

Ранее мы уже рассматривали пример модификации навигационной панели Suite Bar в SharePoint 2013, задавая с помощью PowerShell значение свойства SuiteBarBrandingElementHtml для конкретного веб-приложения. На этот раз задача немного усложнилась и нам потребовалось вместо плоской одноуровневой структуры ссылок организовать много-уровневое меню.

Интересная реализация такой задачи была найдена в статье Ashok Raja's Blog - Create a Multilevel Hierarchical Menu in SharePoint 2013 with SuiteBar Branding Delegate Control. Чтобы не заморачиваться со сборкой и установкой солюшна с последующим созданием списков, отвечающих за структуру будущего меню для каждого семейства сайтов, из решения была позаимствована сама идея и код формирования многоуровневого меню средствами CSS. Так как значение свойства SuiteBarBrandingElementHtml содержит по сути своей HTML-код, то всё, что нам потребовалось сделать для решения задачи, это сформировать код, приправив его конструкциями CSS, отвечающими за визуализацию структуры меню. Пример PS-скрипта:

$URL = "http://kom-ad01-sp-mys.holding.com"

$SuiteBarText = '
<style type="text/css">
    .menu, .menu ul {
        margin: 0;
        padding: 0;
        list-style: none;            
    }

    .menu li, .menu ul a {
        position: relative;
    }

    .menu > li {
        float: left;
    }

    .menu > li.floatr {
        float: right;
    }

    .menu li > a {
        display: block;
    }

    .menu ul {
        position: absolute;
        display: none;
        width: 170px;
    }

    .menu ul ul {
        top: 0;
        left: 170px;
    }

    .menu li:hover > ul {
        display: block;
    }

    .menu a {
        text-decoration: none;
    }

    .menu > li > a {
        color: #fff;
        /*font-weight: 400;
        font-size: 13px;*/
        line-height: 18px;
        padding: 6px 15px;
    }

    .menu > li:hover > a {
        background-color: #4b9bd7;
        color: #ffffff;
        border-left: none;
        padding-left: 15px;
        border-right: 0px solid #707070;
        margin: 0px 0 0 0px;
    }

    ul.menu li a {
        -webkit-transition: background-color 80ms ease-in-out;
        -moz-transition: background-color 80ms ease-in-out;
        -o-transition: background-color 80ms ease-in-out;
        -ms-transition: background-color 80ms ease-in-out;
        transition: background-color 80ms ease-in-out;
    }

    .menu ul li a {
        -webkit-transition: background-color 20ms ease-in-out, color 20ms ease-in-out;
        -moz-transition: background-color 20ms ease-in-out, color 20ms ease-in-out;
        -o-transition: background-color 20ms ease-in-out, color 20ms ease-in-out;
        -ms-transition: background-color 20ms ease-in-out, color 20ms ease-in-out;
        transition: background-color 20ms ease-in-out, color 20ms ease-in-out;
    }

    /* Sub Menu */
    .menu ul {
        background-color: #21374C;
        border: 1px solid #e0e0e0;
        border-top: none;
        left: -1px;
        z-index: 999;
        border-radius: 0 0 2px 2px;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    }

    .menu ul a {
        color: #ffffff;
        /*font-size: 12px;*/
        line-height: 15px;
        padding: 9px 12px;
        border-top: 0px solid #e6e6e6;
    }

    .menu ul a:hover {
        background-color: #4b9bd7;
        color: #fff;
    }
    .menu a:hover { 
        text-decoration: none; 
    }
</style>

<ul id="sfsMenu" class="menu">
    <li><a href="http://WebServer">Test1</a></li>
    <li>
        <a href="http://WebServer">Test2</a>
        <ul>
            <li>
                <a href="http://WebServer">Test3</a>
                <ul>
                    <li><a href="http://WebServer">Test4</a></li>
                    <li><a href="http://WebServer">Test5</a></li>
                </ul>
                <li><a href="http://WebServer">Test6</a></li>
            </li>
            <li>
                <a href="http://WebServer">Test7</a>
                <ul>
                    <li><a href="http://WebServer">Test8</a></li>
                    <li>
                        <a href="http://WebServer">Test9</a>
                        <ul>
                            <li><a href="http://WebServer">Test10</a></li>
                            <li><a href="http://WebServer">Test11</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <li><a href="http://WebServer">Test12</a></li>
    </li>
    <li><a href="http://WebServer">Test13</a></li>
    <li><a href="http://WebServer">Test14</a></li>
    <li><a href="http://WebServer">Test15</a></li>
    <li><a href="http://WebServer">Test16</a></li>
</ul>
'

$snapin = Get-PSSnapin | Where-Object {$_.Name -eq 'Microsoft.SharePoint.Powershell'}
if ($snapin -eq $null) {
  Write-Host "Загрузка оснастки SharePoint Powershell"
  Add-PSSnapin "Microsoft.SharePoint.Powershell"
}
$WebApp = Get-SPWebApplication -Identity $URL
$WebApp.SuiteBarBrandingElementHtml  = $SuiteBarText 
$WebApp.Update()

В результате получаем многоуровневое меню следующего вида:

Следует учитывать тот факт, что для оформления меню CSS-код никак не наследуется от темы оформления сайта и поэтому вам придётся править его под свою цветовую схему, хотя наверняка можно и модифицировать код таким образом, чтобы цвета наследовались с темы сайта. Несомненно это можно считать минусом такого решения, однако оно не имеет той сложности которая присуща ранее упомянутой исходной реализации.