Words from Alejandro U. Alvarez
Posts tagged tabs
Our of the oven Flash Templates:
Nov 3rd
I was building a site for a relative new company a couple weeks ago, and they wanted "A professional looking, brilliant display" for their products, I know Flash, and can do decent stuff with it, but seriously, how long does it take to do something really cool?
So I headed to the only place where I know this can be found for sure, Flash Mint, it was right then when I realized how much I had grown accustomed to it, the ease of use and friendliness of the design, and always full of new stuff!
You can even customize the products, get full website designs, and many flash templates for almost anything (Along with HTML, CSS, WordPress themes... etc) the list looks almost endless haha
Not so long ago I even bought a WordPress theme for a client I didn't have enough time to spend on. He was looking for something like that and I told him I could offer him a better price if he bought a pre-made template, so I showed him the ones that best fit his description and he ended up getting the "Personal Blog Theme", which looked really nice and fitted my client perfectly,
So if you are in a rush, or simply need a professional-looking Flash Movie, Template, or anything of the sort, this is a great alternative!
Perfect jQuery UI rotating tabs
Oct 20th
Tabs are nice. They create a very elegant interface, and jQuery UI does this marvelously, here we have a little preview of this:
jQuery UI Tabs
How to do that?
Include the files
With jQuery and jQuery UI it is dead simple. First, load the JS libraries, I recommend using the hosted files at Google for jQuery:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="path/to/jquery UI" type="text/javascript"></script>
Remember to include also the CSS files for the UI Theme! Otherwise the tabs won't seem to work!
The HTML for the tabs:
We need a little HTML for our tabs to work:
A wrapper, a few divs with the content, and an unordered list with the tabs:
<div id="tabs-rotate"> <ul> <li><a href="#tab1"><span>Tab 1</span></a></li> <li><a href="#tab2"><span>Tab 2</span></a></li> <li><a href="#tab3"><span>Tab 3</span></a></li> </ul> <div id="tab1">Tab 1 content</div> <div id="tab2">Tab 2 content</div> <div id="tab3">Tab 3 content</div> </div>
The JavaScript:
Now comes the cool part, basically we want to have tabs. But although tabs are nice, people may not realize there is more content, or they might be just too lazy to browse through it, so, why not rotate through the tabs?
jQuery UI does that by itself with a very simple commant, but it is not perfect! So we need to program our tabs to rotate, unless the mouse is over them. This way when a user is looking for a link, the tab will wait!
So here is how this is achieved:
$(document).ready(function(){ $("#tabs-rotate").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000); $('#tabs-rotate').hover(function(){ $(this).tabs('rotate', 0, false); },function(){ $(this).tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000); } ); });
First we instruct jQuery UI to set up tabs in that div, and to rotate them. Then we use a hover event to control the rotation. On hover no rotation, and on out resume rotation.
See it in action
You can see it working on the DJs Music homepage
As with the best stuff, it's terribly simple 
Hope you enjoy,
Alex
Beautiful tab design:
May 14th
This article is not on how to create tabbed menus, is just about how to style them!
I completely forgot who was the source, so if you happen to be the author comment your URL and I'll put up a link 
Anyway, I found that this is by far the easiest and probably most beautiful design for liquid rounded tabs out there, that requires absolutely no tweaking or adjusting.
It uses only one background image, which contains at the same time the normal state, hover state, and active state. In this case the image is a png image in white, and grey tones, but that can be easily changed in photoshop.
Here is the image in question:
As you can see it has the three tab states on it. We will use CSS background position abilities to make it look as if we are changing the image.
Now to make the tabs have liquid width we will use an a element for the left corner and a span for the other one.
Here is the CSS source:
@charset "utf-8"; /* CSS Document */ ul.cftab,ul.cftab li{border:0; margin:0; padding:0; list-style:none;} ul.cftab{ border-bottom:solid 1px #DEDEDE; height:29px; padding-left:20px; margin-bottom:20px; } ul.cftab li{float:left; margin-right:2px;} .cftab a:link, .cftab a:visited{ background:url(tab-round.png) right 60px; color:#666666; display:block; font-weight:bold; height:30px; line-height:30px; text-decoration:none; } .cftab a span{ background:url(tab-round.png) left 60px; display:block; height:30px; margin-right:14px; padding-left:14px; } .cftab a:hover{ background:url(tab-round.png) right 30px; display:block; } .cftab a:hover span{ background:url(tab-round.png) left 30px; display:block; } /* -------------------------------- */ /* ACTIVE ELEMENTS */ .cfactive a:link, .cfactive a:visited, .cfactive a:visited, .cfactive a:hover{ background:url(tab-round.png) right 0 no-repeat; } .cfactive a span, .cfactive a:hover span{ background:url(tab-round.png) left 0 no-repeat; }
To have it working you must use html code in the following way:
Notice that the ul has the class cftab, you can change that to anything you want, but remember to change it also in the CSS. The prefix cf is just used to avoid collisions with other styles you might already have.
I haven't set up a demo page, but it is so simple that if you want to test simply copy the codes and paste them on an html page and try it...
Enjoy,