Skip to main content

Branding SharePoint Drop Downs

SharePoint has quite a few different drop down menus, within this post I will highlight the three primary drop downs and the CSS that drives it.

#1 Main Navigation Drop down:
image 

The Main Navigation drop downs are a new addition to SharePoint from its previous SPS 2003 version. Here are the following classes that make up this navigation:

Class Name

Details

.ms-topNavFlyOutsContainer
{
border:solid 1px #c2dcff;
}

This is the outer container.
Modify this for the outer border.

.ms-topNavFlyOuts{
background-color:#F2F8FF;
font-family:Tahoma;
font-size:8pt;
}

This is the inner container.
Modify this for the drop down background and basic fonts.

.ms-topNavFlyOuts a{
display:block;
*width:120px;
min-width:120px;
color:#3764a0;
padding:4px 8px 4px 8px;
}

This class specifies the drop down items, width, color, and padding. 
You might want to put in a width: 100% !important; tag in case you have an instance where you have a small drop down item and an item that its characters exceed 120px.

.ms-topNavFlyOutsHover{
background-color:#ffe6a0;
color:#000000;
}

This class specifies the hover state of each drop down item.
You will also want to put in width: 100%; into this class as well so that you don't get a default color background that you don't want.

image The SharePoint team also put into place a little hidden gem of logic that states that when a list is longer than the height of the page, it will create a scroll type drop down.

If you move your mouse to the top arrow it will scroll up, and if you move your mouse to the bottom as expected it will scroll down.

If you look at the image below the screen capture has 4 main navigation items all with drop down items. The ID's highlighted in green specify the Top Navigation Menu Item # 1, 2, 3, 4. For each navigation menu item if a drop down is available SharePoint will add in two div tags. The first one is the Menu Items Up which has an Image drawn from the /WebResource.axd file. The second DIV tag right below it is the Menu Items Down which also has an Image drawn from the /WebResource.axd file.

image

If you really needed to customize this you could simply add the following classes to your alternate stylesheet. But you would have to make sure you create as many Menun #s per how many top navigation items you have on your site.

Class Name

Details

#zz1_TopNavigationMenun1ItemsUp{
background-color: #FFF;
}

#zz1_TopNavigationMenun1ItemsDn{
background-color: #FFF;
}

This class is for the top and bottom boxes only  for the 1st navigation item with a drop down.

#zz1_TopNavigationMenun2ItemsUp{
background-color: #FFF;
}

#zz1_TopNavigationMenun2ItemsDn{
background-color: #FFF;
}

Same as above but for Menun #2

#2 Site Actions Drop Down:
image

The Site actions drop down is a bit more complex. It uses quite a bit more styles than the main navigation. Here are some things to consider when branding this menu:

  • Define the color of the text, both Heading and description
  • Define what kind of image treatment you want behind the icons.
  • Define the hover state as a user moves the mouse over each item. (Background color, and Border line)

Class Name

Details

.ms-MenuUIPopupBody TABLE
{
color:#003399;
font-size:100%;
margin:0px;
padding:0px;
}

This class specifies the Basic menu color for the Bold Menu Label. However it could be over written see below.

.ms-MenuUISeparator,.ms-MenuUISeparatorRtL,.ms-MenuUISeparatorLarge,.ms-MenuUISeparatorLargeRtl
{
background-color:#c5c5c5;
font-size:1px;
height:1px;
line-height:1px;
}

This class specifies the color of the separator line.

.ms-MenuUI,.ms-MenuUILarge,.ms-MenuUIRtL,.ms-MenuUILargeRtL
{
background-color:#fafafa;
background-repeat:repeat-y;
cursor:pointer;
}

These classes represent the overall background color.

.ms-MenuUILarge
{
background-image:url("/_layouts/images/MGradLarge.gif");
width:250px;
}

This class is specific to all large size drop down menus. Including the Welcome, and My Links drop down.

.ms-MenuUILabel{
padding: 2px 0px 3px 6px;
}

This class specifies the bold menu labels padding. Since the color is not specified here but driven by the Pop up table. You could overide the color by adding it in here.

.ms-menuitemdescription
{
color:#666666;
}

This class specifies the color of the description text for each menu item.

.ms-MenuUIItemTableHover
{
background-color:#ffe6a0;
border:1px solid #d2b47a;
}

This class specifies the hover state when a user moves their mouse over each item.

#3a  Document Drop Downimage

#3b Modify Webpart Drop Down
image

Both of the examples above use the same menu classes. You will notice that the space dedicated to the icons is allot smaller. All the classes for the large drop down are shared but for this menu it uses the following class to specify its smaller background image.

Class Name

Details

.ms-MenuUI
{
background-image:url("/_layouts/images/MGrad.gif");
}

This menu specifies the smaller graphic.

One last thing to consider is if you are deploying language packs that change the orientation of text to read right to left. The navigation will also be change.

image

Here are the classes that make up the right to left menus:

Class Name

Details

.ms-MenuUIRtL
{
background-image:url("/_layouts/images/MGradRtl.gif");
}

Background image for small right to left menus

.ms-MenuUILargeRtL
{
background-image:url("/_layouts/images/MGradLargeRtl.gif");
width:250px;
}

Background image for large right to left menus

Drop me a comment if you have any questions/comments

Comments

Chad said…
Do you know of a way to change the icons used for the specific menu items?

I know you can do it for file extensions in document libraries, but could you add an icon for the "People and Groups" option in the main Site Settings menu, for instance?

Thanks
Chad said…
Do you know of a way to change/add icons for the individual menu items under "Site Settings"? Or any Sharepoint dropdown for that matter...

Thanks
chloe said…
i would just like to say, you are my new hero!
Arash said…
Great post Erick..Thanks a lot.
i have a problem with sharepoint menu.i want to change arrow image with my custom image in menu.when i see property of arrow image,it refere to a file like this: WebResource.axd?d=8XF3gMpcMyVWaK5vc7kgdwkIBTZRbMdx-aLZFH7lYB01&t=632544343905703125 ,
and when i save it in my PC,it store with 'WebResource.gif' name! after many hours searching, i found that webresource.axd is in javascript tag on this address /_layout/images/GOSEARCH.gif!! it is secret code that wrote in 'gif' file to call WebResource.axd!
now,i want to know how can i change arrow image with my custom image in sharepoint menu? arrow image is for level 3 of cascading navigation..
what is your idea? and how can i do it?

Regards
Arash
asif said…
i new to sahrepoint ..
how to customize second level navigation ?level 2

Popular posts from this blog

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…