posts - 16 , comments - 4 , trackbacks - 0

Style SharePoint 2013 Top Navigation (Global Navigation) menu

https://kogzee.wordpress.com/2013/08/07/style-sharepoint-2013-top-navigation-global-navigation-menu/

http://www.nothingbutsharepoint.com/2013/04/25/yes-the-sharepoint-navigation-really-can-work-for-your-needs-aspx/

How much room do I have to change the top navigation in SharePoint?
I have a publishing site and I am using SharePoint's default top navigation which I have modified a little (by applying CSS) but now I want some more changes as below.

Please check if this is possible to do or not?

In my top navigation there are three levels:

Main Link
|
------Sub link 1
| |
| -----------Sub link a
| |
| -----------Sub link b
|
------Sub link 2

When you mouse over "Main Link" it opens level 1 which shows "Sub link1" and "Sub link2".
When you mouse over "Sub link 1" then it shows level 2 "Sub link a" and "Sub link b".

I want to show a different style bullet on level 1 and level 2. They are basically images (small icons) which will be displayed in level 1 and level2 with each item. But again the thing is, icon of level 1 is different than icon of level 2.

Is this possible?

EDIT
I am using custom master page not the ones provided by SharePoint.

shareimprove this question
   
I have this problem and I got so excited when I see this solution, but I think the master page "HTML file" and "Master file" are associated. how can I change the master file? Thanks in advance. –  user24931 Apr 7 '14 at 9:36

I found this tutorial and looks like it is quite possible.http://kogzee.wordpress.com/2013/08/07/style-sharepoint-2013-top-navigation-global-navigation-menu/

EDIT
The above article explains how you can integrate your custom menu with SharePoint in 2 easy steps.
Suppose you have got the CSS and HTML of menu from designer and now as a SharePoint developer you want to integrate it. Here's how CSS and HTML file will look like:

CSS
The CSS is pretty large so I am only pasting small portion of it. You can see rest of it on the link above.

/*Navigation*/
.crom-Navigation {
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    margin: 10px 0px; 
    top: 0px; 
    position: relative;
    z-index:200;
}
.crom-Navigation a {
    margin: 0px; 
    padding: 0px; 
    border: 0px;
    text-decoration:none;
}
.crom-Navigation ul {
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    font-size: 16px; 
    z-index:200;
    border-bottom: 2px solid #003f5f;
}

HTML

<!--Menu-->
   <div id="navigation" class="crom-Navigation">
   <ul>
      <li><a href="#">Cameras</a>
         <ul>
            <li><a href="#">Camcorders</a></li>
            <li><a href="#">Digital cameras</a></li>
            <li><a href="#">Disposable cameras</a></li>
            <li><a href="#">Film cameras</a></li>
         </ul>
      </li>
      <li><a href="#">Computers</a>
         <ul>
            <li><a href="#">Desktops</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Netbooks</a></li>
            <li><a href="#">Tablets</a></li>
         </ul>
      </li>
      <li><a href="#">Media</a>
         <ul>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">TV shows </a></li>
            <li><a href="#">Video games </a></li>
         </ul>
      </li>
   </ul>
</div>

Now simply do the following steps and the menu will be displayed.

Call that custom CSS in your master page

<SharePoint:CssRegistration
  name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/CromwellFixedWidth/CromwellFixedWidthStyle.css %&gt;"
  runat="server"
  after="SharepointCssFile"/>

Copy/Paste following code in your master page where you want to display menu

<!--Menu-->
   <div id="navigation" class="crom-Navigation">
   <!--Top Menu-->
   <SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
        <Template_Controls>
            <asp:SiteMapDataSource
                ShowStartingNode="False"
                SiteMapProvider="SPNavigationProvider"
                id="topSiteMap"
                runat="server"
                StartingNodeUrl="sid:1002"/>
        </Template_Controls>
    </SharePoint:DelegateControl>
    <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
        <SharePoint:AspMenu
            runat="server" UseSeparateCss="false"
            AdjustForShowStartingNode="False" StaticDisplayLevels="2"
            AccessKey="1" SkipLinkText="" EnableViewState="False"
            MaximumDynamicDisplayLevels="1" 
            DataSourceID="topSiteMap" Orientation="Horizontal"
            RenderingMode="List"
            UseSimpleRendering="False"
            ID="TopNavigationMenu">
            </SharePoint:AspMenu>
    </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</div>
shareimprove this answer

Print | posted on Friday, July 10, 2015 2:13 AM | Filed Under [ masterpage topmenu global nagivation current navidation ]

Feedback

Gravatar

# re: Style SharePoint 2013 Top Navigation (Global Navigation) menu

Nice Article
5/12/2017 7:05 AM | Anonymous
Post A Comment
Title:
Name:
Email:
Comment:
Verification:
 

Powered by: