Tab Panel Generator
Tab panels can be used to present several or many areas of content, one at a time, to site visitors. As examples, it might be used to present testimonials, products, feature lists, comparison charts, or navigation links.
More on what tab panels can be used for is later in the article. First, let's describe and show what it is.
What Is a Tab Panel?
A tab panel is an area of content with tabs above it. When a tab is clicked, different content is displayed in the tab panel.
Here is an example.
What is a tab
panel, really?
|
Why would I want
a tab panel?
|
Where can I get
a tab panel?
|
A tab panel contains areas of content that change when tabs above the content are clicked.
This content is in a tab panel. When you click a different tab, the content changes.
Tab panels can be an elegant, professional, and considerate way to provide information.
The elegance is in its design. The professionalism is in the way web page real estate is utilized. The consideration is in letting the site visitor choose which information to be exposed to.
Use tab panels for providing shipping options, testimonials, and comparison charts. Tab panels can also be used to publish specials, feature lists, and even poems.
Click here for the basic tab panel generator.
The advanced tab panel generator is available only to WebSite's Secret
members.
Generator Differences
This basic public version of the tab panel generator has:
-
A limit of 3 tabs.
-
One tab panel creation is stored in a cookie 3 days and available for editing.
-
A link back to willmaster.com is required.
The advanced
WebSite's Secret
version of the tab panel generator has:
-
Unlimited tabs.
-
Unlimited number of tab panel creations may be
stored during entire membership period for editing whenever desired.
-
A link back is optional.
-
WebSite's Secret membership comes with access to software downloads, generators, and information not available to the general public.
|
Created with Tab Panel Generator
The above was generated with the
Basic Tab Panel Generator, which is free to use.
The generated code is complete. Just copy 'n paste. The CSS styles and the tab panel content may be edited, if you wish to do so.
The code for the above example was copied from the generator and pasted into place without editing. What you see is what was generated.
Ways a Tab Panel Can Be Used
Tab panels can be an elegant, professional, and considerate way to provide information.
The elegance is in its design. The professionalism is in the way web page real estate is utilized. The consideration is in letting the site visitor choose which information to be exposed to.
Some things tab panels can be used for are:
-
Product choices. Tabs can present information and pictures of different models or versions.
-
Step-by-step instructions. Online instructions can be presented with a tab panel. Instructions for each step can have its own tab.
-
Shipping options. Shipping options can be explained, each under its own tab.
-
Testimonials. The name of the person who provided the testimonial can be on the tab. The testimonial itself in the panel content area.
Other ways tab panels can be used are for comparison charts, specials, feature lists, and even poems.
Using the Basic Tab Panel Generator
Click here to use the Basic Tab Panel Generator.
When the generator page is loaded, you'll see a section for formatting options and a section for content.
Tab Panel Formatting —
The width and height of the individual tabs above the panel content area may be specified, as well as their text/background colors. Colors may be different for the tab in focus and the tabs not in focus.
A note about what happens when the width of individual tabs above the panel content area is specified:
-
If the individual tab width is specified:
-
If the total of the tabs' widths is more than the width of the panel content area, the tab widths will be adjusted to equal the width of the panel content area.
-
If the total of the tabs' widths is less than the width of the panel content area, the balance of the area above the panel content area will be empty.
-
If individual tab width is not specified, the width of each tab is calculated so the total of the tabs' widths equals the width of the panel content area.
The width and height of the panel content area itself may also be specified.
The width of the panel content area is the only required field, as the width of the tabs above the content is calculated with what you specify. (If the tab panel width is not specified, 500 pixels is assumed.)
What to do with excess panel area content may also be specified:
-
Print it anyway. Content not fitting within the panel content area is printed anyway. The panel dimensions expand to encompass the content.
-
Hide the excess. Content not fitting within the panel content area is cropped.
-
Provide a scrollbar. When content does not fit within the panel content area, scrollbars are provided.
Tab Panel Content —
Valid HTML, CSS, and JavaScript is allowed in both tab content and panel content. Pretty much any content that can be published on a web page can also be published in a tab panel.
Some older browsers might incorrectly display certain form fields in a hidden panel superimposed on the panel currently being displayed. But that's the only restriction I'm aware of.
Using the Tab Panel Generated Code
When your tab panel has been generated, copy the code and paste it into your web page where you want the tab panel to be published.
It's really that simple. If you can visualize a tab panel and copy n' paste, you can do this.
Let your web site be even more elegant, professional, and considerate of your site visitors.
Will Bontrager
© Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
