Letter-based Navigation using jQuery

Posted by | October 21, 2012 | JavaScript, Web Development | 6 Comments


Letter Based Navigation

How to create letter based navigation using Javascript and the jQuery framework which is used for manipulating HTML DOM Elements. We are going to build a letter-based navigation to filter the content of a table and a list. When clicking one of the letters, we will filters the list/table to show only the items in the list/table that start with that letter.
After adding creating the HTML structure, will add some basic css style and apply css3 transition effects to animate mouse hover on table row and hovering over a letter.


Below the basic HTML structure.

<!doctype html>

Letter-based Navigation using jQuery
    	<link href="assets/css/styles.css" rel="stylesheet" /></pre>
<div class="wrapper">
<h1>Letter Based Navigation: Countries of the World</h1>
<div class="alphabet">
            <a class="first" href="#">A</a>
            <a href="#">B</a>
            <a href="#">C</a>
            <a href="#">D</a>
            <a href="#">E</a>
            <a href="#">F</a>
            <a href="#">G</a>
            <a href="#">H</a>
            <a href="#">I</a>
            <a href="#">J</a>
            <a href="#">K</a>
            <a href="#">L</a>
            <a href="#">M</a>
            <a href="#">N</a>
            <a href="#">O</a>
            <a href="#">P</a>
            <a href="#">Q</a>
            <a href="#">R</a>
            <a href="#">S</a>
            <a href="#">T</a>
            <a href="#">U</a>
            <a href="#">V</a>
            <a href="#">W</a>
            <a href="#">X</a>
            <a href="#">Y</a>
            <a class="last" href="#">Z</a></div>
<div id="conutries">
<table id="countries-table">
                           Country Name</th>
                            Country Code</th>
<td>Aland Islands</td>
    <!-- Include JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="assets/js/script.js"></script>


The content of our table and letters are in the wrapper element. We add the basic css style and give it a slick look. We also give it a width and center it with the margin declaration.

    width: 680px;
    margin: 0 auto;

    .wrapper h1
        color: #555;
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.15) 0px 0px 1px;
        letter-spacing: 2px;

    width: 650px;
    background: white;

    margin: 0 0 10px;
    overflow: hidden;

    .alphabet a, #countries-table tr
        transition: background-color 0.3s ease-in-out;
        -moz-transition: background-color 0.3s ease-in-out;
        -webkit-transition: background-color 0.3s ease-in-out;

    .alphabet a
        width: 20px;
        float: left;
        color: #333;
        cursor: pointer;
        height: 20px;
        border: 1px solid #CCC;
        display: block;
        padding: 2px 2px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
        border-right: none;
        text-decoration: none;
        background-color: #F1F1F1;

        .alphabet a.first
            border-radius: 3px 0 0 3px;

        .alphabet a.last
            border-right: 1px solid silver;
            border-radius: 0 3px 3px 0;

        .alphabet a:hover,
        .alphabet a.active
            background: #FBF8E9;
            font-weight: bold;

The jQuery Code

We are using jQuery methods for manipulating event listeners when DOM is ready and on li click event.

$(function () {
    var _alphabets = $('.alphabet > a');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function () {
        var _letter = $(this), _text = $(this).text(), _count = 0;


        _contentRows.each(function (i) {
            var _cellText = $(this).children('td').eq(0).text();
            if (RegExp('^' + _text).test(_cellText)) {
                _count += 1;

We have created our letter based navigation using jQuery. We are not going to get into the details of jQuery. Note: the version used in this article is jQuery v1.8.2. It will also work with older versions of jQuery.

Delta Airlines brings the sildenafilclub.com water-treatment like a towards the skin within the region to stay the machine.


About Farid

Creative web developer/designer, big fan of HTML5, CSS3 and client-side development. Software developer at Allegra Strategies London.

  • Hq

    Thank you, this is a great article. Love the design.

  • Wal

    Awesome it’s reallly nice. thank you very much!

  • http://www.faridesign.net/ Farid Hayati

    Your welcome

  • Gaurav Mittal

    Hi, nice article, But how to add “All” link. If i need to view all listing ???

  • Andre Flatwhiteweb

    Hi mate, thanks for this, any idea how can we make this works in IE7+IE8?

  • alexander

    Hello, Farid.

    Does your script work with cyrillic letters ?