JQuery Plugin Project – FancyMe Tab Navigation

Continuing with the plugin project, I bring to you a simple tab navigation. The result is as follows.

tabplugin01

The previous result can be achieved through a very simple HTML structure, like the one shown bellow

<div id="mytabs">
	<ul>
    	<li class="current">Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
        <li>Tab 4</li>
    </ul>
    <div>
        <p>..Some content..</p>
    </div>
    <div>
        <p>..Some content..</p>
    </div>
    <div>
        <p>..Some content..</p>
    </div>
    <div>
        <p>..Some content..</p>
    </div>
</div>

Notice that we have the same number of LI elements and DIV elements, and that the LI element standing for the active tab has the class CURRENT.

The project comes with a predetermined CSS file that has multiple customizable color themes that can be changed through the main function call. The necessary imports are the following:

<link href="../fancymetabs.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../fancymetabs.JQuery.js"></script>

And the function call, also inside the HEAD of your page

<script>
    $(function() {
        $('#mytabs').fancymetabs();
    });
</script>

And that’s it! This brings the tabbed navigation with its default values. More customizing information can be found in the demo.