Article
21 comments

Round corner in top navigation

The navigation in SharePoint 2010 has slightly changed and will now be rendered a new way as a list. To use list elements instead of tables is a common practice in web development. The structure of the navigation and therefore the top navigation has some important elements and style sheet classes that allow you to theme the top navigation really easy.

The Basic

The top navigation is a list as mentioned before. Inside a list element is a hyperlink that contains a span element. The source for one element on the top navigation looks like this:

<li class="static">
    <a class="static menu-item" href="/Blank">
        <span class="additional-background">
            <span class="menu-item-text">Blank</span>
        </span>
    </a>
</li>

To get a rounded navigation the background will be attached in this example to the hyperlink and the additional-background class. To reset the navigation add the follow style to your stylesheet.

.s4-tn ul li.static,
.s4-tn ul li.static.selected,
.s4-tn ul li.static a.static,
.s4-tn ul li.static a.static.selected{
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    border: 0px;
    background-image: none;
}

This style removes all paddings, margins and anything else that is not needed.

The Background Image

For the background images is use CSS sprite. If you don’t know what this is you can find a really good article on “A list apart”. Basically I us only a single background image and move the background around using background-position property. So the background image is use looks like this:

The red area I will use as a navigation background. The yellow will be my hover effects and also mark the selected navigation element but I will tell you later more.

The navigation

In the previous step I removed all margins and padding, which is good because now all navigation elements have now all the same values and set to zero. To attach the background I first stretch the navigation elements back to the values I will use later for the navigation.

.s4-tn ul li.static a.static,
.s4-tn ul li.static a.static.selected{
    background-color: orange;
    padding-left: 10px;
    padding-bottom: 9px;
    margin-right: 5px;
    color: white;
}
.s4-tn ul li.static a.static .additional-background{
    background-color: maroon;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 6px;
    color: white;
}

These styles above will let the top navigation look like this:

The final Step

Now to get the background image on our navigation you just need to add the background-image property to our style sheet. To get the parts of sprite in the right position we need to add the background-position too. The style sheet look then like this:

.s4-tn ul li.static a.static,
.s4-tn ul li.static a.static.selected{
    background-image: url('/_layouts/navigationtest/navigation-bg.png');
    background-repeat: no-repeat;
    background-position: left -120px;
    padding-left: 10px;
    padding-bottom: 9px;
    margin-right: 5px;
    color: white;
}
.s4-tn ul li.static a.static .additional-background{
    background-image: url('/_layouts/navigationtest/navigation-bg.png');
    background-repeat: no-repeat;
    background-position: right 0px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 6px;
    color: white;
}

And now you have navigation with round corners then looks like this:

So this wasn’t rocket science so far and only a view line of style sheet mission can be accomplished. One thing left missing, so what about the hover? Even no problem but we need to move the background images. The style for that looks like this and hover is done.

.s4-tn ul li.static a.static:hover,
.s4-tn ul li.static.selected a.static.selected,
.s4-tn ul li.static.selected a.static.selected:hover{
    background-position: left -180px;
    color: black;
}
.s4-tn ul li.static a.static .additional-background:hover,
.s4-tn ul li.static.selected a.static.selected .additional-background{
    background-position: right -60px;
    color: black;
}

And so it should look then:

The style above also alters the style of the selected tab and the whole style adaption has only thirty two lines of pure css without any jquery or other code required.

Conclusion:

So in general Microsoft done a great job to get rid of the lame table based design to a completely more web designstandard way. Styling the navigation is one good example how easy some things have become in SharePoint 2010. The classes on the element are better structured and well attached to the elements. Simple hover effects even don’t need any scripting code at all.

21 Comments

  1. Thank you so much this is great stuff and its really sorted us out.
    Thanks for sharing!

    Reply

    • Hi Christian,

      thanx. Your series of article is also very good !!! Congratulation for that.

      Kind regards
      Stefan

      Reply

  2. Hi great article, but i noticed that this is created for tabs with no dropdown arrows when more subsites are created as well as the arrow at bottom of the text when the item is selected… is there a way for these elements to be added to the structure. thanks

    Reply

    • Hi,
      as far as i understand you is that you want to add the default drop down arrow that are there on default. Those can be managed to add the arrow to the background design and user the class .dynamic-children to overwrite the background position.

      Hope this helps
      Kind regards
      Stefan

      Reply

  3. how to hide the siteaction, navigate up and signin menu in sharepoint 2010 site
    can any one help me ..

    Thanks in advance

    Reply

    • Do you want to hide site actions, navigate up and signin menu in SharePoint 2010 for all users or specific to the permissions ?

      Reply

  4. Hi Stefan,

    Great Work mate. I think there is a bug in this code. If you mouse hover the additional background, it shows a different colour. Any idea about this?

    Thanks
    Kash

    Reply

    • Hi Kash,

      Thanx for your comment. The problem is that you left the hover state when you hover the text. I have fixed this previously in turn around the images. The long bar from right to left and on the right side the closing border. I will update the blog post in the next couple of days.

      Regards
      Stefan

      Reply

  5. Hi Stefan,

    Thanks for your reply. I’m totally beginner to a SP Branding and I really liked your post. It really helped me. I’ll try to fix it and will wait for an update as well.

    Kash

    Reply

  6. When i hover to the left of the text only the left side of background is shown. I suppose it’s because i leave the additional-background. Any idea how to fix this ?

    Reply

    • The problem is that you’ll lose the focus. You need the use the larger part of the background for the left side and the smaller one on the right site. When you then over over the navigation it should show correctly. Make sure that you don’t leave the additional background.

      Reply

  7. If i position the containers on top of eachother the images overlap and the result doesnt look good. I suppose it could work wihout transparent background, trouble is i would really like to make it work with transparent background.

    Reply

  8. Hi Stefan

    I want to make rounded corners at both the ends of top link navigation bar not for individual items as mentioned above,Please help me in achieving this.I am using sharepoint foundation for developing my sharepoint applications

    Best Regards
    Bobby

    Reply

    • Hi Bobby,
      in this case you should take a look at the html structure first which should look like this.
      <div class="menu horizontal menu-horizontal"> <ul class="root static"> <li class="static selected"> ... </li> </ul> </div>
      What you need to do now is to apply the long background image to the class .s4-tn .menu-horizontal and the short end to .s4-tn ul.root. Then it should look fine. You only need to make sure that your background image is long.

      Kind regards
      Stefan

      Reply

  9. Hello Stefan,

    I have question which not related with this topic. If we have a site and the navigation path is like Sitecollection > Site1 > Subsite this is normal behaviour. I want something like custom navigation Google > Site 1 > subsite (Where google is topnode which doesnt belong to the sharepoint)

    Thanks & Regards
    Mukesh Ranjan

    Reply

    • In this case the only chance you have is to edit the master page and add the link manually. With Internet Explorer Developer Tools, Firefox of Chrome you can copy the css classes the default navigation uses.
      Sorry for the late reply but I was really busy over the last couple of days.

      Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.