PixelBrite.com®

What are FlexTabs™?

FlexTabs™ are stylized user interface elements which feature hovering effects, active-tabs, stylized colored labels for each state, and support icons—including: 1) Static Icons 2) Rollover Icons 3) Active Icons. Read Try It Out below to see a quick sample.

<div class="flextab green green-h">
    <div class="leftside"></div>
    <a class="rightside" href="link">label
    <span class="piximage"></span></a>
</div>

<div class="flextab green green-h">
    <div class="leftside"></div>
    <input class="rightside" type="submit"
    value="{*label*}" />
</div>

<div class="flextab green green-h withicon">
    <div class="leftside"></div>
    <div class="piximage"></div>
    <input class="rightside" type="submit"
    value="{*label*}" />
</div> 

The Snippets

The HTML Markup, or snippets, are presented on the right. Selection of a snippet will depend on your application. Simply copy-and-paste the appropriate snippet into your HTML document, insert your content where indicated and it will be attractively presented with no image editing or special coding. Typical snippet applications follow:

[ 1 ]   Standard For normal hyperlinks using an anchor <a> tag. This standard version also supports an icon image.

[ 2 ]   Form Submit Used as a form submit button

[ 3 ]   Form Submit with Icon Form submit an extra element for icon support

The samples in this article use the [ 1 ]   Standard snippet. The form versions function identically, using the same class-modifiers. Additional discussion of snippets, form versions, icon dimensions, and other details is provided in the FlexCSS™ Knowledgebase and User Guide.

Color Labels

FlexTabs™ have three colors built-in for the label which correlate to each state. A color for static, hover, and active. These are all set to match their respective styles color scheme. Please refer to the Online Reference or User Guide for a styles reference.

Class-Modifiers

Class-modifiers are displayed on the right. Several new class-modifiers are introduced with FlexTabs™ in contrast to FlexBtns™ and are described briefly below. For more information, please refer to the FlexCSS™ Knowledgebase or User Guide.

Defaults

FlexTabs™ do not have a default style. This versatility allows the elimination of a state by simply omitting its respective style state (-h, -a). Assigning defaults is discussed in the FlexCSS™ User Guide. Styles and class-modifiers can be used to the style and adjust Tab behavior. Below are some examples of FlexTabs™. Refer to the Online Quick Reference for a full style listing.

Try It Out

After ensuring you have Installed FlexCSS™, copy-and-paste the snippet into your document and fill in the content area. For this try-it-out snippet, we need to include one class (floatleft) which is also highlighted. That's It!— a tab is now displayed on your page. Continue reading to learn more about how to adjust the appearance of your new FlexTab™ along with adding additional tabs in a row.

<div class="flextab green green-h floatleft">
    <div class="leftside"></div>
    <a class="rightside" href="http://pixelbrite.com">Home
    <span class="piximage"></span></a>
</div>

Adding Styles & Content

For this example, we revisit the above Try-It-Out, changing the style to wgray and again, point out the two pieces of information that must be inserted into the snippet. These are 1) The HREF (web address), and 2) The label. Consider this snippet with the areas filled-in and highlighted:

<div class="flextab floatleft wgray wgray-h">
    <div class="leftside"></div>
    <a class="rightside" href="http://www.pixelbrite.com">
    Pixel Brite Creations
    <span class="piximage"></span></a>
</div>

All of the following examples use the same snippet illustrated above, therefore, further samples will only demonstrate the header div.

Static, Hovering, and Active FlexTabs™

For FlexTabs™ up to three styles can be specified for different states:

• static → example style name: wgray
• hover → example style name with -h: wgray-h
• active → example style name with -a: wgray-a

Each FlexTab™ style has a counter-part that is intended for display when hovering. With FlexBtns™, a different style is specified for hover. Although this can also be done with FlexTabs™, specifying the same style names for both static and hover will render the tab with its hover counter-part. The active state is introduced with FlexTabs™ which simply allows a third style to be specified for the active state (using -a extension with the style name).

Swap: swapstatic, swaphover, swapactive

Although FlexTabs™ incorporate a hover counter-part with each style, specifying the same style for both static and hover is not required. Still, if another style is specified for hover, it will use the hover counter-part of the style specified.

Consider the following tab which is the style rose. Displayed is both the rose(static) and rose-h(hover) parts to this single rose style.

Now, what if you preferred to use the static version of a tab for hover or active?

This is why swapstatic, swaphover, and swapactive were introduced into FlexCSS™ FlexTabs™. Prior to these swap classes, using the hover states as static was not possible. Similarly, using the static states as a hover or active style was not possible. Simply include one of the following class modifiers to flip-flop the behavior of the style.

• swapstatic → the static style will shift to the hover counter-part for static display : static display of wgray would equate to wgray-h
• swaphover → the hover style will shift to the static appearance for hover : hover display of wgray-h would equate to wgray
• swapactive → the active style will shift to the static appearance for active : active display of wgray-a would equate to wgray

FlexTabs™ and FlexCSS™

Presented next is a row of numbered FlexTabs™ followed by a brief overview of their related class-modifiers with related features and benefits. Many techniques can be used to horizontally stack your tabs and hinge them to a FlexBlox™. The example below is covered in this knowledgebase article: FlexTabs™ - Hinging Tabs to a FlexBlox™ (requires login and ownership of FlexCSS™).

Tab 1

<div class="flextab arc_steel-gray arc_steel-gray-h floatleft
withicon rollover tab-flexcss">

This tab demonstrates withicon and rollover. The tab-flexcss is not part of FlexCSS™. It is simply a class used to point to the rollover image. This procedure is explained in an independent topic below.

Tab 2

<div class="flextab arc_steel-gray arc_steel-gray-h floatleft">

This tab demonstrates the most basic functionality. A static style and a hover style are specified. Active style is not specified (or required).

Tab 3

<div class="flextab arc_magentawhite swapstatic arc_steel-gray-h floatleft">

This tab demonstrates mixing two styles and using swapstatic. Static style arc_magentawhite is specified, however, swapstatic is also used which causes the arc_magentawhite style to flip-flop to its hover version for static display. The hover style specified is nothing out of the ordinary.

Tab 4

<div class="flextab arc_steel-gray arc_beigewhite-h swaphover floatleft">

This tab demonstrates mixing two styles and using swaphover. Hover style arc_beigewhite-h is specified, however, swaphover is also used which causes the arc_beigewhite style to flip-flop to its static version for hover display. The static style specified is nothing out of the ordinary.

Tab 5

<div class="flextab arc_steel-gray arc_steel-gray-h
arc_steel-gray-a pixactive floatleft">

This tab demonstrates the most basic active tab, specifying arc_steel-gray-a as the active style and the class-modifier pixactive which causes the tab to display in active state. The static and hover styles specified are nothing out of the ordinary.

Tab 6

<div class="flextab arc_steel-gray arc_steel-gray-h
arc_charcoalwhite-a pixactive rollover-a tab-flexcss swapactive withicon floatleft">

This tab demonstrates numerous classes: arc_charcoalwhite-a specifies an active style different from its static and hover selections, with pixactive used to flag the tab as active which styles it accordingly. However, swapactive is used which flip-flops the appearance of the tab to arc_charcoalwhite static version. Withicon is also used to setup the tab with icon support. The class tab-flexcss is not part of FlexCSS™ and simply points to the rollover image (explained in a topic below). Notice this tab uses rollover-a which flips the rollover-icon to its hover version when the tab is in active state. The static and hover styles specified are nothing out of the ordinary.

As you can see, the class-modifiers provide a great deal of flexibility and versatility adjusting styles, appearances, and rollover-icon preferences on the fly. Coupling these with Javascript can yield some dynamic results.

Breaking a FlexTab™

The above FlexTab™ clearly demonstrates the need to apply positioning. Because FlexTabs™ are block-level elements, they consume 100% of their parent container width. Whether you address positioning with floating, fixed widths, absolutely, or inline, it must be taken into account when incorporating a FlexTab™ into your document. Three short-cut classes are included to assist with positioning: floatleft, floatright and inlineblock. Although positioning is beyond the scope of FlexCSS™, we provide a sample of floated tabs hinged to a FlexBlox™ here: FlexTabs™ - Hinging Tabs to a FlexBlox™ (requires login and ownership of FlexCSS™).

Fixing the broken FlexTab™ is done with a simple float. Examine the header div:

<div class="flextab magenta magenta-h floatleft">

Sizing: clip5, pad5, pad10

Three class-modifiers: clip5, pad5, and pad10 coupled with the default FlexTab™ size provide four varying sizes which are intended to be used without an icon. Clip5 shaves 5px off of the left and right edges; pad5 and pad10 increase the width by roughly 5 and 10 pixels. (actual adjustments are: 6px and 12px). Depending on the design of your FlexTab™ image, clip5 or default sizing may apply too much clipping. These class-modifiers provide simple short-cuts to contracting or expanding tabs when appropriate. From left to right the following tabs use these classes: 1) clip5 2) Default 3) pad5 4) pad10

These class-modifiers are a recent addition and are not covered in the User Guide.

Swaphover & Disabling

To disable hovering in the above tabs two methods were employed: the inclusion of swaphover on two tabs, while the others omit the hover style. Hovering is not actually disabled by using swaphover. Because the same style is specified for hover, swaphover is simply displaying the static version of the tab for both states. While the omission of a hover style actually disables hover completely. Swaphover may be more advantageous for scripting solutions. Similar flexibility is extended with swapstatic and swapactive.

Incidently, had the above tabs specified a different style for hover, then swaphover would not have disabled the tab. Instead, the tab would display the static version of the hover style specified.

Withicon

FlexTab™ icons require a CSS statement pointing to the image file. A rollover image is optional. The difference between static and rollover icons is that the rollover contains two image versions in one file: so it is twice as wide. Also, rollover is placed in the header div. A rollover image can be used statically by omitting the rollover class. The CSS is the same for both, which requires pointing to .piximage (a placeholder within the FlexTab™ snippet). Consider this example, beginning with FlexCSS™ logo in a rollover version:

.mylogo .piximage {background(images/mylogo.png) 0 0 no-repeat;}

<div class="flextab arc_steel-gray arc_steel-gray-h mylogo withicon rollover floatleft">

Rollover-a

To display the hover version of a rollover icon when the tab is active, simply include the rollover-a class and FlexCSS™ will flip the icon. To clarify, you will need both rollover and rollover-a in order to 1) have a rollover effect for the icon 2) have the rollover icon display its hover counter-part when active.

Bonus Tabs

Next

Next, Final Considerations briefly discusses topics related to FlexCSS™ in general.