All animations always requires
the latest version of the plugin.
Tab Menu 1
Tab Menu 2
Tab Menu 3
Your HTML here.
- Box 2
- Box 2
To add additional tabs, copy one tab menu container and one tab box container and replace the numbers at the end with the next number or a word. That’s it.
e.g.
New code #1
<div id="twiz-htabm-4" class="twiz_htabm">New Menu</div>
New code #2
<div id="twiz-htab-box-4" class="twiz_htab_box">Your HTML here.</div>
Customize the style to fit your needs. You can also easily switch the OnClick for OnMouseEnter.
+++
Note:
This example can be used once per web page. But you can duplicate this animation and modify the code by adding new prefixes to some id and by adding new prefixes to some class name. You will need to modify all the code accordingly.
<style type="text/css">
#twiz-htab-wrapper {
min-height: 185px;
display: block;
}
.twiz_htabm {
width: auto;
min-height: 21px;
border: 1px solid #000000;
border-bottom: 0px;
display: block;
padding: 10px;
float: left;
}
.twiz_htabm:hover {
cursor: pointer;
background-color: #000000 !important;
color: #ffffff !important;
}
.twiz_htabm_selected {
background-color: #000000;
color: #ffffff;
}
.twiz_htab_box {
min-width: 700px;
min-height: 110px;
background-color: #ebebeb;
border: 1px solid #000000;
padding: 15px;
display: none;
}
.twiz_htab_clear {
height: 0px;
clear: both;
}
</style>
<div class="twiz_htab_clear"></div>
<div id="twiz-htab-wrapper">
<div id="twiz-htabm-1" class="twiz_htabm">Tab Menu 1</div>
<div id="twiz-htabm-2" class="twiz_htabm">Tab Menu 2</div>
<div id="twiz-htabm-3" class="twiz_htabm">Tab Menu 3</div>
<!-- Paste new code #1 here -->
<div class="twiz_htab_clear"></div>
<div id="twiz-htab-box-1" class="twiz_htab_box">
Your HTML here.
<ul><li>Box 1</li></ul>
</div>
<div id="twiz-htab-box-2" class="twiz_htab_box">
Your HTML here.
<ol><li>Box 2</li><li>Box 2</li></ol>
</div>
<div id="twiz-htab-box-3" class="twiz_htab_box">
Your HTML here.
<ul><li>Box 3</li><li>Box 3</li><li>Box 3</li></ul>
</div>
<!-- Paste new code #2 here -->
</div>
<div class="twiz_htab_clear"></div>
Import the twiz file under a new section. (Right-click, Save Target As/Save Link As)
free-simple-horizontal-tab-menu.twiz 
Free Simple Horizontal Tab Menu
