Анимированная подсветка пунктов меню на CSS

К сожалению на данный момент CSS-функция anchor() поддерживается не всеми браузерами, но со временем эта проблема решится. Подробнее о ее возможностях, синтаксисе и значениях можно прочитать на сайте developer.mozilla.org

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

Пример:

HTML:

<div class="nav-menu">
	<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>
		<li><a href="#link">Контакты</a></li>
	</ul>
</div>

<ul>

<li><a href="#link">Главная</a></li>

<li><a href="#link">Услуги</a></li>

<li><a href="#link">Контакты</a></li>

</ul>

</div>

CSS:

.nav-menu {
	width: fit-content;
	padding: 12px;
	border-radius: 8px;
	position: relative;
	margin: 20px auto;
	background: #337AB7;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1);
}
.nav-menu:before,
.nav-menu:after {
	background: #BFE2FF;
	content: "";
	border-radius: 8px;
	position-anchor: --menu;
	position: absolute;
	top: anchor(bottom);
	bottom: calc(anchor(bottom) - 4px);
	left: anchor(left);
	right: anchor(right);  
	transition: 0.5s;
	transition-timing-function: linear(0, 0.008 1.1%, 0.031 2.2%, 0.129 4.8%, 0.257 7.2%, 0.671 14.2%, 0.789 16.5%, 0.881 18.6%, 0.957 20.7%, 1.019 22.9%, 1.063 25.1%, 1.094 27.4%, 1.114 30.7%, 1.112 34.5%, 1.018 49.9%, 0.99 59.1%, 1);
	z-index: 1;
}
.nav-menu:after {
	top: calc(anchor(top) - 4px);
	bottom: anchor(top);
}
.nav-menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	anchor-name: --menu;
	justify-content: center;
	z-index: 2;
}
.nav-menu a {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	color: #fff;
	transition: 0.3s;
	font-size: 18px;
	font-weight: bold;
}
.nav-menu a:hover {
	position: relative;
	display: block;
	anchor-name: --menu;
	color: #337AB7;
}
.nav-menu:has(a:hover):before,
.nav-menu:has(a:hover):after {
	top: anchor(top);
	left: anchor(left);
	right: anchor(right);
	bottom: anchor(bottom);
}

@supports not (anchor-name: --menu) {
	.nav-menu a:hover {
		color: #BFE2FF;
	}
}

.nav-menu {

width: fit-content;

padding: 12px;

border-radius: 8px;

position: relative;

margin: 20px auto;

background: #337AB7;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1);

}

.nav-menu:before,

.nav-menu:after {

background: #BFE2FF;

content: "";

border-radius: 8px;

position-anchor: --menu;

position: absolute;

top: anchor(bottom);

bottom: calc(anchor(bottom) - 4px);

left: anchor(left);

right: anchor(right);

transition: 0.5s;

transition-timing-function: linear(0, 0.008 1.1%, 0.031 2.2%, 0.129 4.8%, 0.257 7.2%, 0.671 14.2%, 0.789 16.5%, 0.881 18.6%, 0.957 20.7%, 1.019 22.9%, 1.063 25.1%, 1.094 27.4%, 1.114 30.7%, 1.112 34.5%, 1.018 49.9%, 0.99 59.1%, 1);

z-index: 1;

}

.nav-menu:after {

top: calc(anchor(top) - 4px);

bottom: anchor(top);

}

.nav-menu ul {

padding: 0;

margin: 0;

list-style: none;

display: flex;

flex-wrap: wrap;

position: relative;

anchor-name: --menu;

justify-content: center;

z-index: 2;

}

.nav-menu a {

display: block;

padding: 10px 20px;

text-decoration: none;

color: #fff;

transition: 0.3s;

font-size: 18px;

font-weight: bold;

}

.nav-menu a:hover {

position: relative;

display: block;

anchor-name: --menu;

color: #337AB7;

}

.nav-menu:has(a:hover):before,

.nav-menu:has(a:hover):after {

top: anchor(top);

left: anchor(left);

right: anchor(right);

bottom: anchor(bottom);

}

@supports not (anchor-name: --menu) {

.nav-menu a:hover {

color: #BFE2FF;

}

Пример:

HTML:

CSS:

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

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