Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

Okay so I'm currently fooling around with some advanced stuff regarding SharePoint branding. A challenge accepted was to include icons in the Global Navigation.

I tried using jQuery, with success none-the-less. So far so good. But this was pointed specifically on menu items, not dynamical, which of course is my issue now. How can I include icons in the navigation through standard SharePoint? jQuery obviously is not an option as it shall work on mobile units as well.

I want it to render with the icon at the top and then the link-text below it.

Image
Title

First things first of course. For now I just want it to work on a Desktop browser, the mobile can come in to concideration later.

Any suggestions, ideas, even links to awesome blogs on the subject?

Thank you.


EDIT: Found this link http://www.thesug.org/blogs/kyles/lists/posts/viewpost.aspx?id=26&PF=1 which has given me a pretty good start. But again that's for specific items.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

A better approach is to design your css classes and assign it to the menu control used for Global Navigation. Below is how a menu (with default css) can be placed in master page.You can include the icons in a css class and use that class in StaticMenuItemStyle CssClass=<your class name>" below

<SharePoint:AspMenu
      ID="TopNavigationMenu"
      Runat="server"
      DataSourceID="topSiteMap"
      EnableViewState="false"
      AccessKey="<%$Resources:wss,navigation_accesskey%>"
      Orientation="Horizontal"
      StaticDisplayLevels="2"
      MaximumDynamicDisplayLevels="1"
      DynamicHorizontalOffset="0"
      StaticPopoutImageUrl="/_layouts/images/menudark.gif"
      StaticPopoutImageTextFormatString=""
      DynamicHoverStyle-BackColor="#CBE3F0"
      SkipLinkText=""
      StaticSubMenuIndent="0"
      CssClass="ms-topNavContainer">
        <StaticMenuStyle/>
        <StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>
        <StaticSelectedStyle CssClass="ms-topnavselected" />
        <StaticHoverStyle CssClass="ms-topNavHover" />
        <DynamicMenuStyle  BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px"/>
        <DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>
        <DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>
        <DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/>
    </SharePoint:AspMenu>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.