JQuery Plugin Project – FancyMe Alphabetical Tab Navigation

What can I say? I found this plugin-development to be a quite interesting hobby. Once I gave it a try, I couldn’t stop. And after making the tabbed navigation, I knew there was more I could do with it. So this next plugin was born.

alphabetplugin01

The alphabetically-ordered tab navigation is something I’m quite proud of.

The HTML structure needed is quite simple:

<div id="alphabet01">
    <span>Hugh Jackman</span>
    <span>Jennifer Lawrence</span>
    <span>Topher Grace</span>
    <span>Joseph Gordon-Levitt</span>
    <span>Anne Hathaway</span>
    <span>Jessica Biel</span>
    <span>Scarlet Johanson</span>
    ...and some more...
</div>

Ignore the fact that I’m using names of some of my favorite actors, you can use anything. The important detail to focus on here is that they are each inside a SPAN element, all of which are inside of the main DIV that will ultimately be the main container for our tabbed navigation.

The imports:

<link href="fancymealphabet.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="fancymealphabet.JQuery.js"></script>

This imports the CSS stylesheet that contains all of the color themes and basic styles for the plugin (with comments so you recognize everything in the code) and the main plugin javascript file, along with the jQuery import (which I chose to save locally, but there are other ways)

After this, you just need the basic function call to create an alphabetically ordered tabbed navigation with the default theme and default settings:

<script>
    $(function() {
        $('#alphabet01').fancymealphabet();
    });
</script>

Check out the demo for more information on how to tweak your tabbed navigation.

Happy coding!