Tab Navigation using CSS only – Great for SharePoint

My buddy and design counterpart at work whipped up a tab navigation for a SharePoint client who needed navigation between web part pages.  You can put this code into a content editor web part and have insta-nav on your web part pages. Here is a preview:

The ZIP file contains the HTML code with CSS and the images to create the tabs.  You can of course tweak to your liking for your own design. And this isn’t just for SharePoint, you can use it for any web site.

» Download the ZIP file for tab nav

Chris, who wrote this code, likes to blog about fish and stars and other stuff that shows he has a life.  So he generously offered that I could post his tab nav on my site. If you have any questions though, bug me via post comments or my contact form.  Leave Chris please to play with his family and fish. 🙂

14 thoughts on “Tab Navigation using CSS only – Great for SharePoint”

  1. You forgot to mention his other hobby – sitting in his little outhouse observatory in the back yard gazing at the stars. Or at least, that’s what he tells us.

  2. I gather there will be multiple HTML pages rendered with this approach. How does this get used with content editor web part. Is there any working example you have of this being used in a sharepoint site with CEWP. Thanks in advance for your help.

  3. Looks great, woo is it installed into sharepoint 2003? can it be done on the main theme? or does it have to be used only on a custom theme for the likes of work space sites?great many thanks!

  4. Hi HeatherI have the Tab Navigation displaying etc in a Content Web Part Editor, but when you click Page 2 – Page 1 remains as the active tab.Is this supposed to change ?Iain

  5. Wow!! This is exactly what I was looking for. I used to be forced to create a ‘Meeting Workspace’ to be able to do tabs…but that was so restrictive. Now I can use tabs with much more flexibility!!!THANKS

  6. wow this code is amazing. i agree avi j this is much better than making a meeting workspace

  7. It worked for me. I used two content editor web part, 1st content editior web part(CEWP) will have the above CSS + HTML code which generates the required tabs and 2nd CEWP will have the corresponding contets. Similarly we need setup the remaining tabs, so for each tab we need to create page with two CEWPs.

  8. IRT Iain:From what I can tell on each page you place the tabs you have to change the CSS to the current tab as the “on” tab.Other than not automatically changing the current tab this code is great! Easy to customize and yet simple enough that a developer doesn’t need to teach the end user lots of HTML to update/modify it.

  9. I have made some modifications that have made it easier to manage the addition of tabs. It has also made it such that each page the tab is highlighted correctly and I do not need to go into each of the previous pages with tabs and make any edits.I have split the code into two groups. The <style>…</style> is one group, call it HIGHLIGHT. The <div>…</div> is the second group, call it TABS. So I have two text files to start off with HIGHLIGHT and TABS. I store these is a document library. The HIGHLIGHT file I will copy and make a unique file for each page that has a tab on it. I then edit the file to indicate which Tab should be highlighted. (remember that each URL has an ID and that ID identified in this file will make sure it is highlighted on this page.)There will be only one TABS file. I will only need to edit this file to add the new tab. As you will see this will then be populated for all the other pages that already had tabs.On the page that I want to add the tabs I add two CEWP. The first CEWP I put in the Content Link, the link to the TABS file. The second CEWP I put in the Content Link, the link to the unique HIGHLIGHT file. The unique HIGHLIGHT file will make sure that the tab on this page is highlighted and not on any other pages.So now any time that I add a tab, I can add it to the TABS file and all of my other pages with tabs gets updated. I do not have to edit any of the previous pages.

  10. I was wondering if there was a way to have a list content display on the same page as the tabs instead of opening on seperate page.

Comments are closed.