Анимированный переход между пунктами меню

Обратите внимание:

Во всех примерах используется шрифт Roboto Condensed, который нужно будет заменить на шрифт вашего сайта.

Данные меню не имеют мобильной версии.

Пример 1:

альфа
бета
гамма
дельта
эпсилон

<ul class="navmenu_1">
    <li><a href="#link">альфа</a></li>
    <li><a href="#link">бета </a></li>
    <li><a href="#link">гамма</a></li>
    <li><a href="#link">дельта</a></li>
    <li><a href="#link">эпсилон</a></li>
    <li class="slide1"></li>
    <li class="slide2"></li>
</ul>

<li><a href="#link">альфа</a></li>

<li><a href="#link">гамма</a></li>

<li><a href="#link">дельта</a></li>

<li><a href="#link">эпсилон</a></li>

</ul>

.navmenu_1 {
	position: relative;
	display: flex;
	list-style: none;
	padding: 10px 20px;
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	margin: 20px 0 40px 0;
}
.navmenu_1 a {
	position: relative;
	padding: 10px 34px;
	font-size: 20px;
	border: none;
	outline: none;
	color: #337AB7;
	display: inline-block;
	text-decoration: none;
	text-shadow: 1px 1px 0 #BFE2FF;
	z-index: 3;
}
.navmenu_1 .slide1,
.navmenu_1 .slide2 {
	position: absolute;
	display: inline-block;
	box-shadow: 4px 3px 0 #337AB7;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
	transform: skew(-20deg);
	bottom: 0px;
	height: 100%;
}
.navmenu_1 .slide1 {
	background-color: #BFE2FF;
	border: 1px solid transparent;
	z-index: 2;
}
.navmenu_1 .slide2 {
	opacity: 0;
	background-color: transparent;
	border: 1px solid #BFE2FF;
	z-index: 1;
}

.navmenu_1 {

position: relative;

display: flex;

list-style: none;

padding: 10px 20px;

font-family: 'Roboto Condensed', sans-serif;

text-transform: uppercase;

margin: 20px 0 40px 0;

}

.navmenu_1 a {

position: relative;

padding: 10px 34px;

font-size: 20px;

border: none;

outline: none;

color: #337AB7;

display: inline-block;

text-decoration: none;

text-shadow: 1px 1px 0 #BFE2FF;

z-index: 3;

}

.navmenu_1 .slide1,

.navmenu_1 .slide2 {

position: absolute;

display: inline-block;

box-shadow: 4px 3px 0 #337AB7;

transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);

transform: skew(-20deg);

bottom: 0px;

height: 100%;

}

.navmenu_1 .slide1 {

background-color: #BFE2FF;

border: 1px solid transparent;

z-index: 2;

}

.navmenu_1 .slide2 {

opacity: 0;

background-color: transparent;

border: 1px solid #BFE2FF;

z-index: 1;

}

$(".navmenu_1 a").on("click", function () {
    let position = $(this).parent().position();
    let width = $(this).parent().width();
    $(".navmenu_1 .slide1").css({ opacity: 1, left: +position.left, width: width });
});
$(".navmenu_1 a").on("mouseover", function () {
    let position = $(this).parent().position();
    let width = $(this).parent().width();
    $(".navmenu_1 .slide2").css({
        opacity: 1,
        left: +position.left,
        width: width
    });
});
$(".navmenu_1 a").on("mouseout", function () {
    $(".navmenu_1 .slide2").css({ opacity: 0 });
});
let currentWidth = $(".navmenu_1").find("li:nth-of-type(1) a").parent("li").width();
let current = $(".navmenu_1 li:nth-of-type(1) a").position();
$(".navmenu_1 .slide1").css({ left: +current.left, width: currentWidth });

$(".navmenu_1 a").on("click", function () {

let position = $(this).parent().position();

let width = $(this).parent().width();

$(".navmenu_1 .slide1").css({ opacity: 1, left: +position.left, width: width });

});

$(".navmenu_1 a").on("mouseover", function () {

let position = $(this).parent().position();

let width = $(this).parent().width();

$(".navmenu_1 .slide2").css({

opacity: 1,

left: +position.left,

width: width

});

$(".navmenu_1 a").on("mouseout", function () {

$(".navmenu_1 .slide2").css({ opacity: 0 });

});

let currentWidth = $(".navmenu_1").find("li:nth-of-type(1) a").parent("li").width();

let current = $(".navmenu_1 li:nth-of-type(1) a").position();

$(".navmenu_1 .slide1").css({ left: +current.left, width: currentWidth });

<ul class="navmenu_2">
	<li class="slide1"></li>
	<li class="slide2"></li>
	<li><a class="active" href="#link">альфа</a></li>
	<li><a href="#link">бета </a></li>
	<li><a href="#link">гамма</a></li>
	<li><a href="#link">дельта</a></li>
	<li><a href="#link">эпсилон</a></li>
</ul>

<li><a class="active" href="#link">альфа</a></li>

<li><a href="#link">гамма</a></li>

<li><a href="#link">дельта</a></li>

<li><a href="#link">эпсилон</a></li>

</ul>

.navmenu_2 {
    display: inline-flex;
	background: #FFF;
	position: relative;
	list-style: none;
	padding: 10px 20px;
	justify-content: center;
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	margin: 20px 0 40px 0; 
    border-radius: 40px;
	box-shadow: 10px 20px 30px #00000044;
	border: 4px solid #BFE2FF;
}
.navmenu_2 li a {
	position: relative;
	padding: 10px 34px;
	font-size: 20px;
	line-height: 1.4;
	border: none;
	color: #337AB7;
	display: inline-block;
	text-decoration: none;
	z-index: 3;
}
.navmenu_2 .slide1,
.navmenu_2 .slide2 {
	position: absolute;
	display: inline-block;
	height: 48px;
	border-radius:30px;
	transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1.05);
}
.navmenu_2 .slide1 {
	background-color: #BFE2FF;
	z-index: 2;
}
.navmenu_2 .slide2 {
	opacity: 0;
	background: #fff;
	border: 1px solid #337AB7;
	z-index: 1;
}
.squeeze {
	transition: all 1.5s;
	transform: scale(0.9);
}

.navmenu_2 {

display: inline-flex;

background: #FFF;

position: relative;

list-style: none;

padding: 10px 20px;

justify-content: center;

font-family: 'Roboto Condensed', sans-serif;

text-transform: uppercase;

margin: 20px 0 40px 0;

border-radius: 40px;

box-shadow: 10px 20px 30px #00000044;

border: 4px solid #BFE2FF;

}

.navmenu_2 li a {

position: relative;

padding: 10px 34px;

font-size: 20px;

line-height: 1.4;

border: none;

color: #337AB7;

display: inline-block;

text-decoration: none;

z-index: 3;

}

.navmenu_2 .slide1,

.navmenu_2 .slide2 {

position: absolute;

display: inline-block;

height: 48px;

border-radius:30px;

transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1.05);

}

.navmenu_2 .slide1 {

background-color: #BFE2FF;

z-index: 2;

}

.navmenu_2 .slide2 {

opacity: 0;

background: #fff;

border: 1px solid #337AB7;

z-index: 1;

}

.squeeze {

transition: all 1.5s;

transform: scale(0.9);

}

$(".navmenu_2 a").on("click", function() {
    let position = $(this)
	.parent()
	.position();
    let width = $(this)
	.parent()
	.width();
    $(".navmenu_2 .slide1").css({ opacity: 1, left: +position.left, width: width });
});
$(".navmenu_2 a").on("mouseover", function() {
    let position = $(this)
	.parent()
	.position();
    let width = $(this)
	.parent()
	.width();
    $(".navmenu_2 .slide2")
	.css({
		opacity: 1,
		left: +position.left,
		width: width
	})
	.addClass("squeeze");
});
$(".navmenu_2 a").on("mouseout", function() {
    $(".navmenu_2 .slide2")
	.css({ opacity: 0 })
	.removeClass("squeeze");
});
let currentWidth = $(".navmenu_2")
.find(".active")
.parent("li")
.width();
let current = $(".navmenu_2 .active").position();
$(".navmenu_2 .slide1").css({ left: +current.left, width: currentWidth });

$(".navmenu_2 a").on("click", function() {

let position = $(this)

.parent()

.position();

let width = $(this)

.parent()

.width();

$(".navmenu_2 .slide1").css({ opacity: 1, left: +position.left, width: width });

});

$(".navmenu_2 a").on("mouseover", function() {

let position = $(this)

.parent()

.position();

let width = $(this)

.parent()

.width();

$(".navmenu_2 .slide2")

.css({

opacity: 1,

left: +position.left,

width: width

})

.addClass("squeeze");

});

$(".navmenu_2 a").on("mouseout", function() {

$(".navmenu_2 .slide2")

.css({ opacity: 0 })

.removeClass("squeeze");

});

let currentWidth = $(".navmenu_2")

.find(".active")

.parent("li")

.width();

let current = $(".navmenu_2 .active").position();

$(".navmenu_2 .slide1").css({ left: +current.left, width: currentWidth });

Пример 3:

<nav class="navmenu_3">
	<ul>
		<li><a class="active" href="#link">альфа</a></li>
		<li><a href="#link">бета </a></li>
		<li><a href="#link">гамма</a></li>
		<li><a href="#link">дельта</a></li>
		<li><a href="#link">эпсилон</a></li>	
	</ul>
</nav>

<ul>

<li><a class="active" href="#link">альфа</a></li>

<li><a href="#link">гамма</a></li>

<li><a href="#link">дельта</a></li>

<li><a href="#link">эпсилон</a></li>

</ul>

</nav>

.navmenu_3 {
    position: relative;
    padding: 10px 20px;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    margin: 20px 0 40px 0; 
    display: flex;
    justify-content: center; 
}
.navmenu_3 .line {
	height: 2px;
	position: absolute;
	bottom: 0;
	margin: 10px 0 0 0;
	background: #337AB7;
}
.navmenu_3 ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
}
.navmenu_3 ul li {
	margin: 0 40px 0 0;
	transition: all 0.4s ease;
}
.navmenu_3 ul li:last-child {
	margin: 0;
}
.navmenu_3 ul li a {
	color: #337AB7;
	display: block;
	font-size: 20px;
}
.navmenu_3 ul li:hover a,
.navmenu_3 ul li.active a {
    color: #000;
}

.navmenu_3 {

position: relative;

padding: 10px 20px;

font-family: 'Roboto Condensed', sans-serif;

text-transform: uppercase;

margin: 20px 0 40px 0;

display: flex;

justify-content: center;

}

.navmenu_3 .line {

height: 2px;

position: absolute;

bottom: 0;

margin: 10px 0 0 0;

background: #337AB7;

}

.navmenu_3 ul {

padding: 0;

margin: 0;

list-style: none;

display: flex;

}

.navmenu_3 ul li {

margin: 0 40px 0 0;

transition: all 0.4s ease;

}

.navmenu_3 ul li:last-child {

margin: 0;

}

.navmenu_3 ul li a {

color: #337AB7;

display: block;

font-size: 20px;

}

.navmenu_3 ul li:hover a,

.navmenu_3 ul li.active a {

color: #000;

}

let nav = $('.navmenu_3');
let line = $('<div />').addClass('line');
line.appendTo(nav);
let active = nav.find('.active');
let pos = 0;
let wid = 0;
if(active.length) {
	pos = active.position().left;
	wid = active.width();
	line.css({
		left: pos,
		width: wid
	});
}
nav.find('ul li a').click(function(e) {
	e.preventDefault();
	if(!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {
		nav.addClass('animate');
		let _this = $(this);
		nav.find('ul li').removeClass('active');
		let position = _this.parent().position();
		let width = _this.parent().width();
		if(position.left >= pos) {
			line.animate({
				width: ((position.left - pos) + width)
				}, 300, function() {
				line.animate({
					width: width,
					left: position.left
					}, 150, function() {
					nav.removeClass('animate');
				});
				_this.parent().addClass('active');
			});
			} else {
			line.animate({
				left: position.left,
				width: ((pos - position.left) + wid)
				}, 300, function() {
				line.animate({
					width: width
					}, 150, function() {
					nav.removeClass('animate');
				});
				_this.parent().addClass('active');
			});
		}
		pos = position.left;
		wid = width;
	}
});

let nav = $('.navmenu_3');

let line = $('<div />').addClass('line');

line.appendTo(nav);

let active = nav.find('.active');

let pos = 0;

let wid = 0;

if(active.length) {

pos = active.position().left;

wid = active.width();

line.css({

left: pos,

width: wid

});

}

nav.find('ul li a').click(function(e) {

e.preventDefault();

if(!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {

nav.addClass('animate');

let _this = $(this);

nav.find('ul li').removeClass('active');

let position = _this.parent().position();

let width = _this.parent().width();

if(position.left >= pos) {

line.animate({

width: ((position.left - pos) + width)

}, 300, function() {

line.animate({

width: width,

left: position.left

}, 150, function() {

nav.removeClass('animate');

});

_this.parent().addClass('active');

});

} else {

line.animate({

left: position.left,

width: ((pos - position.left) + wid)

}, 300, function() {

line.animate({

width: width

}, 150, function() {

nav.removeClass('animate');

});

_this.parent().addClass('active');

});

}

pos = position.left;

wid = width;

}

});

Найдено на codepen.io у пользователей Eric Porter и Aaron Iker

Пример 1:

Пример 2:

Пример 3:

Смотрите также:

Выдвижная боковая панель на CSS

Навигационное меню для лендинга

Оформление хлебных крошек

Добавить комментарий:

Разделы:

Фоновая анимация на JS

Простые решения: