Tab Navigation using CSS only - Great for SharePoint

Search:

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. :-)

posted on Wednesday, August 10, 2005 7:24 PM

Comments

# re: Tab Navigation using CSS only - Great for SharePoint
Wayne Larimore
Posted @ 8/11/2005 8:02 AM
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.
# Tab Navigation using CSS only - Great for SharePoint
Wayne Larimore - his bloggin' We
Posted @ 8/11/2005 9:32 AM
# SharePoint Design How-To Articles
Heather Solomon - MVP, WSS - Blo
Posted @ 3/23/2006 1:15 PM
# SharePoint Design How-To Articles
Heather Solomon - MVP, WSS - Blo
Posted @ 3/23/2006 1:17 PM
# Well, this is Huge... (Tabbed Navigator)
SharePoint from Scratch
Posted @ 1/20/2006 1:37 PM
# SharePoint Design How-To Articles
Heather Solomon - MVP, WSS - Blo
Posted @ 3/23/2006 1:13 PM
re: Tab Navigation using CSS only - Great for SharePoint
Indigo
Posted @ 7/9/2007 10:11 AM
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.
# re: Tab Navigation using CSS only - Great for SharePoint
mat young
Posted @ 8/28/2007 7:50 AM
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!
re: Tab Navigation using CSS only - Great for SharePoint
Iain Munro
Posted @ 12/8/2007 2:18 PM
Hi Heather

I 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
re: Tab Navigation using CSS only - Great for SharePoint
Avi J
Posted @ 2/7/2008 1:38 PM
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
re: Tab Navigation using CSS only - Great for SharePoint
mulan
Posted @ 3/11/2008 2:03 AM
i cannot open the zip file. help! thanks
re: Tab Navigation using CSS only - Great for SharePoint
Salt
Posted @ 6/20/2008 9:48 AM
Hey has anyone got this working with Sharepoint as yet?
re: Tab Navigation using CSS only - Great for SharePoint
dexter
Posted @ 7/1/2008 2:58 PM
wow this code is amazing. i agree avi j this is much better than making a meeting workspace
re: Tab Navigation using CSS only - Great for SharePoint
spatnaik
Posted @ 7/14/2008 12:46 PM
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.
re: Tab Navigation using CSS only - Great for SharePoint
Joe Smith
Posted @ 7/22/2008 12:48 PM
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.

Title
Name
Email (never displayed)
Url
Comments
ALL COMMENTS ARE MODERATED! Sorry for the inconvenience, but it is how I keep all of the spam and advertisers out. I moderate comments about once a week and your comment will appear soon. Thanks for posting!
Remember Me?
Please add 3 and 6 and type the answer here:

Blog Stats:
Posts - 375
Stories - 38
Comments - 1444
Trackbacks - 182