Navigation Drop Down Styles in SharePoint 2010

If you would like to stylize your navigation drop downs in SharePoint 2010 here are the 4 main key classes to update your CSS:



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 
/* 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.

Comments

Post a Comment

Popular posts from this blog

SharePoint 2010 Windows PowerShell Interview Questions

Q. What is Windows Powershell ? Ans.  Windows PowerShell is a new Windows command-line shell designed especially for system administrators. In the SharePoint administration context, Windows PowerShell is another administration tool that supersedes the existing Stsadm.exe. Q. How is Windows Powershell different from Stsadm ? Ans.  Unlike stsadm, which accept and return text, Windows PowerShell is built on the Microsoft .NET Framework and accepts and returns .NET Framework objects. In addition to that it also gives you access to the file system on the computer so that you can access registry,digital signature certificate etc.. Q. What are cmdlet's? Ans.  Windows PowerShell introduces the concept of a cmdlet which are simple build in commands, written in a .net language like C# or VB. Q. Can you Create PowerShell scripts for deploying components in SharePoint ? Ans . If you are creating a webpart with VS 2010 then you can deploy it using ctrl + f5. However, to act...
Read more

Configure Form Based Authentication (FBA) in SharePoint 2010

Image
Steps to Configure FBA in SharePoint 2010  Below are the steps required to configure FBA in SharePoint 2010. I will be using MS SQL database as membership store for users.   A) Setting up ASP.NET Forms Authentication User and Role Data Source  1. Create Database  2. Configure Membership and Role Provider  3. Create User B) Create Web Application and Site Collections C) Configure Web.Config file  1. Configuring FBA web application web.config file 2. Configuring Central Administration web application web.config file 3. Configuring Security Token Service web.config file D) Adding User Policy to the FBA Web Application E) Verification Steps  A) Setting up ASP.NET Forms Authentication User and Role Data Source  This section explains creation of database which is used to store user's information such as credentials and roles which is used for Form Authentication. This section also explains the configuration...
Read more

SharePoint 2013 Features

Image
http://msdn.microsoft.com/en-us/library/jj163091(v=office.15).aspx This page contains a huge amount of information on various different dev related topics. My personal highlights are Cloud App Model REST endpoints New client and server APIs Remote Event Receivers Workflow 4.0 Managed Navigation Cross-Site Publishing EDiscovery and many more Office 365 also availabe with free version.
Read more