Animated Mini Tabs ~ Navigation ~ Tested in IE6.0, Netscape8.1, Opera8.54, Firefox1.5.0.3 and AOL Explorer1.2

A sleek animation effect using tabs for a slide navigation bar. Degrades very nicely when JavaScript is turned-off.

We have tested the code in IE6.0, Firefox1.5.0.3, Opera8.54, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

D epending on your knowledge of HTML and javascripts, this is an easy three (3) part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. It also makes use of an external .js script you need to save and upload into your directory.

Step One is to copy/paste, save as (miniTab.js) and upload part of the code that will be used for the external .js file. There are "No" reconfigurations to be made in this section of code

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

Step Two Once you have completed "Step One", now you need to paste a snipplet of code into the <HEAD> section of your document to call the external.js file you have uploaded into your directory.

For your Information: If you are not sure on howto change the path of the above file you have uploaded as an external .js file, it is fully explained [ Here ]

Step Three Next is to paste another part of code into the <HEAD> section of your document. This part being the CSS style sheet that controls the colors of the effect. On the site you get the code, the direction for this section is

T he above section (Step Three) is all well and good if you have a CSS section defined within your document. If not, this is not a problem. You just need to add an opening and closing style tag around this portion of code for it to work. See below on where and howto

Place CSS Section Of Code Here

</style>

N otice all we did was to complete the code so it would function and you would not see a bunch of jibberish type code appearing on the page and wonder why.

CSS <HEAD> Section Reconfigurations

#miniflex {
width: 100%;
float: left;
font-size: small; /* could be specified at a higher level */
margin: 0;
padding: 0 10px 0 10px;
*border-bottom: 1px solid #696;*
position:relative;
z-index:2;
}

Notice the font-size: small;. You can change this by replacing the word "small" with numbers. Experiment with the different numbers until it works for your site.

Notice the portion of code surrounded by the *.
This section of code designates the line under the effect. If you do not want the line, just remove that line of code.

#miniflex li {
float: left;
margin: 0;
padding: 0;
display: inline;
list-style: none;
position:relative;
}

#miniflex a:link, #miniflex a:visited {
float: left;
font-size: 85%;
line-height: 20px;
font-weight: bold;
margin: 0 10px 0 10px;
text-decoration: none;
color: #9c9;
}

#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
border-bottom: 4px solid #696;
padding-bottom: 2px;
color: #696;
}

#animated-tab {
position: absolute;
z-index: 1;
font-size: 85%;
line-height: 20px;
padding-bottom: 2px;
border-bottom: 4px solid #696;
}

J ust experiment with the colors until it fits your site. Also notice that all the colors are given with a three (3) digit HEX code instead of the six (6) digit code. You can use either. If you would like a color chart that has the three (3) digit HEX code, grab the below link:
[ Three (3) Digit Hex Codes ]

Step Four Now for the final part that are the links and visible effect itself. This section goes anywhere in the <BODY> section you want this effect to be seen.

<ul id="miniflex">
<li><a href="URL Goes Here" title="?">Link Name Here</a></li>

<li><a href="URL Goes Here" title="?">Link Name Here</a></li>

<li><a href="URL Goes Here" title="?">Link Name Here</a></li>

<li><a class="active" href="URL Goes Here" title="?">Link Name Here</a></li>

<li><a href="URL Goes Here" title="?">Link Name Here</a></li>
</ul>

T he above is self-explanatory. If you want to add more links, just follow the pattern. Just be sure to enter each link prior to the closing </ul>
Remember: If you add too many links, this effect will cause a horizontal scroll bar to your page. So keep that in mind as you think of adding more links.

T he things we will cover in detail on the above are the title="?", the target="_blank" (Not included in default) attributes, changing a link into a mailto: attribute and class="active"

title="?"
This in a text link is the same as an "alt" tag with an image. Upon mouseover it will give you a little description. Just replace the "?" with your description.
[ Place Cursor Here ]
mailto: Default Without Attribute
<li><a href="URL Goes Here" title="?">Link Name Here</a></li>

mailto: Reconfigured With Attribute
<li><a href="mailto:Your Email Address Here" title="?">Send Email</a></li>
Notice all we did was to add the attribute of mailto: and then just insert your email address. We also removed the attribute of target="_blank" because your default email will automatically open in a new window.
target="_blank"
If you add this attribute into the "URL" it will make the link open in a new window as opposed to opening in the same window.
See below on where and howto add the target="_blank" attribute into the URL

<ul id="miniflex">
<li><a href="URL Goes Here"target="_blank" title="?">Link Name Here</a></li>

<li><a href="URL Goes Here"target="_blank" title="?">Link Name Here</a></li>
class="active"
What this does is when the page opens, whichever link you have this associated with will appear with that link selected and underlined. Notice in the below graphic that we have the class="active" attribute associated with Link #4

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]