MediaWiki:Citizen.css: различия между версиями
Askell (обсуждение | вклад) Нет описания правки |
Askell (обсуждение | вклад) Нет описания правки |
||
Строка 203: | Строка 203: | ||
/* Контейнер списка (изначально скрыт) */ | /* Контейнер списка (изначально скрыт) */ | ||
.dropdown-content { | .dropdown-content { | ||
text-align: center; | |||
overflow: hidden; | |||
max-height: 0; | |||
opacity: 0; | |||
transition: max-height 0.28s ease-out, opacity 0.22s ease-out; | |||
background: #fff; | |||
border: 1px solid #ccc; | |||
border-radius: 6px; | |||
position: absolute; | |||
top: calc(100% + 8px); | |||
left: 0; | |||
right: 0; | |||
z-index: 50; | |||
padding: 4px 0; | |||
} | } | ||
Строка 224: | Строка 231: | ||
/* Эффект наведения на ссылки */ | /* Эффект наведения на ссылки */ | ||
.dropdown-content | .dropdown:hover .dropdown-content, | ||
.dropdown:focus-within .dropdown-content { | |||
max-height: 500px; /* достаточно для содержимого */ | |||
opacity: 1; | |||
} | } | ||
Строка 235: | Строка 244: | ||
/* Анимация сдвига только в рамках своей колонки */ | /* Анимация сдвига только в рамках своей колонки */ | ||
.menu-column .dropdown. | .menu-column .dropdown:hover ~ .dropdown, | ||
.menu-column .dropdown:focus-within ~ .dropdown { | |||
transform: translateY(100%); | transform: translateY(100%); | ||
transition: transform 0.3s ease-in-out; | transition: transform 0.3s ease-in-out; |