I have seen a number of posts on forums asking how to customize SharePoint's Quick Launch menu. The Quick Launch menu is really useful for providing customized navigation for your application. But it's really boxy looking. Fortunately, it's quite easy to customize how it looks. SharePoint uses some standard parts to create the frame of the Quick Launch menu, but depending on your design, you may have to turn off quite a few CSS definitions to get it to look the way you want. You would be surprised to see exactly where they put CSS definitions to create the Quick Launch look. Like a lot of SharePoint's front end, the design decisions often don't make sense, but it's what we have and it's what we have to work with. I cannot emphasize enough that using the Internet Explorer DOM explorer to find which element is styled which way is essential to get anything done with SharePoint.
There are a few pages related to editorial tasks as an administrator where SharePoint outputs two Quick Launch menus stacked on top of each other. I was not expecting this originally, and had to adjust my design to handle this. What shows up in the Quick Launch menus is configurable in the administrative settings. How the Quick Launch menus look is totally up to you.
In this particular case, I needed to give the Quick Launch menu rounded corners. I would need to attach the appropriate background images to it somehow. Basically, I used div.ms-quicklaunchouter for the top and div. ms-quickLaunch for the bottom of the graphics. For the main items in the Quick Launch SharePoint uses h3s with a class of .ms-standardheader. For the sub-links SharePoint uses a table of class .ms-navitem which contains links with a class of .ms-navitem. Bearing this in mind, you can easily style the menus items according to your wishes.
The image below shows where the Quick Launch menu is in the layout.
This image shows the structure for the individual links in the Quick Launch menu. As you can imagine, each tr below will contain the actual anchor for the hyperlink.
If we open up the first tr, we will see that it is a header with a class of "ms-navheader."
Of course, for the size and functionality of the Quick Launch menu, it would have made more sense for the SharePoint team to use some semantic structure. Instead we have one of the worst examples of nested tables in existence. This causes SharePoint pages to be approximately ten times heavier than a semantically marked up page. This in turn causes SharePoint pages to feel slow because they take so long to load. Anyway, despite the drawbacks in SharePoint's frontend, I was able to make it look like a semantically marked up page. Hopefully, soon Microsoft's UX evangelists will notice SharePoint's neglected frontend and work their magic on it.
From the above markup we get the following typical SharePoint Quick Launch menu:
With the following definitions we're going to give the Quick Launch menu a width which will work with the images we are going to attach. Then we'll attach the top and bottom rounded corners to it
table tr td.ms-leftareacell {
width: 138px;
}
td#quicklaunchtablecell {
width: 138px;
}
div.ms-quicklaunchouter{
width: 138px;
width: 197px;
border: none;
background: transparent url('quick-launch-top.gif') no-repeat;
padding-top: 18px;
}
This will give us the following result:
As you can see, there's a lot more to turn off. For one, we don't want the recycle bin on our version, so we'll hide it. We also don't need any of the borders. We are going to add in a different background image on both headers and sub links to create a uniform body. We are going to change the bullet to fit the color scheme. We don't want the "View All Site Content" on our menu either, so we'll hide it.
Hiding the Recycle Bin and the "View All Site Content" is easy:
.ms-quicklaunchheader {
display: none;
}
div.ms-quicklaunch table.ms-recyclebin {
display: none;
}
Now the Quick Launch menu looks like this, no Recycle Bin or "View All Site Content":
Next we'll attach the background image to the menu links to fill in the rest of the menu. Because of the way the menu is put together, we'll need to attach the background image to three different areas to get it to work:
.ms-quicklaunch table.ms-navheader td,.ms-navheader2 td,.ms-quicklaunch span.ms-navheader{
background-color:#d6e8ff;
border-top:solid 1px #f2f8ff;
border-left:solid 1px #f2f8ff;
padding:1px 6px 3px 6px;
background: none; border: none;
background: transparent url('quick-launch-body.gif') repeat-x;
}
.ms-quicklaunch table.ms-selectednav td{
background:none;
border:none;
background: transparent url('quick-launch-body.gif') repeat-x;
padding:3px 6px 4px 17px;
}
div.ms-quicklaunch table.ms-navsubmenu2 td,.ms-quicklaunch span.ms-navheader,.ms-quicklaunch table.ms-selectednavheader td {
background: transparent url('quick-launch-body.gif') repeat-x;
}
This will give us the following:
Now we only have to get rid of the borders, add some padding and put in the new bullets. After doing that, here's how the Quick Launch menu looks:
And here's the complete CSS for this, which also contains definitions for rollover states:
/* Custom Style for Quick Launch Sidebar */
table tr td.ms-leftareacell {
width: 138px;
}
td#quicklaunchtablecell {
width: 138px;
}
div.ms-quicklaunchouter{
width: 138px;
width: 197px;
border: none;
background: transparent url('quick-launch-top.gif') no-repeat;
padding-top: 18px;
}
.ms-quicklaunch table td{
border-top:1px solid #add1ff;
}
.ms-quicklaunch table.ms-navheader td,.ms-navheader2 td,.ms-quicklaunch span.ms-navheader{
background-color:#d6e8ff;
border-top:solid 1px #f2f8ff;
border-left:solid 1px #f2f8ff;
padding:1px 6px 3px 6px;
background: none; border: none;
background: transparent url('quick-launch-body.gif') repeat-x;
}
.ms-quicklaunch span.ms-navheader{
border: none;
}
.ms-quickLaunch{
background: none;
border: none;
}
.ms-quicklaunchheader{
background: none; border: none;
}
.ms-quicklaunchheader a,.ms-selectednav a,.ms-unselectednav a{
color:#003399;
text-decoration:none;
}
.ms-quicklaunchheader a:hover{
color:#000000;
text-decoration:underline;
}
.ms-quicklaunchheader {
display: none;
}
.ms-navsubmenu1{
width:100%;
border-collapse:collapse;
background-color:#f2f8ff;
background: none;
border: none;
}
.ms-navsubmenu2{
width:100%;
background-color:#f2f8ff;
margin-bottom:6px;
background: none;
border: none;
}
.ms-recyclebin a {
display: none;
}
div.ms-quicklaunch table.ms-recyclebin {
display: none;
}
div.ms-quicklaunchouter div.ms-quicklaunch {
background: transparent url('quick-launch-bottom.gif') no-repeat left bottom;
padding-bottom: 18px;
}
table.ms-navSubMenu1 td, div.ms-quicklaunch table tr td {
border: none;
}
table.ms-navitem,span.ms-navitem, table.ms-navitem td {
background-image:url("/_layouts/images/navBullet.gif");
background-repeat:no-repeat;
background-position:top left;
padding:3px 6px 4px 17px;
font-family:tahoma;
background-image: none;
}
table.ms-navheader td a {
display: block;
background: transparent url('quick-launch-unselected.gif') no-repeat;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 9px;
margin-left: -2px;
margin-bottom: -4px;
}
table.ms-navheader td a:hover {
background: transparent url('quick-launch-hover.gif') no-repeat;
text-decoration: none;
color: #003399;
}
div.ms-quicklaunch table.ms-navsubmenu2 {
margin-bottom: 0px;
}
.ms-quicklaunch table.ms-selectednav{
border:none;
background: none;
margin: 0px;
}
.ms-quicklaunch table.ms-selectednav td a {
color: #003399;
border: none;
margin-right: -4px
}
.ms-quicklaunch table.ms-selectednav td{
background:none;
border:none;
background: transparent url('quick-launch-body.gif') repeat-x;
padding:3px 6px 4px 17px;
}
div.ms-quicklaunch table.ms-navsubmenu2 td,.ms-quicklaunch span.ms-navheader,.ms-quicklaunch table.ms-selectednavheader td {
background: transparent url('quick-launch-body.gif') repeat-x;
}
div.ms-quicklaunch table.ms-navsubmenu2 td a {
display: block;
background: transparent url('quick-launch-blt-unselected.gif') no-repeat;
margin-left: -13px;
margin-bottom: -6px;
padding-left: 22px;
padding-top: 4px;
padding-bottom: 4px;
}
div.ms-quicklaunch table.ms-navsubmenu2 td a:hover {
background: transparent url('quick-launch-blt-hover.gif') no-repeat;
text-decoration: none;
color: #003399;
}
Bare in mind that my CSS definitions where to modify the Quick Launch menu to fit with a particular theme that I was building. In your case you may need to change quite a few of my definitions. At least this can serve as an example of how to go about customizing the look and feel of the Quick Launch menu.