CSS анимация вызывает некоторые проблемы, связанные с высотой и отступами

0

http://jsfiddle.net/QsCNc/

#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #1A1E2E;
border-bottom: 1px solid #ccc; 
height: 15%;
display: inline;
position: fixed;
z-index: 2;
}

#nav ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0; 
display: inline;
}

#nav li {
float: right; 
display: inline;
position: relative;
right: 20%;
top: 49%;
}

#nav li a {
display: block;
padding: 50px 15px;
text-decoration: none;
font-weight: bold;
color: white;
height: 50px;
/* animation */
z-index: 2;
position: relative;
transition: color 1s;
}

#nav li a:hover {
color: #c00;
}

#nav li a:before {
color: #C00;
background-color: #FFF;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
width: 100%;
height: 100%;
content: " ";
position: absolute;
top: -250px;
left: 0;
transition: top 1s;
z-index: -1;
border-bottom: 1px solid #F0F0F0;
border-left: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
border-top: 1px solid #C00;
}

#nav li a:hover:before {
top: -70px;
}

Выше ссылка на код для моего сайта. Лучше всего просмотреть полное окно, поэтому здесь ссылка на фактический сайт: http://adamshort.site50.net

У меня проблемы с навигацией. Когда вы наводите на них курсор, анимация играет, что хорошо. Однако вы можете нависать под вкладками довольно далеко, и анимация все равно будет играть. Я не могу понять, как я могу поддерживать анимацию так, как она есть, но не сможет ее активировать, когда она ниже, так как это, очевидно, немного странно.

Я попробовал изменить свой padding, высоту и т.д., Но это меняет длину белой вкладки, которая падает, и я не хочу этого.

Теги:
animation

2 ответа

1
Лучший ответ

У вас есть 50px отступов на ваших якорях меню и высота 50px, обе из которых не нужны самим якорям.

Попробуй это:

http://jsfiddle.net/isherwood/QsCNc/4

#nav li a {
    padding: 50px 15px 0;
    height: 20px;
}
#nav li a:hover:before {
    height: 220%;
}
#nav li a:before {
    transition: all 1s;
}

Отрегулируйте в соответствии.

Поделиться
  • 0
    Обновлены высоты и добавлена скрипка.
  • 0
    Спасибо за помощь. Единственная проблема, с которой я столкнулся сейчас, это когда белая вкладка оживляет, она слегка подпрыгивает. Я попытался изменить отступы, высоту, верхнее значение и т. Д., Но ни одна из них не работает так, как задумано. Как только он анимирован, когда ему нужно спрятаться, он, кажется, прыгает частично.
Показать ещё 2 комментария
1 
 #nav li a {
     ...
     padding: 50px 15px;
     height:50px;
     ...

У вас есть высота элемента, установленная на 50 пикселей. Очевидно, что все 50 пикселей начнут анимацию при наведении. Снимите высоту.

Во-вторых, добавление включено в любое событие hover. Маржа - нет. Измените padding на margin и вам должно быть хорошо идти.

Или удалите дополнение из элемента a и добавьте его в #nav li.

Поделиться
  • 0
    Спасибо за помощь. К сожалению, изменение его на margin удаляет желаемый вид и т. Д., И перемещение отступов также имеет тот же эффект.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню