SharePoint Branding & Design

By Erik Swenson
WEDNESDAY, FEBRUARY 2, 2011

SharePoint 2010: Navigation Drop Down Styles

If you would like to stylize your navigation drop downs in SharePoint 2010 here are the 4 main key classes to update your CSS. If you are looking for SharePoint 2007 styles see my previous blog post here. The OOTB Navigation Drop Down CSS: COREV4.CSS .s4-tn ul.dynamic{ /* [ReplaceColor(themeColor:"Light2")] */ background-color:white; /* [ReplaceColor(themeColor:"Dark2-Lighter")] */ border:1px solid #D9D9D9; } .s4-tn li.dynamic > .menu-item{ display:block; padding:3px 10px; white-space:nowrap; font-weight:normal; } a:link{ /* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC; text-decoration:none; } .s4-tn li.dynamic > a:hover{ font-weight:normal; /* [ReplaceColor(themeColor:"Light2-Lighter")] */ background-color:#D9D9D9; }

Example (Not good design, but you get the point) /* Drop Down: Container Style */ .s4-tn ul.dynamic{ background-color:white; border:3px dashed #000; } /* Drop Down: Item Padding Style */ .s4-tn li.dynamic > .menu-item{ padding:10px 20px 10px 20px; } /* Drop Down: Hyperlink Styles */ .s4-tn li.dynamic > a{ font-size: 9pt; font-weight:normal; color:#000; } /* Drop Down: Hyperlink Hover Style */ .s4-tn li.dynamic > a:hover{ font-weight:bold; background-color:#0C0; color:#FFF; }

What it will look like:

Simply take the above 4 main CSS classes and add/edit/delete the properties to make your drop down style truly unique. Posted by Erik Swensonat 11:42 AM Labels: Branding, CSS, Drop Down Menus, SharePoint 2010

8 comments:

spsaml said... This is great! My problem is that there's a bad lag when the user moves off an item that has a flyout. I have a Top bar, 1st flyout, 2nd flyout design. When changing items in 1st the last item's flyout is still visible when the new item's flyout comes up. I can't find any answer. Any ideas? February 2, 2011 12:07 PM

Aaron said... Im looking after a SharePoint Foundation server, am I able to implement drop down menus or is it only with 2010 server? February 2, 2011 5:29 PM

Jamye Few said...

Great post. I am sure this only applicable on Server and not Foundation. Is there any other option to get drop down functionality in the menu on Foundation other than a custom solution applied to a obviously customized masterpage? March 3, 2011 7:51 PM

Anonymous said... great post but my problem is how to create nested menus i want to create 3 level menus but i dont know how i do some search and the articale said to change the "MaximumDynamicDisplayLevels" in master page into 2 but its not work. any help plz. March 7, 2011 10:56 AM

Anonymous said... Thanks for the post. Is it possible to make the menu fly out in a vertical orientation vs. horizontal? June 16, 2011 12:58 PM

Edy said... thanks. but how to add sub menus? I don't see any dropdown menu in toplink bar? August 31, 2011 1:47 AM

Bijay Kumar said... Hi, Thanks for the post, but why it is not working for publishing web site?? December 1, 2011 3:08 AM

Bijay Kumar said... I have tried in publishing pages, it didnot work. Please suggest me December 1, 2011 3:08 AM Post a Comment Newer PostOlder PostHome

Subscribe to: Post Comments (Atom) About Me

Erik Swenson I work for EMC Consulting as a Solutions Architect. My primary area of focus is around Visual Branding and Information Architecture. View Other EMC Consulting blogs here: EMC Consulting Blogs. View my complete profile My SharePoint Branding Book Follow Me On:

Linked In Tags Book (3) Branding (55) Breadcrumb (1) Certification (1) Conference (2) CSS (46) Datasheet View (1) Design (37) Drop Down Menus (3) Features (7)

Fixed Width (2) Global Navigation (3) Governance (2) Installation (1) Master Page (22) Modal Pop-Up (4) My Site Host Profile (4) Office Live Small Business (1) Page Layout (7) Personal (5) Photoshop (3) Pimp My Portal (1) Process (6) Publishing (3) Reflection (1) Requirements (1) Rounded Corners (1) SharePoint (46) SharePoint 2010 (37) SharePoint Designer 2010 (3) SharePoint Summit 2009 (6) ShortCuts (1) Templates (1) Testing (3) Theme (4) twitter (1) Visio (1) Visio 2010 (1) VMware (1) WCM Styles (1) Web Part (3) Windows Live Writer (1) Wireframe (4)

XSLT (1) Subscribe Now: Feed Icon Subscribe in a reader Blog Archive 2012 (3) 2011 (13) o December (1) o November (1) o October (2) o August (1) o May (1) o April (2) o March (1) o February (3) SharePoint 2010: Large Search Box & Scopes SharePoint 2010: Navigation Drop Down Styles SharePoint 2010: Large Search Box o January (1) 2010 (30) 2009 (19) 2008 (28)