インフォシェア株式会社 小高太郎
SharePointの現在のナビゲーション（左側のメニュー）はインデントをつけて2段階までの表示を行うことが可能です。
しかしながら、3段階以上のインデントを持ったメニューを表示することはGUIの設定のみでは出来ません。
この問題を解決するためには、3段階のナビゲーション自体を管理メタデータを用いて作成し、表示のためマスターページの変更とJavaScriptを使用する必要が有ります。今回は、この手法の簡単な手順を紹介致します。
手順）
１．サイトのナビゲーションの設定で、現在のナビゲーションを管理ナビゲーションに変更します。
２．用語ストアの管理ツールを開き、下図のように３階層あるナビゲーションを作成します。（ナビゲーションですのでURLも設定します。）
当然ながら、このまま表示すると2段階目までしか表示されません。
3. SharePoint Designerを開き、マスターページを開きます。この後でマスターページを変更しますが、オリジナルを変更するにはリスクが有りますので、対象のページのマスターページをコピーしておきます。チームサイトの既定ではマスターページはseattleになっているはずですので、今回は、seattle .htmlをコピーしたseattle_copy(1).htmlを使用します。（マスターページはマスタページギャラリーからメジャーバージョンを発行してください。尚SharePoint Designerのマスターページの扱いはMSDNなどでご確認ください。）
4. V4QuickLaunchMenuで検索を行い、下記の赤字の部分のように変更します。
<!--SPM:<SharePoint:AspMenu
id="V4QuickLaunchMenu"
runat="server"
EnableViewState="false"
DataSourceId="QuickLaunchSiteMap"
UseSimpleRendering="false"
Orientation="Vertical"
StaticDisplayLevels="4"
AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="1"
SkipLinkText=""
５．保存したのち、サイトの設定でマスターページを上記のseattle_copy(1).htmlに変更します。
その上で、ナビゲーションメニューを確認してみます。
6. 3段階になっていることが確認できましたが、見栄え的にイマイチです。やり方は色々あると思いますが、例えばと言うことで、4.で変更したマスターページに下記のJavaScriptを追加します。</body>と</html>の間に追加します。
</body>
<script type="text/javascript">
document.getElementById("ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager").style.display="none";
<!--
_spBodyOnLoadFunctionNames.push("changeV4QuickLanchMenu");
function changeV4QuickLanchMenu (){
ChangeDescendantByClass ("zz1_V4QuickLaunchMenu","zz1_V4QuickLaunchMenu");
document.getElementById("ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager").style.display="";
}
function GetElement(target)
{
var targetElement = target;
if (typeof(target) == 'string')
{
targetElement = document.getElementById(target);
}
return targetElement;
}
function GetParentElement(target)
{
var targetElement = this.GetElement(target);
var parentElement = targetElement.parentElement;
return parentElement;
}
function GetChildElements(target)
{
var targetElement = this.GetElement(target);
var childElements = targetElement.children;
return childElements;
}
function ChangeDescendantByClass (target, className)
{
var childElements = this.GetChildElements(target);
for (var i = 0; i < childElements.length; i++)
{
var childElement = childElements[i];
var className_temp = childElement.className.toLowerCase();
if (className_temp.indexOf(className.toLowerCase(),0) != -1)
{
childElement.className += "static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode";
var te = childElement.parentElement;
te.style.padding = '5px';
te.style.paddingLeft = '20px';
}
ChangeDescendantByClass (childElement, className);
}
return null;
}
//function
// -->
</script>
</html>
7.結果を確認します。
注意事項）
6.で追加したJavaScriptは、「_spBodyOnLoadFunctionNames.push("changeV4QuickLanchMenu");」の記載により、ページが最後まで読み込まれた後に実行される形になります。
これは、SharePointでJavaScriptを記載するときのお作法で、ページを最後まで読み込まないと、JavaScriptを実行したところで、メニュー部分が変更できない可能性があるためです。
そのため、ナビゲーションが最後に表示されるようにしてあります。
以上です。