Horizontal Anchor links

Horizontally centered alignment of current anchor link

by otinanaipali

HTML

<a href="#test1">test1</a>
<a href="#test2">test2</a>
<a href="#test3">test3</a>
<a href="#test4">test4</a>
<a href="#test5">test5</a>
<a href="#test6">test6</a>
<div>
    <ul>
        <li class="active"><a href="#test1">1</a><span id="test1"></span></li>
        <li><a href="#test2">2</a><span id="test2"></span></li>
        <li><a href="#test3">3</a><span id="test3"></span></li>
        <li><a href="#test4">4</a><span id="test4"></span></li>
        <li><a href="#test5">5</a><span id="test5"></span></li>
        <li><a href="#test6">6</a><span id="test6"></span></li>
    </ul>
</div>

CSS

div {
    height: 50px;
    overflow: hidden
}

ul {
    list-style: none;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
    font-size: 0;
    text-align: center;
    background: #efefef;
}

li {
    display: inline-block;
    padding: 0;
    margin: 0;
    font-size: 16px;
    width: 40%;
    height: 50px;
    position: relative;
    background: rgba(0, 0, 0, .25);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25), inset -1px 0 0 rgba(0, 0, 0, .25);
}

li:first-child {
    margin-left: 30%;
}

ul a {
    background: rgba(0, 0, 0, .25);
    display: block;
    line-height: 50px;
    border-left: 1px solid #0cf;
    border-right: 1px solid #0cf;
    height: 50px;
    color: #fff;
    text-decoration: none;
}

ul li.active a {
    color: #fff;
    background: rgba(255, 0, 0, .25);
}

ul a:hover {
    background: rgba(255, 0, 255, .25);
}

span {
    position: absolute;
    left: -75%;
    right: -75%;
    height: 5px;
    top: 0;
    background: #0f0;
}

JavaScript

$('a').click(function() {
    $('li').removeClass('active');
    var the_id = $(this).attr('href');
    $(the_id).parent('li').addClass('active');
});