menu-click

by Alexander Pankov

HTML

<ul class="type">
    <li class="active"><a title="Все" href=""><span class="dot">Все</span></a>

    </li>
    <li><a href="" title="Обувь"><span class="dot">Обувь</span></a>

    </li>
    <li><a href="" title="Аксесуары"><span class="dot">Аксесуары</span></a>

    </li>
    <li><a href="" title="Детские магазины"><span class="dot">Детские магазины</span></a>

    </li>
    <li><a href="" title="Подарки"><span class="dot">Подарки</span></a>

    </li>
    <li><a href="" title="Прочее"><span class="dot">Прочее</span></a>

    </li>
</ul>

CSS

.type li {
    display: inline-block;
    padding: 7px 12px;
    margin-right: 15px;
}
.type li a {
    font-size: 18px;
    display: inline-block;
    color: #71a1c4;
    text-align: center;
    /* padding-bottom: 2px; */
    text-decoration: none;
}
.type li a span {
    border-bottom: 1px solid #c1ddf1;
}
.type li.active {
    /* border: 2px solid #fdb913; */
    border-radius: 20px;
    padding-bottom: 1px;
}
.type li.active a {
    border: none;
    font-weight: bold;
    color: #b6b2a1;
}
.type li a::after {
    /*тут блок афтер нивидимый и мин.высотой, но шириной жирного текста*/
    border: none;
    padding: 0px;
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}
.type li.active span {
    border: none;
}
.type li.active {
    box-shadow: 0 0 0 2px #fdb913 inset;
}

JavaScript

$('.type li').click(function (event) {
    event.preventDefault();
    $(this).closest('ul').find('li').each(function (index, el) {
        $(el).removeClass('active')
    });
    $(this).addClass('active')
});
$(window).load(function () {
    $('.type li').each(function () {
        if (!$(this).hasClass('active')) {
            var w = $(this).toggleClass('active').innerWidth();
            $(this).toggleClass('active').width(w);
        }
    });
});