загрузочное меню 3 свернуть вниз слишком далеко, а затем подпрыгнуть

Привет, Я создаю меню навигации, используя модуль загрузки «свернуть» javascript.

Высота меню будет варьироваться в зависимости от того, сколько элементов меню <div class = "main-navigation-menu" > <button type = "button" class = "main-navigation-menu__button" data-toggle = "collapse" data-target = "# Распад-основной нав" ария-haspopup = "истина" Aria вспененного = "ложный" > <промежуток класс = "значок-бар бар-один" > </ SPAN> <пролет класс = «значок-бар бар -two " > </ span> <span class = «icon-bar bar-three» > </ span> </ button> <div class = "Свернуть main-navigation-menu__dropdown main-navigation-dropdown" id = "collapse-main-nav" > <ul class = "main -Навигационный-dropdown__menu " > <литий класс = "главная навигация-dropdown__item" > <a HREF = "#" класс = "main-navigation-dropdown__link"> ссылка 1 </a> <промежуток класс = " основная навигационно dropdown__toggle-expand js-link-toggle-main-sub-menu " > <span class = " glyphicon glyphicon-chevron-down main-navigation-dropdown__chevron js-toggle-main-menu-item " > </ span> </ span > <ul class = "main-navigation-dropdown__submenu js-toggle-display-sub-menu" > <li class = "main-navigation-dropdown__submenu-item" > <a href = "#" class = "main-navigation- dropdown__submenu-ссылка " > пункт подменю 1 </a> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = "#" класс = "main-navigation-dropdown__submenu-link"> пункт 2 подменю </a> </ li> <li class = "main-navigation-dropdown__submenu-item" > <a href = "#" class = "main-navigation-dropdown__s ubmenu-ссылка " > пункт подменю 3 </a> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = "#" класс = "main-navigation-dropdown__submenu-link"> подпункт меню 4 </a> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = "main-navigation-dropdown__submenu-link "> "#" класс пункт подменю 5 < / а> </ LI> </ UL> </ литий> <литий класс = "главной навигации-dropdown__item" > <a HREF = "#" класс = "main-navigation-dropdown__link"> ссылка 2 </a> <span class = "main-navigation-dropdown__toggle-expand js-link-toggle-main-sub-menu" > <span class = "glyphicon glyphicon-chevron-down main-navigation-dropdown__chevron" > </ span> </ span > <ul class = "main-navigation-dropdown__submenu js-toggle-display-sub-menu" > <li class = "main-navigation-dropdown__submenu-item" > <a href = "#" class = "main-navigation- dropdown__submenu-ссылка " > пункт подменю 1 </a> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = "#" класс = "main-navigation-dropdown__submenu-link"> подпункт меню 2 </a> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = "main-navigation-dropdown__submenu-link "> "#" класс пункт подменю 3 < / а> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = "#" класс = "main-navigation-dropdown__submenu-link "> пункт подменю 4 </a> </ li> <li class = "main-navigation-dropdown__submenu-item" > <a HREF = "#" класс = "main-navigation-dropdown__submenu-link "> пункт подменю 5 </a> </ li> </ UL> </ li> <литий класс = "главной навигации-dropdown__item" > <a HREF = "#" класс = "main-navigation-dropdown__link"> ссылка 3 </a> <SPAN класс = "главной навигационной dropdown__toggle-расширения JS-канального тумблер главного подменю" > < span class = "glyphicon glyphicon-chevron-down main-navigation-dropdown__chevron" > </ span> </ span> <ul class = "main-navigation-dropdown__submenu js-toggle-display-sub-menu" > <li class = "главной навигационной dropdown__submenu-пункт" > <a HREF = "#" класс = "main-navigation-dropdown__submenu-link "> пункт подменю 1 </a> </ li> <литий класс = " главный-навигационно dropdown__submenu-пункт " > <a HREF = "#" класс = "main-navigation-dropdown__submenu-link"> пункт подменю 2 </a> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = "#" класс = "main-navigation-dropdown__submenu-link "> пункт подменю 3 </a> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <а HREF = " # " cl ass = "main-navigation-dropdown__submenu-link" > пункт 4 подменю </a> </ li> <li class = "main-navigation-dropdown__submenu-item" > <a href = "#" class = "main- navigation-dropdown__submenu-link " > подменю 5 </a> </ li> </ ul> </ li> <li class = " main-navigation-dropdown__item " > <a href = " # " class = " main -navigation-dropdown__link " > ссылка 4 </a> <span class = " main-navigation-dropdown__toggle-expand js-link-toggle-main-sub-menu " > <span class = " glyphicon glyphicon-chevron-down main- Навигационный-dropdown__chevron " > </ span> </ span> <ul class = " main-navigation-dropdown__submenu js-toggle-display-sub-menu " > <li class = " main-navigation-dropdown__submenu-item " > <a href = "#" class = "main-navigation-dropdown__submenu-link" > элемент подменю 1 </a> </ li> <li class = "main-navigation-dropdown__submenu-item" > <a href = "#" class = "main-navigation-dropdown__submenu-link" > пункт 2 подменю </a> </ li> <li class = "main-navigation-dropdown__submenu-item" > <a href = "#" class = "main- навигационная gation-dropdown__submenu-link " > подменю 3 </a> </ li> <li class = " main-navigation-dropdown__submenu-item " > <a href = " # " class = " main-navigation-dropdown__submenu-link " > подпункт меню 4 </a> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = класс = "main-navigation-dropdown__submenu-link "#""> пункт подменю 5 </a> </ LI> </ UL> </ литий> <литий класс = "главной навигации-dropdown__item" > <a HREF = "#" класс = "main-navigation-dropdown__link"> ссылка 5 </ a> <span class = "main-navigation-dropdown__toggle-expand js-link-toggle-main-sub-menu" > <span class = "glyphicon glyphicon-chevron-down main-navigation-dropdown__chevron" > </ span> < / span> <ul class = "main-navigation-dropdown__submenu js-toggle-display-sub-menu" > <li class = "main-navigation-dropdown__submenu-item" > <a href = "#" class = "main- navigation-dropdown__submenu-link " > подменю 1 </a> </ li> <li class = " main-navigation-dropdown__submenu-item " > <a href = " # " class = " main-navigation-dropdown_ _submenu-ссылка " > пункт подменю 2 </a> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = "#" класс = "main-navigation-dropdown__submenu-link"> подпункт меню 3 </a> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = "main-navigation-dropdown__submenu-link "> "#" класс пункт подменю 4 < / а> </ li> <литий класс = "главной навигации-dropdown__submenu-пункт" > <a HREF = "#" класс = "main-navigation-dropdown__submenu-link "> пункт подменю 5 </a> </ li> </ ul> </ li> </ ul> </ div> </ li> </ div>, поэтому я не хочу устанавливать фиксированную высоту.

If possible i want to keep the slide down collapse effect but, i want to resolve the fact that the menu appears to over slide the height of its contents and then jump up to the correct height. Please click on the burger menu to see the issue that i am experiencing.

https://codepen.io/angusgrant/pen/djoXJj

html:

@link-color: #333;
.main-navigation-menu {
    margin-top: 7px;
        margin-left: 5px;
      position: relative;
     .main-navigation-menu__button {
        padding: 2px 8px;
        border: none;
        display: block;
        background-color: #fff;
              &:focus {
                  outline: none;
              }
            span.icon-bar {
                background: @link-color;
                margin: 1px 0 7px;
                display: block;
                width: 28px;
                height: 2px;
                border-radius: 1px;
                }
        }
     .main-navigation-menu__button[aria-expanded="true"] {
        span.icon-bar {
            background: @link-color;
            width: 28px;
            margin: 5px 0;
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
            transition: all .3s ease;
        }
        span.icon-bar.bar-one {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            position: relative;
            top: 6px;
        }
        span.icon-bar.bar-two {
            display: none;
        }
        span.icon-bar.bar-three {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            position: relative;
        }

    }
    .main-navigation-menu__dropdown {
        position: absolute;
        top:34px;
        left:0;

    }
}

.main-navigation-dropdown {
    min-width: 450px;
    max-width: 600px;
    width:auto;
    @media (max-width: 600px) {
        min-width: none;
        max-width: none;
        width: 100vw;
    }
    padding: 20px;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(51,51,51,1);
    -moz-box-shadow: 0px 0px 7px 0px rgba(51,51,51,1);
    box-shadow: 0px

jquery,html,css3,twitter-bootstrap-3,

0

Ответов: 1

1 accepted

The issue is that the li element had padding on it. I am not certain but it is likely that the bootstrap Javascript is trying to get the innerHeight, which doesn't include the padding so it expands to the wrong height. At the end of the transition the inline height is removed and the dropdown reverts to it's actual height, which was causing the jump. All I did was remove the padding from .main-navigation-dropdown__menu and added margin to ul instead.

There was still a bit of jumping which was being caused by the floated li causing the :after ul to collapse, which likely was effecting the javascript ability to get the actual height of the dropdown as well. To fix that I just added a pseudo element .main-navigation-dropdown__menu the ul ul and applied clear:both and display:block.

https://codepen.io/anijack/pen/ejNreK

jquery,html,css3,twitter-bootstrap-3,
Похожие вопросы
Яндекс.Метрика