Friday, February 4, 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 this 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;  
}

image

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:
image
Simply take the above 4 main CSS classes and add/edit/delete the properties to make your drop down style truly unique."

Source:
http://erikswenson.blogspot.com/2011/02/sharepoint-2010-navigation-drop-down.html

No comments:

Post a Comment