Меню в вигляді тимчасової шкали

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

Схожі уроки:

Плавне переміщення по сторінці jQuery
Адаптивне меню для сайту
Кругова навігація за допомогою CSS перетворень
Меню, що випадає на CSS3

Приступимо!

Приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

Меню складається з двох частин: елементів меню і тимчасової шкали:

123456789101112131415

lt;div class="Menu"gt;lt;div class="Slider"gt;lt;ulgt;lt;li class="Category active"gt; lt;a href="#home"gt; ГОЛОВНАlt;/agt; lt;/ligt;lt;li class="Category"gt; lt;a href="#search"gt; ПОШУКlt;/agt; lt;/ligt;lt;li class="Category"gt; lt;a href="#about"gt; ПРО АВТОРАlt;/agt; lt;/ligt;lt;li class="Category"gt; lt;a href="#contact"gt; КОНТАКТИlt;/agt; lt;/ligt;lt;/ulgt;lt;div class="Bar"gt;lt;div class="Before"gt; lt;/divgt;lt;a class="Knob"gt; lt;/agt;lt;div class="After"gt; lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;

Відео: Створення проекти в MS Project 2013. Шаблони, тимчасова шкала

А вже в свою чергу кожен контейнер, до якого ми подорожуємо по кліку на елемент меню, складається наступним чином:

12345678910

....lt;div id="Search" class="Container blue"gt;lt;h1gt; Пошукlt;/h1gt;lt;pgt; текстlt;/pgt;lt;/divgt;lt;div id="About" class="Container green"gt;lt;h1gt; Про автораlt;/h1gt;lt;pgt; текстlt;/pgt;lt;/divgt; ....

CSS частина

Стилі для меню дуже прості:

Відео: Тимчасова шкала у Adobe Flash CS4 (1/42)

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172

.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 ми робимо плавного прокручування, а також деякі розрахунки для правильного положення на часовій шкалі:

12345678910111213141516171819202122232425262728293031323334353637383940

(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 gt; c_top)  (top lt; 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)-