Меню в виде временной шкалы

Мне очень нравятся оригинальные и необычные меню. Не просто обычное горизонтальное или вертикальное меню, а с какой-нибудь особенностью. И в этом уроке мы рассмотрим как создать горизонтально меню в виде временной шкалы, которое позволит однозначно выделить ваш сайт. А также если вы занимаетесь инфобизнесом, наверняка у вас есть продающая страница, которая очень длинная, тогда данное меню вам очень понравится, так как оно облегчает просмотр страницы пользователю.

Похожие уроки:

Приступим!

Пример можно увидеть здесь:

Посмотреть пример Скачать

HTML часть

Меню состоит из двух частей: элементов меню и временной шкалы:

<div class="menu">
    <div class="slider">
        <ul>
            <li class="category active"><a href="#home">ГЛАВНАЯ</a></li>
            <li class="category"><a href="#search">ПОИСК</a></li>
            <li class="category"><a href="#about">ОБ АВТОРЕ</a></li>
            <li class="category"><a href="#contact">КОНТАКТЫ</a></li>
        </ul>
        <div class="bar">
            <div class="before"></div>
            <a class="knob"></a>
            <div class="after"></div>
        </div>
    </div>
</div>

А уже в свою очередь каждый контейнер, к которому мы перемещаемся по клику на элемент меню, состоит следующим образом:

....
<div id="search" class="container blue">
    <h1>Поиск</h1>
    <p>текст</p>
</div>
<div id="about" class="container green">
    <h1>Об авторе</h1>
    <p>текст</p>
</div>
....

CSS часть

Стили для меню очень простые:

.menu {
    width: 100%;
    position: fixed;
    height: 100px;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: 2;
}
 
.menu .slider {
    position: relative;
    left: 10%;
    width: 80%;
    text-align: center;
}
 
.menu .slider .bar, .menu .slider .bar .before {
    height: 20px;
    transition: .5s; 
    -webkit-transition: .5s; 
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
 
.menu .slider .bar {
    position: relative;
    left: 3px;
    width: 100%;
    background-color: #777;
}
 
.menu .slider .bar .before {
    width: 100px;
    float: left;
    position: relative;
    left: -3px;
}
 
.menu .slider .bar a.knob { 
    position: absolute;
    top: -5px;
    left: 0;
    margin: 0;
    display: block;
    width: 30px;
    height: 30px;
    background-color: #ccc;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    transition: .5s; 
    -webkit-transition: .5s; 
}
 
.menu ul { 
    height: 100%; 
    display: inline-block;
    margin: 20px 0 15px 0;
}
.menu ul li {
    margin: 0 40px;
    font-size: 12px;
    font-weight: bold;
    float: left;
}
 
.menu ul li a { 
    color: #444; 
    margin: 0; 
}

jQuery часть

С помощью jQuery мы делаем плавную прокрутку, а также некоторые расчеты для правильного положения на временной шкале:

(function($){
    $(function(){
        (function( $ ){
            $.fn.slideToPos = function() {
                var left = $(this).position().left + ($(this).width() / 2) - ($(".menu a.knob").width() / 2) - 2;
                $(".menu a.knob").css("left", left);
                var before = $(this).parent().parent().parent().children(".bar").first().children(".before").first();
                before.css("width", left + 20).css("backgroundColor", $($(this).attr("href")).css("backgroundColor"));
                return this;
            }; 
        })( jQuery );
 
        $(".menu ul li.active a").slideToPos();     
        $(".menu ul li a").click(function(e) {
            e.preventDefault();
            $(this).slideToPos();
            $('html, body').animate({ scrollTop: $(this.hash).offset().top }, 400);
        });
 
        $(window).scroll(function() {
            var top = $(window).scrollTop() + 100;
            $(".container").each(function() {
                var c_top = $(this).offset().top;
                var c_bot = c_top + $(this).height();
                var hash = $(this).attr("id");
                var li_tag = $('a[href$="' + hash + '"]').parent();
                if ((top > c_top) && (top < c_bot)) {
		    if (li_tag.hasClass("active")) {
                        return false;
                    }
                    else {
                        li_tag.siblings().andSelf().removeClass("active");
                        li_tag.addClass("active");
                        $(".menu ul li.active a").slideToPos();  
                    }
                }
            });
        });
    });
})(jQuery);