防止菜单高度改变？

Question

所以我有这个菜单。如您所见，当我单击菜单按钮时，菜单高度会发生变化。我喜欢菜单有点滑出来。 （包括Bootstrap和jQuery）它可以在CSS中修复，还是我必须为它更改脚本？

JavaScript的：

var main = function(){
    var menuwidth = $(".menu").width();
    $(".menu").width(0).hide();
    $("#menubar").click(function(){
        $(".menu").show();
        if($(".menu").width() === 0){
            $(".menu").animate({
                width: menuwidth
            }, menuwidth*10);
        $(".menu").show();
        }else{
        $(".menu").animate({
            width: 0
            }, menuwidth*10, function(){$(".menu").hide();});
        }
    });
};

$(document).ready(main);

HTML：

<div class="nav">
    <center><i class="glyphicon glyphicon-align-justify" id="menubar"></i>
    <div class="menu">
        <button type="button" class="btn btn-success">iFone</button>
        <button type="button" class="btn btn-success">iFatch</button>
        <button type="button" class="btn btn-success">FOS 9</button>
    </div>
    </center>
</div>

CSS：

.nav{
    background-color: #494949;
    left: 0;
    top: 0;
    width: 100%;
    position: fixed;
    text-align:center;
}

#menubar{
    color:white;
    font-size: 2em;
}

.menubutton{
    font-size: 50;
}
.menu{
    display:inline;
}

Answer 1

你不用考虑身高就改变了。基本上当您减小宽度时，会增加高度以适应内容。

使用overflow:hidden设置菜单的高度以隐藏多余内容

.menu 
{
    display:inline-block;
    height:100px; /*Change this to what fits best*/
    overflow:hidden;
}

或者使用white-space:nowrap;停止按钮下降到下一行

.menu 
{
    display:inline-block;
    white-space:nowrap;
    overflow:hidden;
}

Answer 2

与@Jon P合作回答你可以删除使用auto

添加边距的中心html标签

.menu
{
...
margin-left: auto;
margin-right: auto;
}