bootstrap 3 collapse menu sliding down too far then jumping up

Question

Hi I am creating a navigation menu using bootstrap's "collapse" javascript component plugin.

The menu height will vary depending on how many menu items are listed so I don't want to set a fixed height.

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 1
                                
                                    
                                
                                
                                    
                                        sub menu item 1
                                    
                                    
                                        sub menu item 2
                                    
                                    
                                        sub menu item 3
                                    
                                    
                                        sub menu item 4
                                    
                                    
                                        sub menu item 5
                                    
                                
                            
                            
                                link 2
                                
                                    
                                
                                
                                    
                                        sub menu item 1
                                    
                                    
                                        sub menu item 2
                                    
                                    
                                        sub menu item 3
                                    
                                    
                                        sub menu item 4
                                    
                                    
                                        sub menu item 5
                                    
                                
                            
                            
                                link 3
                                
                                    
                                
                                 
                                    
                                        sub menu item 1
                                    
                                    
                                        sub menu item 2
                                    
                                    
                                        sub menu item 3
                                    
                                    
                                        sub menu item 4
                                    
                                    
                                        sub menu item 5
                                    
                                
                            
                            
                                link 4
                                
                                    
                                
                                  
                                    
                                        sub menu item 1
                                    
                                    
                                        sub menu item 2
                                    
                                    
                                        sub menu item 3
                                    
                                    
                                        sub menu item 4
                                    
                                    
                                        sub menu item 5
                                    
                                
                            
                            
                                link 5
                                
                                    
                                
                                 
                                    
                                        sub menu item 1
                                    
                                    
                                        sub menu item 2
                                    
                                    
                                        sub menu item 3
                                    
                                    
                                        sub menu item 4
                                    
                                    
                                        sub menu item 5

less css:

@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 0px 7px 0px rgba(51,51,51,1);
    background-color: #fff;
        .main-navigation-dropdown__menu,
        .main-navigation-dropdown__submenu {
            padding-left:0;
            list-style: none;
        }
        .main-navigation-dropdown__item {
            border-bottom: 1px solid @link-color;
            position:relative;
            clear: both;
            float: left;
            width: 100%;
            &:last-child {
                border: none;
            }
        }
        .main-navigation-dropdown__link {
            padding: 16px 22px 16px 0; 
            display: block;
            white-space: nowrap;
        }
        .main-navigation-dropdown__toggle-expand {
            position:absolute;
            right: 0;
            width:40%;
            text-align:right;
            cursor: pointer;
            top: 0px;
        }
        .main-navigation-dropdown__chevron {
            line-height: 56px;
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
            -o-transition-duration: 0.5s;
            transition-duration: 0.5s;
            -webkit-transition-property: -webkit-transform;
            -moz-transition-property: -moz-transform;
            -o-transition-property: -o-transform;
            transition-property: transform;
            outline: 0;
                 &:focus, &:active, &:hover {
                color: red;
            }
            &.is-active {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
           }
         }
        .main-navigation-dropdown__submenu {
            display:none;
        }

        .main-navigation-dropdown__submenu-item {
            width:50%;
            float: left;
        }

        .main-navigation-dropdown__submenu-link  {
            width:100%;
            text-align:left;
            display:block;
            padding: 10px 0;
            font-size: 14px;
            &:first-child {
                padding-top: 0px;
            }
            &:last-child {
                padding-bottom: 15px;
            }
        }



 }

WizardCoder · Accepted Answer

The issue is that the #collapse-main-nav 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 #collapse-main-nav and added margin to main-navigation-dropdown__menu instead.

There was still a bit of jumping which was being caused by the floated li causing the .main-navigation-dropdown__menu 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 :after the .main-navigation-dropdown__menu ul and applied clear:both and display:block.

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

bootstrap 3 collapse menu sliding down too far then jumping up

Answers (1)

Related Questions