<script type="text/javascript">

// explore nav animation
$(document).ready(function () {

    // set up explore nav animation
    $("#aniExplore li:eq(0)").css("left", "0px");
    $("#aniExplore li:eq(1)").css("left", "200px");
    $("#aniExplore li:eq(2)").css("left", "400px");
    $("#aniExplore li:eq(3)").css("left", "600px");
    $("#aniExplore li:eq(4)").css("left", "800px");
    $("#aniExplore li:eq(5)").css("left", "1000px");
    $("#aniExplore li:eq(6)").css("left", "1200px");
    $("#aniExplore li:eq(7)").css("left", "1400px");
    $("#aniExplore li:eq(8)").css("left", "1600px");
    $("#aniExplore li:eq(9)").css("left", "1800px");

    // moves nav left
        $("#navExploreLeftButton").click(function () {
            if ($("#aniExplore li").is(':animated')) {
                return false;
            }
            $("#aniExplore li").animate({ left: "-=200px" }, 200, CheckPositionLeft());
        });
    
    function CheckPositionLeft() {
        $("#aniExplore li").each(
                function () {
                    if ($(this).css("left") == "-200px") {
                        $(this).css("left", "1800px");
                    };
                    if ($(this).css("left") == "600px") {
                        FocusOn(this);
                    };
                    if ($(this).css("left") == "400px") {
                        FocusOff(this);
                    };
                }
            );
            };

            // moves nav right
            $("#navExploreRightButton").click(function () {
                if ($("#aniExplore li").is(':animated')) {
                    return false;
                }
                $("#aniExplore li").animate({ left: "+=200px" }, 200, CheckPositionRight());
            });

    function CheckPositionRight() {
        $("#aniExplore li").each(
                function () {
                    if ($(this).css("left") == "1800px") {
                        $(this).css("left", "-200px");
                    };
                    if ($(this).css("left") == "200px") {
                        FocusOn(this);
                    };
                    if ($(this).css("left") == "400px") {
                        FocusOff(this);
                    };
                }
            );
    };

    // increases text/image size on central item
    function FocusOn(item) {
        $(item).children("a").children("img").animate({ width: "125px", height: "125px", left: "37px", top: "0px" }, 100);
        $(item).children("a").children("span").animate({ fontSize: "12px" }, 200);
    }

    // decreases text/image size on central item
    function FocusOff(item) {
        $(item).children("a").children("img").animate({ width: "90px", height: "90px", left: "55px", top: "35px" }, 100);
        $(item).children("a").children("span").animate({ fontSize: "9px" }, 200);
    }

});

</script>

<div id="navExplore">
<ul id="aniExplore">
<li><img src="/images/pic-explore-support.gif" alt="Support" /><span>Support</span></li>
<li><img src="/images/pic-explore-wellbeing.gif" alt="Wellbeing" /><span>Wellbeing</span></li>
<li><img src="/images/pic-explore-keep-learning.gif" alt="Keep learning" /><span>Keep learning</span></li>
<li><img src="/images/pic-explore-support.gif" alt="Support" /><span>Support</span></li>
<li><img src="/images/pic-explore-wellbeing.gif" alt="Wellbeing" /><span>Wellbeing</span></li>
<li><img src="/images/pic-explore-keep-learning.gif" alt="Keep learning" /><span>Keep learning</span></li>
</ul>

<ul id="navExploreButtons">
<li id="navExploreLeftButton"><</li>
<li id="navExploreRightButton">></li>
</ul>
</div>

http://openbolton.co.uk/explore-your-life/

Animated custom navigation

navigation

jQuery