@Discout

Как сделать появляющуюся черту с анимацией в CSS?

Как сделать черту, которая появлялась сверху бы при наведении курсора на пункт меню? Я сделал с помощью border-top: 5px solid #fff; но анимация выглядит не корректно - сдвигается сам пункт меню. Как это реализовать правильно?

p.s. страницу верстаю через bootstrap

Моя реализация:
c4a101c457d2f5aec908d1d24f0cb01c.gif
  • Вопрос задан
  • 3920 просмотров
Решения вопроса 2
Когда добавляете сверху border-top: 5px solid #fff;
Добавьте также свойство margin-top: -5px;

Либо можно изначально задавать
border-top: 5px solid transparent;
и при ховере указывать border-top: 5px solid #fff;
Ответ написан
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
1. У рамки сделать цвет transparent, тогда и рамка будет не видна, и прыгать при смене цвета не будет.
2. Можно использовать gradient, но накладно и не уверен в производительности.
3. Псевдоэлементы, но тут ещё большая засада — при анимации псевдообластей на мобильных устройствах могут появиться тормоза.

А вообще есть много подходов, включая совсем экзотические:)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Trow_eu
@Trow_eu
еще как вариант использовать box-shadow: inset - внутренюю тень.
либо без наведения - padding, при - убирать padding и добавлять border
Ответ написан
Комментировать
@Discout Автор вопроса
Часть кода css для навигации:
/*all statement*/

.navbar-nav > li > a {
	color: #fff;
	font-size: 15px;
	font-family: 'Myriad Pro';
	color: rgb( 255, 255, 255 );
	text-transform: uppercase;
	padding-top: 35px;
	display: inline-block;

}

.navbar-default .navbar-nav > li > a {
	color: #fff;
	 -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

/*active statement*/

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	background: none;
	color: #fff;
	padding-top: 30px;
	border-top: 5px solid #fff;

}

/*hover statement*/

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	background: none;
	color: #fff;
	padding-top: 30px;
	border-top: 5px solid #fff;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы