具有顶部导航和左侧导航的自定义母版页答案

【问题标题】：Custom Master Page with Top Navigation and Left Navigation具有顶部导航和左侧导航的自定义母版页
【发布时间】：2015-03-29 08:09:34
【问题描述】：

我已成功将 HTML 页面转换为 SharePoint 2013 母版页。我还创建了一个自定义页面布局。使用它们，我创建了包含 30 多个页面的 SharePoint 站点。每个页面都包含顶部标题导航，因为它继承自我使用的母版页。现在我也需要从母版页继承左侧导航。它为我提供了从母版页更新它并通过整个 SharePoint 站点影响它的优势。

但目前我正在使用 Web 部件作为 HTMl 代码 sn-p 为每个页面单独插入左侧导航。如果需要修改，我必须浏览所有页面并进行修改。这也不方便。我想要这个左侧导航，就像 SharePoint 当前导航替代方案一样，但在我的页面布局中。

是否有在这些论坛中聊天的选项？

有人可以帮我解决这个问题吗？

感谢和问候，

奇兰塔卡

【问题讨论】：

标签： javascript jquery html sharepoint

【解决方案1】：

这是我认为您正在尝试做的一个示例：

http://info.scdot.org/StructuralDesign/SitePages/BridgeDrawingsDetails.aspx

这是一个带有 HTML 页眉、页脚和左手风琴导航的共享点页面。我没有使用单独的“页面布局”作为 SP 术语。它在 SP 2010 中。

我在母版页中添加了一个 DIV 来容纳左侧手风琴导航，并使用 CSS 定位它。

HTML 片段：

<div id="AccordionContainer">
            <div id="Accordion1" class="Accordion">
<h3 class="accordionShow"><a>CADD Design</a></h3>
<div class="insideAccordionPanelContent">
    <!-- First link is for site Map Only and should not appear in Accordion -->
    <a href="http://www.scdot.org/doing/cadd.aspx" class="siteMapShow panelTitle">CADD Design</a>
    <!-- Accordion Links -->
    <p><a href="http://www.scdot.org/doing/cadd_DesignFiles.aspx">CADD Design Files</a></p>
    <p><a href="http://www.scdot.org/doing/cadd_SUE.aspx">Subsurface Utility Engineering (SUE)</a></p>
    <p><a href="http://www.scdot.org/doing/cadd_RoadwayDesign.aspx">Roadway Design Files</a></p>
    <p><a href="http://www.scdot.org/doing/cadd_BridgeDesign.aspx">Bridge Design Files</a></p>
    <p><a href="http://www.scdot.org/doing/cadd_Traffic.aspx">Traffic Engineering Files</a></p>
</div>
<h3 class="accordionShow"><a>Engineering Directives</a></h3>
<div class="insideAccordionPanelContent">
    <!-- First link is for site Map Only and should not appear in Accordion -->
    <a href="http://info.scdot.org/Construction_D/sitepages/Engineering_directives.aspx" class="siteMapShow panelTitle">Engineering Directives</a>
    <!-- Accordion Links -->
    <p><a href="http://info.scdot.org/Construction_D/sitepages/Engineering_directives.aspx">Engineering Directives</a></p>
    <p><a href="http://info.scdot.org/Construction_D/ED/ED-index.pdf">Engineering Directives Index (PDF)</a></p>
</div>
<h3 class="accordionShow"><a>Hydraulic Engineering</a></h3>

如果您使用开发人员工具 (F12) 或 Firebug 检查我的页面，也许会有所帮助。希望对您有所帮助！

【讨论】：

感谢 sn-p。但是您建议我将此添加到母版页模板中是吗？
我正在使用 SharePoint 2013。
是的，您可以在母版页中添加带有导航的 Div，并将其与样式表放在一起。这在 2013 年和 2010 年有效。HTML sn-p 是 MY div 中的代码示例，当然，您将输入自己的导航链接。
我们不能使用 Visual Studio 2013 做任何事情，比如编辑 SharePoint 网站的 web.config 文件。
当然，这是一种选择，但超出了我的专业范围。而且，我认为 HTML 和 CSS 会满足您的需求。