Октябрь 13, 2014 Запись была обновлена
Меню в виде временной шкалы
Мне очень нравятся оригинальные и необычные меню. Не просто обычное горизонтальное или вертикальное меню, а с какой-нибудь особенностью. И в этом уроке мы рассмотрим как создать горизонтально меню в виде временной шкалы, которое позволит однозначно выделить ваш сайт. А также если вы занимаетесь инфобизнесом, наверняка у вас есть продающая страница, которая очень длинная, тогда данное меню вам очень понравится, так как оно облегчает просмотр страницы пользователю.
Похожие уроки:
- Плавное перемещение по странице jQuery
- Адаптивное меню для сайта
- Круговая навигация с помощью CSS преобразований
- Выпадающее меню на CSS3
Приступим!
Пример можно увидеть здесь:
Посмотреть примерСкачать
HTML часть
Меню состоит из двух частей: элементов меню и временной шкалы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
А уже в свою очередь каждый контейнер, к которому мы перемещаемся по клику на элемент меню, состоит следующим образом:
1 2 3 4 5 6 7 8 9 10 | .... <div id="search" class="container blue"> <h1>Поиск</h1> <p>текст</p> </div> <div id="about" class="container green"> <h1>Об авторе</h1> <p>текст</p> </div> .... |
CSS часть
Стили для меню очень простые:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | .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 мы делаем плавную прокрутку, а также некоторые расчеты для правильного положения на временной шкале:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | (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); |
Вывод
Еще раз повторюсь: данное меню особенно подойдет тем кто занимается инфобизнесом, для более удобного перемещения по продающей странице.
Успехов!
Источник: www.webdesigncrowd.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)