Interactive tabs in pure CSS



A dear friend read my last post about my javascript navigation tabs, and commented that he'd like to see a method where it was easier to add new links and change existing ones. That gave me pause, because I hadn't been able to think of a way to implement a light-weight solution that would accomplish both the look I wanted and flexibility. After a bit more exploration it suddenly struck me - could I possibly implement my tabbed navigation in pure CSS?

I absolutely love CSS. It is extremely powerful and flexible, and the only thing that's annoying about it is that each browser has their own rendering quirks you have to keep in mind. (Getting a CSS layout to work in Internet Explorer is a task for only the brave of heart) There are plenty of properties you can combine in neat ways to get a cool effect, as seen in my blur spoiler tags.

So, I immediately got to work on a proof of concept. And after an hour or so, it worked. It actually worked. I polished it up this morning and will now be using CSS tabs instead of the image/javascript ones I used before.

The great thing about this version is it is so customizable; no mucking about with images and pixel offsets! Anyone can change the border type or colors or font to suit their needs.

Code

Here's my CSS:

/*Special Navigation*/

#myNav {
position: absolute;
left:580px;
top:303px;
height:54px;
width:400px;
}

#myNav a {
/*Make the link into a box*/
display:block;
width:73px;
height:38px;

position: relative;
float:left;
margin-left: -20px; /*creates overlap*/
z-index: 2; /*Default stacking position*/

text-align:center;
font-weight:bold;
line-height:2em; /*Centers the text vertically*/

border-width:8px;
border-style: solid;
/*Round borders in all browsers*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

/*Make slightly transparent in all browsers*/
opacity: 0.8;
filter:alpha(opacity=80);
background-color:white;
}

#myNav a:hover {
opacity:1.0; /*Make it completely opaque*/
filter:none; /*Make it opaque in IE*/
z-index:10; /*Make it pop out*/
}

myNav is the ID of the div that holds all the links. It is what positions the links on the page layout.
#myNav a is where most of the magic happens. We first make the link into a block or box, with a specific height and width. Giving this box a border creates our tabs. Using a negative left margin makes them overlap, rounding the borders and making the whole tab slightly transparent completes the aesthetics.
#myNav a:hover is the rest of the magic. Here, on hover, we push the link forward in front of the others by increasing the z-index. We also make the tab opaque.

In use, we define the border color and the color of the text inside the link. The links used in my example screenshots are generated with the following HTML (sorry about the use of rgb instead of hex; it's the post editor's fault and I don't know how to make it NOT do that)

<div id="myNav">
<a href="http://philenotfound.blogspot.com/" style="border-color: rgb(224, 179, 65);"><span style="color: #e0b341;">Home</span></a>
<a href="http://philenotfound.blogspot.com/p/about-me.html" style="border-color: rgb(214, 116, 51);"><span style="color: #d67433;">About</span></a>
<a href="http://bagleworm.tumblr.com/" style="border-color: rgb(195, 59, 81);"><span style="color: #c33b51;">Tumblr</span></a>
<a href="http://twitter.com/Nanoinfinity" style="border-color: rgb(161, 53, 158);"><span style="color: #a1359e;">Twit</span></a>
<a href="http://twitter.com/Nanoinfinity" style="border-color: rgb(18, 52, 86);"><span style="color: #123456;">Test</span></a>
</div>
Note: I have a lot of appreciation for this tool which will escape HTML characters, so that I can post HTML code without the browser trying to run the code snippet.

Browser Compatibility

Now, since this is pure CSS it will render differently in different browsers. I am happy to report it works in all browsers, but just looks slightly different. For example, webkit-based browsers have a bit of white edging. Firefox actually has the nicest rounded-edges rendering.

Firefox
Major version 3.6
Rendering engine version Gecko 1.9.2

Chrome
Major version 8.0
Rendering engine version Webkit 534.10

Opera
Major version 10.60
Rendering engine version Presto 2.6.30

Safari
Major version 5.0
Rendering engine version Webkit version unknown, presumably 534

And the ever-hilarious Internet Explorer, which still doesn't support rounded corners:
Internet Explorer
Major version 7.0.6

Comparison with Javascript

There are certainly some tradeoffs for each approach, the biggest one being compatibility for IE. As I have done previously, I chose to stick it to IE since I don't care so much for having my site look the same in all browsers.

JavaScript Css
Same across browsers? Yes No
Easy to change appearance? No Yes
Easy to add links? No Yes
Requires scripting enabled? Yes No
Responsive? Mostly* Mostly**
Requires external resources? Yes No
Can have very unique look? Yes No***

*Responsive after image loads, and once page is done downloading/rendering
** Responsive once page is done downloading/rendering, may have odd flickering behavior
*** We're limited to what can be done with CSS, but could use background images in the links

2 things about

Interactive tabs in pure CSS
  1. That's cool.
    i am using this in my blog too. :)
    Thanks for the Tut.

    ReplyDelete
  2. No problem, Indra! It looks really neat on your blog. I love how well it scales to new links.

    ReplyDelete

Copyright 2012 Phile not Found. See About
Powered by Blogger

"Whenever you find that you are on the side of the majority, it is time to pause and reflect."