Меню со «скользящей» линией

Особенность менюшек с эффектом "скользящей" линии заключается в том, что при наведении на любой пункт меню эта самая линия будет анимированно двигаться вслед за этим пунктом меню, за счет чего получается очень интересный эффект.

Не так давно мне потребовалось создать подобное меню на одном из проектов. В поисках решения я попал на сайт css-tricks.com, на котором предлагалось реализация этого меню.

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

Поэтому я решил его немного замодифицировать под свои нужды и в итоге у меня получилось то, что вы можете увидеть кликнуть по кнопке "Посмотреть демо".

А теперь давайте разберем по шагам, как эту менюшку вы можете реализовать.

Смотреть видеоурок

HTML

Основой нашего меню является обычный маркированный список. Для семантики, я обернул его еще в тег nav, но этого можно не делать.

Также если требуется выделить по умолчанию какой-то пункт меню, то для этого достаточно элементу li задать класс active.

<nav class="nav">
	<ul>
		<li><a href="#">Главная</a></li>
		<li class="active"><a href="#">Уроки</a></li>
		<li><a href="#">Предложить урок</a></li>
		<li><a href="#">Курсы</a></li>
		<li><a href="#">Услуги</a></li>
		<li><a href="#">Об авторе</a></li>
		<li><a href="#">Контакты</a></li>
	</ul>
</nav>

CSS

Теперь добавим немного CSS.

Те свойства, которые являются важными для работы, я прокомментировал, остальные же можно задавать уже по вашему усмотрению.

.nav ul {
	list-style: none; /* Убираем маркеры у нашего маркированного списка */
	position: relative; /* Задаем, чтобы у нас была возможность позиционировать нашу "скользящую" полоску внутри меню */
	text-align: center;
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
}
.nav ul li {
	display: inline-block; /* Выравниваем элементы меню в одну линию по горизонтали. Данное свойство можно заменить на float: left */
}
.nav ul li a {
	color: #ccc;
	display: block;
	padding: 8px 12px;
	text-decoration: none;
	text-transform: uppercase;
}
.nav ul li a:hover {
	color: #000;
}
.sliding-line {
	height: 2px; /* Задаем высоту нашей "скользящей" полоске */
	background: #6da047; /* Задаем цвет для "скользящей" полоски */
	position: absolute; /* Позиционируем полоску абсолютным образом */
	bottom: -2px; /* Смещаем ее вниз на 2 пикселя. Здесь, как правило, задается значение эквивалентное высоте полоски, но только со знаком минус */
	left: 0; 
}

jQuery

А вот и сам скрипт, который реализует эффект "скользящей" линии. Его вы также можете скопировать из дополнительных материалов.

$(document).ready(function(){

	var nav_wrap = $(".sliding-menu"),
		elem_width,
		elem_left_offset,
		elem_parent,
		slider_line;
	
	$(window).load(function(){

		nav_wrap.each(function(){
			$(this).append('<li class="sliding-line"></li>');

			var start_elem_width = 0;
			var start_elem_offset = 0;
			var active_elem = $(this).find(".active");

			if(active_elem.length){
				start_elem_width = active_elem.outerWidth();
				start_elem_offset = active_elem.position().left;
			} 

			$(this).find(".sliding-line").css({
				"width": start_elem_width + "px",
				"left": start_elem_offset + "px"
			})
			.data("width", start_elem_width)
			.data("left", start_elem_offset);
		});

	});

	nav_wrap.find("li a").hover(function(){

		elem_parent = $(this).parent();
		elem_width = elem_parent.outerWidth();
	    elem_left_offset = $(this).position().left;
	    slider_line = elem_parent.siblings(".sliding-line");
	    slider_line.stop().animate({
	    	"width": elem_width + "px",
	        "left": elem_left_offset + "px"
	    });

	}, function(){

	    slider_line.stop().animate({
	    	"width": slider_line.data("width") + "px",
	        "left": slider_line.data("left") + "px"
	    });
	      
	});

});

Вот и все, о чем я хотел рассказать в рамках текущего урока.

Теперь я думаю, что для вас не составит труда реализовать подобное меню у себя на сайте.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (4)

Николай 14 октября 2015 г. в 12:27

Здравствуйте, Александр.
Спасибо Вам за ваши уроки. Пересмотрел на одном дыхании все занятия по HTML и CSS. Сейчас могу верстать, изучаю дальше, очень нравится.
Вопрос: не планируете ли вы выпустить такие же подробные видео уроки по JS? Не хочется много пользоваться уже написанными кем то кодами, не хватает своих знаний, чтобы самому что нибудь написать и придумать. Вы очень грамотно объясняете, а в интернете мало кто может адекватно донести до слушателя информацию. Я имею ввиду не вводный курс по JS, а на реальной вёрстке, почему написал именно то и т.д. как делали в занятиях по HTML и CSS. Спасибо Вам, вы мой гуру)))

Ответить

Андрей 15 сентября 2015 г. в 15:30

Большое спасибо. Ваши уроки интересны и главное понятны для людей, которые хотят учиться. Интересует ооп php, занимаетесь ли Вы этой парадигмой программирования? Толкового материалла очень мало.

Ответить

Юра 10 сентября 2015 г. в 11:55

Очень полезное видео. Остался доволен после просмотра. Очень понятно и доходчиво объясняет автор. Так держать.

Ответить

Сергей 10 сентября 2015 г. в 09:11

Посмотрел Ваш урок, как всегда очень доступно и понятно. Очень хотелось бы посмотреть Ваш урок на тему адаптивной верстки, потому что более понятно никто не рассказывает. Спасибо.

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад