Мобильная версияПока я создавал верхнюю навигацию для веб-сайта, я решил добавить анимацию для наведения на кнопку регистрации. Проблема в том, что когда она расширяется, остальная часть навигационного меню (ссылки и заголовок) также перемещается.
р>
Когда я сделал анимацию кнопки регистрации, я думал, что развернута только кнопка, а на остальную часть навигационного меню расширенная кнопка не влияет.
Вот тело и навигация в HTML:
. . [*]О программе [*]Возможность [*]Уроки Курс веб-разработки [*]Зарегистрируйтесь! [*]
. .
А вот теги, идентификаторы и классы, связанные с меню навигации в CSS:
@keyframes развернуть { от {ширины: 125 пикселей;} до {ширина: 135 пикселей;} } #nav-bar { позиция: абсолютная; переполнение: скрыто; дисплей: гибкий; float: встроенный старт; оправдание-содержание: пространство вокруг; нижняя граница: 1 пиксель, сплошной черный; ширина: 100% } ул { тип стиля списка: нет; маржа: 0; заполнение: 0; } ли { плыть налево; дисплей: гибкий; отступ слева: 10 пикселей; отступ справа: 10 пикселей; отступ-верх: 25 пикселей; } .logo { отступ сверху: 15 пикселей; } ли а { текстовое оформление: нет; цвет: #111; } ли а:hover { цвет: #c83737; } .btn{ положение: относительное; цвет фона: #c83737; ширина: 125 пикселей; высота: 30 пикселей; радиус границы: 25 пикселей; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; } .btn:наведите { анимация: расширение 0,5 с; } .btn а { цвет: #e3e3e3; } .btn a:hover{ цвет: #e3e3e3; } Я был бы признателен, если бы вы указали мне на ошибку и что мне следовало сделать вместо этого.
