現在のナビゲーションを3段にするには

インフォシェア株式会社 小高太郎


SharePointの現在のナビゲーション(左側のメニュー)はインデントをつけて2段階までの表示を行うことが可能です。

しかしながら、3段階以上のインデントを持ったメニューを表示することはGUIの設定のみでは出来ません。

この問題を解決するためには、3段階のナビゲーション自体を管理メタデータを用いて作成し、表示のためマスターページの変更とJavaScriptを使用する必要が有ります。今回は、この手法の簡単な手順を紹介致します。

 

手順)

1.サイトのナビゲーションの設定で、現在のナビゲーションを管理ナビゲーションに変更します。

 

2.用語ストアの管理ツールを開き、下図のように3階層あるナビゲーションを作成します。(ナビゲーションですので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=""

 

 

5.保存したのち、サイトの設定でマスターページを上記の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を実行したところで、メニュー部分が変更できない可能性があるためです。

そのため、ナビゲーションが最後に表示されるようにしてあります。

 

以上です。