Add different background for each link in the global navigation menu in SharePoint 2010

I needed a global navigation that has different styles for each of the link in the navigation, for example in the following image:

First I checked out Randy Drisgill’s article – Using simple rendering in SharePoint Navigation. From this article, I learnt that if UseSimpleRendering=”True”  in the <SharePoint:AspMenu> control, the navigation menu uses a cleaner unordered HTML list. If it’s set to False, then the old less clean Table based navigation is used

To make each link have different styles, I did the following:

  1. In the master page, set UseSimpleRendering=”False”
  2. Each of the links will have a id, can use these ids to style the look. Use the Developer’s Tool from IE to find these ids.
  3. In the master page style sheet, I added these code
    /*style of All links in global navigation*/
    a.zz1_TopNavigationMenuV4_1 {color:#000; font-weight:bold; padding:5px 33px 5px 33px;}
    /*Second level whole style*/
    .zz1_TopNavigationMenuV4_0 {margin-top:5px;}
    /*To make each item in the top level having different top border color*/
    #zz1_TopNavigationMenuV4n0{border-top:5px #99CE58 solid;}
    #zz1_TopNavigationMenuV4n0 + td{display:none;}/*remove white space between links*/
    #zz1_TopNavigationMenuV4n0 a:hover{color:#99CE58;}
    #zz1_TopNavigationMenuV4n1{ border-top:5px #599AC6 solid;}
    #zz1_TopNavigationMenuV4n1 img{ display:none}/*remove dropdown arrow when there is dropdown list*/
    #zz1_TopNavigationMenuV4n1 a:hover{color:#599AC6;}
    /*#zz1_TopNavigationMenuV4n1Items{background-color:#fff;}*/
    #zz1_TopNavigationMenuV4n2{ border-top:5px #00BDDD solid;}
    #zz1_TopNavigationMenuV4n2 + td{display:none;}
    #zz1_TopNavigationMenuV4n2 a:hover{color:#00BDDD;}
    #zz1_TopNavigationMenuV4n3{ border-top:5px #AAB383 solid;}
    #zz1_TopNavigationMenuV4n3 img{ display:none}
    #zz1_TopNavigationMenuV4n3 a:hover{color:#AAB383 ;}
    #zz1_TopNavigationMenuV4n3Items{color:#AAB383 ;}
    #zz1_TopNavigationMenuV4n4{ border-top:5px #6DC9CB solid;}
    #zz1_TopNavigationMenuV4n4 + td{display:none;}
    #zz1_TopNavigationMenuV4n4 a:hover{color:#6DC9CB ;}
    #zz1_TopNavigationMenuV4n5{ border-top:5px #3B637E solid;}
    #zz1_TopNavigationMenuV4n5 img{ display:none}
    #zz1_TopNavigationMenuV4n5 a:hover{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n5Items{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n6{ border-top:5px #836252 solid;}
    #zz1_TopNavigationMenuV4n6 img{ display:none}
    #zz1_TopNavigationMenuV4n6 a:hover{color:#836252;}
    #zz1_TopNavigationMenuV4n6Items{color:#836252;}
    #zz1_TopNavigationMenuV4n7{ border-top:5px #AAAAA0 solid;}
    #zz1_TopNavigationMenuV4n7 a:hover{color:#AAAAA0;}
    /*Second level links having different hover state*/
    #zz1_TopNavigationMenuV4n8 {height:20px;}
    #zz1_TopNavigationMenuV4n8 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n9 {height:20px;}
    #zz1_TopNavigationMenuV4n9 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n10 {height:20px;}
    #zz1_TopNavigationMenuV4n10 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n11 {height:20px;}
    #zz1_TopNavigationMenuV4n11 a:hover{color:#AAB383;}
    #zz1_TopNavigationMenuV4n12 {height:20px;}
    #zz1_TopNavigationMenuV4n12 a:hover{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n13 {height:20px;}
    #zz1_TopNavigationMenuV4n13 a:hover{color:#836252;}
    #zz1_TopNavigationMenuV4n14 {height:20px;}
    #zz1_TopNavigationMenuV4n14 a:hover{color:#836252;}

    Note: if there are more then one level in the navigation, the other levels’ code will be after the table of the first level in the source code the the master page.

Advertisements