Последние: как избавиться от разрыва между двумя разными вертикальными, анимированными выпадающими меню? (Только CSS/HTM ⇐ Html

[Anonymous]

В моем последнем посте я спросил, как сделать плавный переход между раскрывающимися меню. Я получил большую помощь, и она выглядит потрясающе в версии веб -макета! CSS, который я реализовал, было следующим образом: < /p>
.navbar-nav .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(-10px);
/* Start slightly above */
}

/* Show the dropdown menu on hover */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
/* Slide down to its original position */
}

/* Optional: Add a slight delay to the animation for a smoother effect */
.navbar-nav .dropdown-menu {
transition-delay: 0.1s;
}

/* Ensure the dropdown menu stays visible when hovering over it */
.navbar-nav .dropdown-menu:hover {
opacity: 1;
visibility: visible;
}
< /code>
Тем не менее, на мобильном макете я столкнулся с проблемой. Когда я открываю меню на Navbar, между моим «просмотром» и «отправкой» появляются большие пробелы. Я хотел бы посмотреть, смогу ли я избавиться от этого, сохраняя анимацию. Это возможность? Вот мой html: < /p>

20
21 [*]
22
23
24 .nav-mobile-menu {color:#a85a44;background-color:#a85a44;border-color:#6a2925}.btn-outline-secondary {color:#6a2925;border-color:#6a2925}.btn-outline-secondary:hover {color:#ffd6a4;border-color:#ffd6a4;background-color:#a85a44}.navbar {background-color:#a85a44}.dropdown-toggle:after {color:#ffd6a4}.navbar .btn {color:#a85a44;background-color:#ffd6a4;border:10px;border-radius:30px}.navbar .btn:hover {color:#ffd6a4;background-color:#a85a44;border:10px}.fa-user:before {background-color:transparent!important}.navbar .dropdown-menu a {background-color:transparent;color:#a85a44}.navbar .dropdown-menu a:hover {background-color:transparent;color:#f5a46c}.navbar .navbar-brand {color:#ffd6a4}.navbar-toggleable-sm .navbar-nav .nav-link {color:#ffd6a4}.navbar-toggleable-sm .navbar-nav .nav-link:hover {color:#fdf6e3}.navbar-nav {color:#ffd6a4!important}.navbar .dropdown-menu {background-color:#ffd6a4;border-radius:30px}.navbar .dropdown-menu .dropdown-header {color:#6a2925}.row.row-offcanvas.row-offcanvas-left {background-color:#ffd6a4;background-image:url("LINK_HERE")}.sidebar {background-color:#f5a46c}.list-inline, .list-unstyled {background-color:#f5a46c}.side-nav li.divider {border-color:#ffd6a4}.side-nav li.header {color:#ffd6a4;background-color:#f5a46c}.side-nav .fa-fw {color:#fdf6e3}.side-nav a {color:#fdf6e3;transition:transform 0.3s ease,transform 0.3s ease;transition-timing-function:linear}.side-nav a:hover {color:#ffd6a4;transform:translateY(-1px)}.side-nav i {color:#fdf6e3}.side-nav span {color:#fdf6e3}.side-nav span:hover {color:#ffd6a4}.col-lg-7 {background-color:#ffd6a4}.bg-faded {background-color:#a85a44}.card.d-block.p-3.my-md-3 {background-color:#f5a46c}.card.d-block.p-3.my-md-3 a {background-color:#6a2925;color:#ffd6a4;transition:transform 0.3s ease,transform 0.3s ease;transition-timing-function:linear}.card.d-block.p-3.my-md-3 a:hover {background-color:#a85a44;color:#fdf6e3;transform:translateY(-1px)}.h-100 {background-color:#ffd6a4}.btn.btn-secondary {border:none;color:#f5a46c;background-color:#6a2925;border-radius:30px}.text-muted.text-uppercase.mt-4 {color:#6a2925!important}span.text-muted {color:#6a2925!important}a.mb-2 {color:#f5a46c;transition:transform 0.3s ease,transform 0.3s ease;transition-timing-function:linear}a.mb-2:hover {color:#ffd6a4;transform:translateY(-1px)}.display-4.text-muted.mb-0 {color:#ffd6a4!important}li {color:#fdf6e3}.fr-view p {color:#fdf6e3}.ml-lg-2, .mx-lg-2 {color:#f5a46c!important}.text-muted.text-uppercase {color:#6a2925!important}i.fal.fa-stars.fa-fw {color:#a85a44}p.text-uppercase.text-muted.mb-0 {color:#f5a46c!important}i.fal.fa-link.fa-fw {color:#f5a46c}.img-thumbnail {background-color:#a85a44!important;border:10px!important}.btn-primary {color:#f5a46c!important;background-color:#6a2925!important;border:10px!important}.btn-primary:hover {color:#fdf6e3!important;background-color:#f5a46c!important}.form-control {color:#6a2925;background-color:#fdf6e3}.btn.btn-secondary:hover {color:#fdf6e3;background-color:#f5a46c}[th-toggle].btn-secondary:before {background-color:#6a2925}.fi-pencil:before {color:#6a2925}.h1 {color:#6a2925}.side-nav li.active > a, .side-nav li.active > a:focus, .side-nav li.active > a:hover, .side-nav li.active > a:link {color:#6a2925}.footer {background-color:#6a2925}.link-block {background-color:#6a2925}.btn-success {color:#fdf6e3;background-color:#f5a46c;border:10px}.btn-success:hover {color:#f5a46c;background-color:#fdf6e3}.btn.btn-default {color:#fdf6e3;background-color:#6a2925}.btn.btn-default:hover {color:#6a2925;background-color:#fdf6e3}.link-panel:before {border:15px solid #6a2925;content:"";position:absolute}[role="button"], a {color:#6a2925}a:focus, a:hover {color:#a85a44}.badge-default {background-color:#6a2925;color:#a85a44}.navbar .nav-user-link .display-user-tiny img {border-radius:30px}.card.border-0.modal-open.bg-faded {border-radius:30px}.display-user-avatar {border-radius:30px}.navbar-nav .dropdown-menu {display:block;opacity:0;visibility:hidden;transition:opacity 0.3s ease,transform 0.3s ease;transform:translateY(-10px);transition-delay:0.1s}.navbar-nav .nav-item.dropdown:hover .dropdown-menu {opacity:1;visibility:visible;transform:translateY(0)}.navbar-nav .dropdown-menu:hover {opacity:1;visibility:visible}.dropdown-item {width:30px;height:30px;transition:height 0.3s;position:sticky;transition-timing-function:linear}.dropdown-item:hover {height:35px;opacity:1;visibility:visible}
25
26
27
28
29
30 TOYHOU.SE
43
44
45
46
47
48
49
50

• 51 Register
  52
• Login
  53

54
55
56
57
58
59 Menu
60
61 ```



Подробнее здесь: https://stackoverflow.com/questions/795 ... animated-d